Simple pagination

Last updated: Feb 21, 2019

Pagination is an ordered numbering of pages usually located at the top or bottom of a webpage. This simplified pagination example demonstrates how navigation is built using the paginate object and default_pagination filter, within paginate tags. Please note, this simplified example does not output a fully accessible pagination. For a more comprehensive solution, that breaks down pagination into customizable parts, see the Accessible pagination code example.

Place the following code where you wish pagination to display. This code must appear within paginate tags for the following example to work. Within the paginate tags, you can access the paginate object.
Specify the type of content you want to paginate, and at what limit you wish to paginate by, for example {% paginate collection.products by 12 %}.
Override the| default_pagination filter Next » and « Previous labels by passing a new label to the next and previous options.

{%- paginate blog.articles by 5 -%}
  {%- for product in collection.products -%}
    <!-- show product details here -->
  {%- endfor -%}

  {{ paginate | default_pagination: next: 'Older', previous: 'Newer' }}
{%- endpaginate -%}

Please note: We have intentionally limited CSS and JavaScript, and removed translation strings in order to keep these examples compatible with any theme. Any CSS we have included is for accessibility or rendering purposes.