🛠 `CartProvider` Setup

The CartProvider wraps your app and provides cart state to all child components via React Context.

📦 Installation

TypeScript
JavaScript

import { CartProvider } from "@nextshopkit/sdk/client";
import { createShopifyClient } from "@nextshopkit/sdk";

const client = createShopifyClient({
  shop: process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN!,
  token: process.env.NEXT_PUBLIC_SHOPIFY_ACCESS_TOKEN!,
  apiVersion: "2025-04",
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <CartProvider client={client}>{children}</CartProvider>
      </body>
    </html>
  );
}

import { CartProvider } from "@nextshopkit/sdk/client";
import { createShopifyClient } from "@nextshopkit/sdk";

const client = createShopifyClient({
  shop: process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN,
  token: process.env.NEXT_PUBLIC_SHOPIFY_ACCESS_TOKEN,
  apiVersion: "2025-04",
});

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <CartProvider client={client}>{children}</CartProvider>
      </body>
    </html>
  );
}

⚙️ Configuration Options

The CartProvider accepts optional configuration:

<CartProvider
  client={client}
  config={{
    persistCartId: true, // Save cart ID to localStorage (default: true)
    storageKey: "nextshopkit-cart-id", // Custom localStorage key
    autoCreateCart: true, // Auto-create cart on mount (default: true)
  }}
>
  {children}
</CartProvider>

🔐 Environment Variables

For client-side cart operations, you'll need public environment variables:

NEXT_PUBLIC_SHOPIFY_ACCESS_TOKEN=your-storefront-access-token
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=your-store.myshopify.com

Security Note

Only use NEXT_PUBLIC_ prefixed variables for client-side cart operations. Never expose admin tokens or sensitive credentials.

🧪 Next Steps

Once the provider is set up, you can use the useCart() hook in any child component:

import { useCart } from "@nextshopkit/sdk/client";

function AddToCartButton({ productId }: { productId: string }) {
  const { addProducts, loading } = useCart();

  return (
    <button
      onClick={() => addProducts([{ merchandiseId: productId, quantity: 1 }])}
      disabled={loading}
    >
      Add to Cart
    </button>
  );
}