From Shopify Wiki

The paginate tag is responsible for pagination within Shopify. It is currently applicable to collections, blog articles, article comments and search results.

Take note that you can also paginate your “frontpage” collection in index.liquid, although that's not commonly done in themes found in the wild. The usual suspects where you'll find paginate tags are collection.liquid, search.liquid, blog.liquid (paginating articles) and article.liquid (paginating comments).

Don't paginate a collection by more than 50, that's how many products maximum you should query per page. Be respectful of Shopify's app servers. If you are not using any paginate tags, pagination does kick in behind the curtain and you will only receive the first 50 products in said collection.

Usage

To use pagination you have to wrap your for loop in which you iterate over a collection in the pagination tag. The pagination tag will figure out all the metrics by itself and make sure that further calls to the collection will return with the correct items.

 {% paginate collection.products by 5 %}  
   {% for product in collection.products %}
     {{ product.title }}
   {% endfor %}
  {% endpaginate %}

The paginate object

Within the paginate block you have access to the paginate object which provides the following information:

• paginate.page_size - The size of each page. That's the amount of items displayed.
• paginate.current_page - On which page are we right now?
• paginate.current_offset - How many items did we skip over so far
• paginate.pages - The amount of pages there are
• paginate.items - Total amount of items in this collection
• paginate.previous - Exists if there is a previous page.
  • paginate.previous.title - Title of the link
  • paginate.previous.url - URL of the link

• paginate.next - Exists if there is another page.
  • paginate.next.title - Title of the link
  • paginate.next.url - URL of the link

• paginate.parts - Array of all the parts which make up a good navigation for this pagination. Each element will have any of these three elements:
  • part.is_link - Is this part a link?
  • part.title - Link Title
  • part.url - Link URL

The variable current_page is also available on all pages. This is useful for including the page number in the pages title tag and making other modifications to the page that are not within the paginate block.

Displaying the pagination navigation

The easy way: default pagination

The paginate tag will add a new paginate variable to your view from which all vital parameters for pagination can be extracted.

If you just want to get a good standard pagination going, you can take this paginate variable and pipe it into the filter default_pagination which will leave you with attractive looking and fully functional pagination.

{% paginate collection.products by 5 %}  
  {% for product in collection.products %}
    {{ product.title }}
  {% endfor %}

  <div id="pagination">
  {{ paginate | default_pagination }}
  </div>
{% endpaginate %}

This is the way default pagination shows up in your source code.

<p>
<span class="page current">1</span> 
<span class="page"><a href="/search?page=2&q=slant" title="">2</a></span> 
<span class="next"><a href="/search?page=2&q=slant" title="">Next »</a></span>
</p>

To translate the text Previous and Next in another language, use the replace filter like so:

{{ paginate | default_pagination | replace: 'Previous', 'YOUR TRANSLATION HERE FOR PREVIOUS' | replace: 'Next', 'YOUR TRANSLATION HERE FOR NEXT' }}

You will need to edit the code Template:Paginate in all those templates:

• collection.liquid
• blog.liquid
• article.liquid (comments should be paginated)
• search.liquid

Manually using pagination

  {% if paginate.previous %}
    {{ paginate.previous.title | link_to: paginate.previous.url }}
  {% endif %}
  {% for part in paginate.parts %}
    {% if part.is_link %}
      {{ part.title | link_to: part.url }}
    {% else %}
      {{ part.title }}        
    {% endif %}        
  {% endfor %}      
  {% if paginate.next %}
    {{ paginate.next.title | link_to: paginate.next.url }}
  {% endif %}

This will give you:

<a href="/collections/works-on-paper?page=1" title="">« Previous</a>
<a href="/collections/works-on-paper?page=1" title="">1</a>
<a href="/collections/works-on-paper?page=3" title="">Next »</a>

If you want to change the link text, replace paginate.previous.title with 'Link Text' i.e.

  {% if paginate.previous %}
    {{ 'previooooooous' | link_to: paginate.previous.url }}
  {% endif %}

If you want to add the "current" class only to the current page number and not the generated ellipses, you'll need to add in an if statement like {% if part.title == '…' %}. Here's a full example of a custom pagination with the 'current' class on the current page number.

        {% if paginate.previous %}
          {{ '<' | link_to: paginate.previous.url }}
        {% endif %}
        {% for part in paginate.parts %}
          {% if part.is_link %}
            {{ part.title | link_to: part.url }}
          {% else %}
            {% if part.title == '&hellip;' %}
            {{ part.title }}
            {% else %}
            <span class="current">{{ part.title }}</span>
            {% endif %}
          {% endif %}
        {% endfor %}
        {% if paginate.next %}
          {{ '>' | link_to: paginate.next.url }}
        {% endif %}

Showing which items are displayed

To output something like this:

Showing items 26-50 of 345.

Use this:

Showing items {{ paginate.current_offset | plus: 1 }}-{% if paginate.next %}{{ paginate.current_offset | plus: paginate.page_size }}{% else %}{{ paginate.items }}{% endif %} of {{ paginate.items }}.