🧾 getProduct() Overview

The getProduct() method allows you to fetch a single product by its handle or ID, along with associated variants, images, pricing, and custom metafields.

It returns a well-structured and typed result with a familiar shape you can use in your frontend — without writing raw GraphQL.

✅ When to use this​

• Rendering a product detail page
• Getting variant-specific pricing
• Displaying custom product attributes via metafields
• Fetching product details for static generation or SSR

🧠 Basic Usage​

import { getProduct } from "@/lib/NextShopKit/client";

const { data, error } = await getProduct({
  handle: "solar-kit-9kw",
  customMetafields: [
    { field: "custom.warranty", type: "single_line_text" },
    { field: "custom.weight", type: "decimal" },
  ],
  options: {
    resolveFiles: true,
    renderRichTextAsHtml: true,
    camelizeKeys: true,
  },
});

if (error || !data) {
  // handle error
}

console.log(data.title, data.price.amount);

📥 Input Sources​

You can fetch a product using:

• ✅ handle (recommended for product pages)
• ✅ id (if stored in your database or passed from related queries)

You must provide either handle or id. If both are missing, an error will be returned.

📦 Returned Data​

You receive a fully typed Product object containing:

• id, title, handle, descriptionHtml
• featuredImage, images[]
• variants[] — each with:
  • variantTitle, price, optional compareAtPrice
  • optional metafields
• price, compareAtPrice — inferred from the first variant
• metafields — casted, camelized, and optionally transformed

➡️ See full return structure in Result Types →

🧩 Metafield Support​

getProduct() supports:

• customMetafields: for product-level metafields
• variantMetafields: for metafields inside each variant

You can also:

• Transform data using transformMetafields
• Automatically cast and format files or rich text

➡️ Learn how to define and use metafields in Custom Metafields →

⚠️ Server-only usage​

✅ Continue: Options Reference →