Adding regular 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.

  1. Go to the theme editor (read this article for more info)
  2. 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)

  3. 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
  4. 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 %}
    	
  5. 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
  6. 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 'asset_svg', icon_name: '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 'asset_svg', icon_name: 'arrow_icon_long' %}</span></a></li>
    
     </ul>
    {% endif %}
    	
  7. 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 %}
    	
  8. Save all files and you're done.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.