Pagination can be performed via paginate  the liquid tag . Although any array of items can be paginated, only one array should be paginated on a page. The paginate tag is given two parameters: the array to paginate and the quantity to paginate by. 

Note

The maximum quantity of items that can be paginated is 1,000 — any greater provided quantity will be returned paginated by 1,000 items.

Liquid markup

{% paginate products by 2 %}
  {% for product in paginate.collection %}
    <h2>{{ product.name }}</h2>
  {% endfor %}
{% endpaginate %}

Rendered resulting markup

<h2>First Product Name</h2>
<h2>Second Product Name</h2>

Pagination Navigation

Within the paginate tag, the paginate object is available to create a custom page number navigation . 

If you would like to use an predefined page number navigation, you can utilize the default_pagination  liquid filter:

{{ paginate | default_pagination }}

Doing so will output the a variation of following markup on the page (the order of the elements and page numbers will vary based on what page is currently being shown):

<span class="page current">1</span>
<span class="page"><a href="{{ current page url }}?page=2">2</a></span>
<span class="page"><a href="{{ current page url }}?page=3">3</a></span>
<span class="deco">…</span>
<span class="page"><a href="{{ current page url }}?page=10">10</a></span>
<span class="deco">…</span>
<span class="next"> <a href="{{ current page url }}?page=2">Next</a></span>
Did this answer your question?