🧠 Shopify Client SDK

Welcome to the heart of @nextshopkit/sdk and @nextshopkit/pro.
Everything starts with createShopifyClient() — a typed, server-safe way to access Shopify’s Storefront API.

🛠 What is the client?​

The client is your gateway to Shopify. It wraps all of your requests and gives you access to prebuilt methods like:

• getProduct() — Fetch a single product by handle
• getCollection() — Fetch multiple products with filters, sorting, and pagination within a collection
• getPolicies() — Fetch refund, privacy, terms, and shipping policies (PRO only)

⚙️ Initializing the client​

You only need to do this once — usually inside:

lib/NextShopKit/client.ts

import {
  createShopifyClient,
  GetProductOptions,
  FetchProductResult,
  GetPoliciesOptions,
  FetchPoliciesResult,
  GetCollectionOptions,
  FetchCollectionResult,
} from "@nextshopkit/sdk"; // or "@nextshopkit/pro"

// Cache options can be used both for CORE and PRO tier.
const client = createShopifyClient({
  shop: process.env.SHOPIFY_STORE_DOMAIN!,
  token: process.env.SHOPIFY_ACCESS_TOKEN!,
  apiVersion: "2025-01",
  enableMemoryCache: true,
  defaultCacheTtl: 300,
  enableVercelCache: true,
  defaultRevalidate: 60,
});

// The cache option specified here overrides the default
// client-level cache settings and is exclusively available
// in the PRO tier. Note that the CORE tier does not
// support function-specific cache configurations.
export const getProduct = async (
  args: GetProductOptions
): Promise<FetchProductResult> =>
  client.getProduct(args, {
    cacheTtl: 60,
    revalidate: 60,
    useMemoryCache: true,
    useVercelCache: true,
  });

export const getCollection = async (
  args: GetCollectionOptions
): Promise<FetchCollectionResult> => client.getCollection(args);

export const getPolicies = async (
  args: GetPoliciesOptions
): Promise<FetchPoliciesResult> => client.getPolicies(args);

export default client;

import { createShopifyClient } from "@nextshopkit/sdk"; // or "@nextshopkit/pro"

// Cache options can be used both for CORE and PRO tier.
const client = createShopifyClient({
  shop: process.env.SHOPIFY_STORE_DOMAIN,
  token: process.env.SHOPIFY_ACCESS_TOKEN,
  apiVersion: "2025-01",
  enableMemoryCache: true,
  defaultCacheTtl: 300,
  enableVercelCache: true,
  defaultRevalidate: 60,
});

// The cache option specified here overrides the default
// client-level cache settings and is exclusively available
// in the PRO tier. Note that the CORE tier does not
// support function-specific cache configurations.
export const getProduct = async (args) =>
  client.getProduct(args, {
    cacheTtl: 60,
    revalidate: 60,
    useMemoryCache: true,
    useVercelCache: true,
  });

export const getCollection = async (args) => client.getCollection(args);
export const getPolicies = async (args) => client.getPolicies(args);

export default client;

🔐 Environment Variables​

Your .env.local file must contain:

SHOPIFY_ACCESS_TOKEN=your-access-token
SHOPIFY_STORE_DOMAIN=your-store.myshopify.com

These values are never exposed to the client. Always use the SDK on the server only.

🧩 What does the client return?​

Every SDK method returns the same structure:

const { data, error } = await getProduct({ handle: "solar-kit-9kw" });

if (error || !data) {
  // Handle the error gracefully
}

You always get:

• data: the structured result (or null if not found)
• error: a parsed error object (or null if success)

📚 Method Overview​

⚠️ Server-only usage required​

✅ Best practices​

• Place the client setup inside lib/NextShopKit/client.ts
• Create wrappers like getProduct, getCollection, and getPolicies so you can mock or extend them later
• Handle error and null data gracefully
• Group usage per domain (lib/NextShopKit/products.ts, cart.ts, etc.)

🧪 Need examples?​

• See getProduct examples →
• See getCollection options →
• See getPolicies setup →