Liquid pagination
Definition
The paginate tag splits a collection, blog, search result or list into pages of a fixed size and exposes an object describing the ladder: the current position, the page links, and the next and previous pages. It runs on the server, so every page it produces is a real URL that renders with no JavaScript at all.
Documented at shopify.dev, the paginate tag.
How We've Used It
Paging is the part of a grid that's easy to get wrong twice. Our rule is that the server-rendered ladder stays, because those URLs are crawlable and they work with scripts off, and anything progressive layers on top of it rather than replacing it. Load-more re-fetches the same section at the next page and appends it, so active filters and sort carry forward on their own and one card renderer stays in charge of what a card looks like. Infinite scroll, where a client wants it, is a listener on that same button. The pagination object is also what a bundle grid hands to its script so it can extend itself without a second endpoint.
Builds Using It
- Collection page with three filter modes — Three Ships. The server-rendered ladder stays underneath an infinite-scroll layer.
- Creator collab video listing driven by article metafields — Nudestix
- Tabbed multi-type search results page with faceted filtering — Three Ships
- Metafield-driven editorial article template (TSB blog) — Three Ships
- House pagination component with result counter for blog and collection grids — LUS Brands
Related Entities
- History API — how the page in view becomes a shareable URL.
- Intersection Observer API — what triggers the next page.
- Liquid section schema and settings — where page size and mode are configured.
- Filters and faceted navigation — the capability it belongs to.