ποΈ getCollection()
Overview
getCollection()
lets you fetch a list of Shopify products with filters, pagination, sorting, and full metafield control β all in one go.
Perfect for building product grids, collection pages, or any searchable storefront. It supports deep customization with custom metafields, variant-level data, and smart utilities like camelCase keys, rich text HTML, and more.
Also returns top-level collection info like title
, handle
, descriptionHtml
, updatedAt
, image
, and seo
.
Shopify currently has a known bug where some top-level fields like descriptionHtml
, image
, and seo
can return null
even when filled in the admin panel.
β
Workaround: You can create equivalent custom metafields (e.g., custom.seo_title
, custom.description_html
) and use collectionMetafields
to access them reliably.
β When to use thisβ
- Rendering a collection page or product listing
- Showing filtered search results
- Powering infinite scroll or SSR product pages
- Fetching metafield-rich data (e.g. tech specs, weight, warranty)
- Working with variant-specific content
π§ Basic Usageβ
- TypeScript
- JavaScript
import { getCollection } from "@/lib/NextShopKit/client";
const result = await getCollection({
collectionHandle: "solar-kits",
includeProducts: true,
filters: [
{
productMetafield: {
namespace: "custom",
key: "category",
value: "Electronics",
},
},
{ price: { min: 500, max: 2000 } },
],
sortKey: "PRICE",
limit: 12,
collectionMetafields: [
{ field: "custom.show_on_website", type: "true_false" },
{ field: "custom.type", type: "single_line_text" },
],
productMetafields: [
{ field: "custom.warranty", type: "single_line_text" },
{ field: "custom.weight", type: "decimal" },
],
variantMetafields: [{ field: "custom.color", type: "single_line_text" }],
options: {
camelizeKeys: true,
resolveFiles: true,
renderRichTextAsHtml: false,
},
});
if (result.error || !result.data) {
// handle error
}
import { getCollection } from "@/lib/NextShopKit/client";
const result = await getCollection({
collectionHandle: "solar-kits",
includeProducts: true,
filters: [
{
productMetafield: {
namespace: "custom",
key: "category",
value: "Electronics",
},
},
{ price: { min: 500, max: 2000 } },
],
sortKey: "PRICE",
limit: 12,
collectionMetafields: [
{ field: "custom.show_on_website", type: "true_false" },
{ field: "custom.type", type: "single_line_text" },
],
productMetafields: [
{ field: "custom.warranty", type: "single_line_text" },
{ field: "custom.weight", type: "decimal" },
],
variantMetafields: [{ field: "custom.color", type: "single_line_text" }],
options: {
camelizeKeys: true,
resolveFiles: true,
renderRichTextAsHtml: false,
},
});
if (result.error || !result.data) {
// handle error
}
π§© Metafields supportβ
Support includes:
productMetafields
for product-level fieldsvariantMetafields
for variant-level fieldscollectionMetafields
for top-level collection custom datatransformCollectionMetafields
,transformProductMetafields
, andtransformVariantMetafields
to modify data- Rich media support for files, rich text, and references
- Output can be camelized for frontend compatibility
β‘οΈ Learn more in Options β and Metafield Types β
π Filters, Pagination, and Sortingβ
- Filters: available, variantOption, productMetafield, productTag, productType, collection, price
- Pagination:
limit
,cursor
,hasNextPage
,hasPreviousPage
- Sorting: by
TITLE
,PRICE
,BEST_SELLING
,CREATED
,ID
,MANUAL
,RELEVANCE
- Optional
reverse
boolean for ascending/descending direction
β‘οΈ See Filters β, Pagination β, and Sorting β
π¦ Returned Dataβ
Each call returns a full FetchCollectionResult
:
data[]
: each with id, title, handle, descriptionHtml, variants[], images[], metafields[]collection
: top-level info for the collection including:- id, title, handle
- descriptionHtml (can be empty)
- updatedAt (parsed into JS Date)
- image (url, altText, width, height)
- seo (title, description β may return
null
)
availableFilters[]
: optional list of filters (if available from collection)
availableFilters[]
only works for product-level metafields that meet specific Shopify conditions:
- Go to Settings β Custom data β Products in your Shopify admin
- Select a definition and scroll to Options
- Enable βFiltering for productsβ
- Make sure Storefront API access is turned on
Without these settings, the availableFilters
array will be empty.
pageInfo
: Relay-style structure with cursors and pagination infoerror
: If the request fails, anerror
string is returned with details about the issue.
β‘οΈ Dive deeper into Result Types β
π§ Server-only functionβ
This function must be called on the server. It uses a private Shopify Admin token.
β Use in:
- API routes
- Server Components
- Route Handlers
- "use server" functions
π« Avoid importing into client-side code.
β Next: Options Reference β
Description
Fetch a Shopify collection with optional product data, including filters, pagination, sorting, and metafields using @nextshopkit/sdk.