🛍️ 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.

✅ 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​

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 fields
• variantMetafields for variant-level fields
• collectionMetafields for top-level collection custom data
• transformCollectionMetafields, transformProductMetafields, and transformVariantMetafields 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)

• pageInfo: Relay-style structure with cursors and pagination info
• error: If the request fails, an error string is returned with details about the issue.

➡️ Dive deeper into Result Types →

🔒 Security & Usage Guidelines​

🛡️ Server-side Usage (Recommended)​

Use private environment variables for optimal security and performance:

✅ Best for:

• Collection pages and product listings
• API routes and server actions
• Server Components and static generation
• Better performance and SEO

⚛️ Client-side Usage (When Required)​

Use NEXT_PUBLIC_ environment variables for interactive features:

✅ Required for:

• Dynamic filtering and search
• Real-time inventory updates
• Interactive product configurators

✅ Next: Options Reference →