Skip to main content

Shopify Pagination

From what I can tell, Shopify only works with Cursor Pagination when paginating results in GraphQL. See: Pagination. What this means is that it is not possible (at least in any pratical sense, see alternative below), to create a sort of Page pagination using Shopify (i.e. 1, 2, ...5), like you do in almost any other Graphql backend, where Offset Pagination is used. In fact, Shopify dodesn't even return to you the total amount of records for a specific query, so you have no way to set up a proper pagination variables in the first place. This makes pagintion in Shopify, a bit of a pain.

With Shopify, the best you can do is set up a Previous and Next Pagination, which is exactly what the Pagination component in Hydrogen does (see the link above) and here on Shopify Hydrogen Repo Pagination.

An alternative solution to the above Pagination difficulties, is to just fetch all your Shopify records for a specific type, like products. As Shopify allows 250 records per call, you can do this in a few calls, if you don't have alot of records. You can store all the records in a new Array. Then get the length of the new array, and that gets you total results. Then you can set up your own pagination using the total results, results per page, and basic Array manipulation with Array.slice. This is a bit more complicated than the Previous/Next that will work out of the box with Shopify, but for a better UI, you might choose to do Pagination this way.