🔄 Pagination
getCollection() uses Relay-style cursor pagination, which is the standard for Shopify Storefront API.
This lets you load products in chunks (pages) and support infinite scroll, load more, or pagination controls easily.
✨ Pagination Options
You can paginate using the following input fields:
{
limit: 12,
cursor: "eyJsYXN0X2lkIjoxNTAxNTEwNjUxMTE3MiwibGFzdF92YWx1ZSI6Mn0=",
reverse: false,
}
| Option | Type | Description |
|---|---|---|
limit | number | Number of products to fetch per page (default: 12) |
cursor | string | Cursor from the previous page to fetch next/previous |
reverse | boolean | If true, reverses the sort direction (useful for "Prev" pages) |
🧾 Example: Infinite Scroll
const { data, pageInfo } = await getCollection({
collectionHandle: "solar-kits",
includeProducts: true,
limit: 8,
cursor: lastCursor,
sortKey: "CREATED",
});
You’ll receive the following in your result:
pageInfo: {
hasNextPage: true,
hasPreviousPage: false,
endCursor: "abc123",
startCursor: "xyz456",
}
You can use endCursor to fetch the next page and hasNextPage to check if more products exist.
🔁 Looping Through Pages
You can paginate until hasNextPage is false:
let allProducts = [];
let cursor: string | null = null;
do {
const result = await getCollection({
collectionHandle: "solar-kits",
includeProducts: true,
limit: 20,
cursor,
});
allProducts = [...allProducts, ...result.data];
cursor = result.pageInfo?.endCursor ?? null;
} while (result.pageInfo?.hasNextPage);
Shopify does not support offset-based pagination (like page 1, 2, 3...) through the Storefront API.
This means:
- You cannot jump directly to page 5.
- There is no
totalPages, onlyhasNextPageandendCursor. totalCountis not provided by Shopify either. As a result, we cannot calculate or provide this value either.
For consistent UX, use "Load More" buttons, infinite scroll, or previous/next controls with cursors.
🧠 Pagination Type
The returned result includes:
type ProductsPageInfo = {
hasNextPage: boolean;
hasPreviousPage: boolean;
endCursor: string | null;
startCursor: string | null;
};
You can safely pass endCursor or startCursor to navigate between pages.
Shopify does not support offset-based pagination (like page 1, 2, 3...) through the Storefront API.
This means:
- You cannot jump directly to page 5.
- There is no
totalPages, onlyhasNextPageandendCursor. totalCountis not provided by Shopify either.
For consistent UX, use "Load More" buttons, infinite scroll, or previous/next controls with cursors.
✅ Next: Sorting →
Description
Paginate through Shopify collections using Relay-style cursors and limit settings.