Adding regular pagination

The only type of pagination in version 3.x is the classic pagination.

Our theme's collection pages feature "infinite loading" style pagination. But there are certain stores where a more classic pagination would be better. In this case, you can do so by doing just a few modifications to the theme.

In order to enable this feature you need to do some editing to the original theme files.

Go to the theme editor (read this article for more info)

Open /assets/theme.css file (or in older theme versions: assets/css_main.scss.liquid) and at the very end of the file, paste the following snippet:

.custom-collection-pagination {
  list-style: none;
  display: flex;
  width: 100%;
  text-align: center;
  justify-content: center;
  padding: 50px 40px 40px;
  border-top: 1px solid #eee;
  top: -1px;
  position: relative;
}
.custom-collection-pagination path {
  fill: #000;
  transition: all 100ms linear;
}
.custom-collection-pagination li {
  cursor: default;
}
.custom-collection-pagination li:not(.active):not(.arrow) {
  opacity: .66;
}
.custom-collection-pagination li > a,
.custom-collection-pagination li > span {
  display: block;
  width: 36px;
  height: 36px;
  text-align: center;
  margin: 0 7px;
  transition: all 100ms linear;
  position: relative;
}
.custom-collection-pagination li.arrow {
  height: 0;
}
.custom-collection-pagination li.arrow > a {
  height: 0;
  border-color: transparent !important;
}
.custom-collection-pagination li.arrow:first-child {
  margin-right: 20px;
}
.custom-collection-pagination li.arrow:last-child {
  margin-left: 20px;
}
.custom-collection-pagination li.arrow .prev {
  left: 12px;
}
.custom-collection-pagination li.arrow.disabled {
  opacity: .12;
  pointer-events: none;
}
@media all and (max-width: 640px) {
  .custom-collection-pagination {
    padding: 40px 30px 30px;
  }
  .custom-collection-pagination li > a,
  .custom-collection-pagination li > span { 
    margin: 0;
  }
}
@media all and (max-width: 419px) {
  .custom-collection-pagination li.arrow {
    display: none;
  }
}

^ Make sure that you edit the two hardcoded colors if they don't fit your current design (#000 & #eee)

Choose /sections/collection.liquid and locate the current pagination:

{% if paginate.pages > 1 and paginate.next %}
  <div class="site-box box--small lap--box--small-lg box--center-align box--no-padding box--column-flow box__paginate">
    <div class="site-box-content">
      <a class="block-fade" href="{{ paginate.next.url }}" title="{{ paginate.next_page }}" aria-label="{{ paginate.next_page }}"> 
        <span aria-hidden="true">{% render 'asset_svg', icon_name: 'plus_icon' %}</span>
      </a>
    </div>
  </div>
{% endif %}

Remove this code entirely.

CHECK YOUR THEME VERSION !!
If your theme version is 2.5.0 or higher

Add this code instead:

{% if paginate.pages > 1 %}

 <ul class="custom-collection-pagination">

  <li class="arrow {% unless paginate.previous %} disabled {% endunless %}"><a class="prev" href="{{ paginate.previous.url }}" title="{{ paginate.previous.title }}"><span style="display: block; transform: rotate(180deg);" aria-label="{{ 'general.paginate.previous_page' | t }}"> {% render 'theme-symbols', icon: 'arrow_icon_long' %}</span></a></li>

  {% for part in paginate.parts %}
    {% if part.is_link %}
      <li><a href="{{ part.url }}" title="">{{ part.title | escape }}</a></li>
    {% else %}
      {% if part.title == paginate.current_page %}
        <li class="active"><span>{{ part.title | escape }}</span></li>
      {% else %}
        <li><span>{{ part.title | escape }}</span></li>
      {% endif %}
    {% endif %}
  {% endfor %}

  <li class="arrow {% unless paginate.next %} disabled {% endunless %}"><a class="next" href="{{ paginate.next.url }}" title="{{ paginate.next.title }}"><span aria-label="{{ 'general.paginate.next_page' | t }}"> {% render 'theme-symbols', icon: 'arrow_icon_long' %}</span></a></li>

 </ul>
{% endif %}

In the same file, look for the following line:
```
{% paginate collection.products by section.settings.collection_per %}
	
```
Because the current pagination requires an extra block, now that we don't have this, we need to manually reset the number of products per page to a multiply of 4. For example:
```
{% paginate collection.products by 24 %}
	
```
CHECK YOUR THEME VERSION !!
If your theme version is 2.4.2 or lower

Add this code instead:

{% if paginate.pages > 1 %}
 <ul class="custom-collection-pagination">

  <li class="arrow {% unless paginate.previous %} disabled {% endunless %}"><a class="prev" href="{{ paginate.previous.url }}" title="{{ paginate.previous.title }}"><span style="display: block; transform: rotate(180deg);" aria-label="{{ 'general.paginate.previous_page' | t }}"> {% include 'asset_svg' with 'arrow_icon_long' %}</span></a></li>

  {% for part in paginate.parts %}
    {% if part.is_link %}
      <li><a href="{{ part.url }}" title="">{{ part.title | escape }}</a></li>
    {% else %}
      {% if part.title == paginate.current_page %}
        <li class="active"><span>{{ part.title | escape }}</span></li>
      {% else %}
        <li><span>{{ part.title | escape }}</span></li>
      {% endif %}
    {% endif %}
  {% endfor %}

  <li class="arrow {% unless paginate.next %} disabled {% endunless %}"><a class="next" href="{{ paginate.next.url }}" title="{{ paginate.next.title }}"><span aria-label="{{ 'general.paginate.next_page' | t }}"> {{% include 'asset_svg' with 'arrow_icon_long' %}</span></a></li>

 </ul>
{% endif %}

In the same file, look for the following line:
```
{% paginate collection.products by section.settings.collection_per %}
	
```
Because the current pagination requires an extra block, now that we don't have this, we need to manually reset the number of products per page to a multiply of 4. For example:
```
{% paginate collection.products by 24 %}
	
```
Save all files and you're done.