Pagination

Long lists load one page at a time with paginate:

{%- paginate collection.products by 24 -%}
  <ul class="grid">
    {%- for product in collection.products -%}
      <li>{% render 'product-card', product: product %}</li>
    {%- endfor -%}
  </ul>
  {{ paginate | default_pagination }}
{%- endpaginate -%}

What can be paginated

List	Without paginate
collection.products	the first 50
search.results	the first page
blog.articles	the first page
article.comments	the first page

Rules

• Page size: 1 to 250 items.
• The page comes from ?page= in the URL, so canonical_url and the page title include it after page 1.
• Filters and sort order in the URL are kept on every page link.
• Inside the block, paginate has current_page, pages, items, previous, next and parts to build your own controls.

{%- if paginate.pages > 1 -%}
  <nav aria-label="{{ 'general.pagination.label' | t }}">
    {%- if paginate.previous -%}<a href="{{ paginate.previous.url }}" rel="prev">‹</a>{%- endif -%}
    <span>{{ paginate.current_page }} / {{ paginate.pages }}</span>
    {%- if paginate.next -%}<a href="{{ paginate.next.url }}" rel="next">›</a>{%- endif -%}
  </nav>
{%- endif -%}

In right-to-left pages, flip arrow icons with CSS ([dir="rtl"] .icon-arrow { transform: scaleX(-1); }) rather than swapping characters.