Skip to main content
The collection page (templates/collection.json → sections/main-collection.liquid) supports three pagination modes. Pick whichever fits your editorial pacing and the visitor behaviour you want to encourage. The default is numbered pagination because it preserves a deliberate reading pace — important for editorial-led catalogs where every product is meant to be considered.

​
The three modes

​
Switching modes

Theme Customizer → Theme settings → Collection pagination. The setting takes effect on every collection page automatically — no per-collection configuration needed.

​
How it works under the hood

All three modes use the same Liquid {% paginate collection.products by per_page %} block. The difference is in what renders below the grid:
  • Pagination → renders {{ paginate | default_pagination }} — Shopify’s standard numbered nav.
  • Load more → renders a <button> with data-plp-loadmore + data-next-url attributes. JS in assets/infinite-scroll.js intercepts the click, fetches the next URL via fetch(), parses out the next page’s product cards ([data-plp-grid]), and appends them to the existing grid.
  • Infinite scroll → same as load-more, but JS hides the button and uses an IntersectionObserver with rootMargin: '600px 0px' to auto-trigger the fetch when the sentinel scrolls into view.
After each fetch, the data-next-url attribute is advanced to whatever the freshly loaded page’s next-link is. When that becomes empty, the end-of-list message renders and further loading stops.

​
SEO considerations

​
Mixing modes

The setting is global — every collection page uses the same mode. If you need different behavior per collection (e.g. infinite scroll on /collections/all but pagination on curated edits), Voyager doesn’t ship that per-collection override out of the box; ask via the support form if you need it.

​
Implementation notes

  • Section: sections/main-collection.liquid lines ~214–245 (paginate block)
  • JS: assets/infinite-scroll.js — loaded conditionally only when the mode is load_more or infinite_scroll (gated by {%- if settings.collection_pagination_mode == 'load_more' or settings.collection_pagination_mode == 'infinite_scroll' -%} at the bottom of the section)
  • Styling: .plp-loadmore__* block at the end of assets/premium.css
  • Theme settings: new “Collection pagination” group in config/settings_schema.json