Quickstart

This walks the shortest path to a working bundle. Pick the mode that matches how much UI control you want.

Prerequisites

Headless enabled for your shop and at least one published bundle.
A headless API key (kit_live_… / kit_test_…).
A storefront that can run Shopify cart mutations (e.g. @shopify/hydrogen-react).

Mode 2 — SDK (custom UI)

Install the SDK. @kitenzo/react re-exports everything in @kitenzo/core, so one install is enough.
Terminal window
```
npm install @kitenzo/react
```

Wrap your app in the provider.

import { KitenzoProvider } from '@kitenzo/react';

export default function App() {
  return (
    <KitenzoProvider apiKey={import.meta.env.VITE_KITENZO_API_KEY}>
      <Outlet />
    </KitenzoProvider>
  );
}

Fetch a bundle and drive the builder.

import { useBundle, useBundleBuilder, useBundlePrice, useBundleCart } from '@kitenzo/react';

function BundlePage({ bundleId }: { bundleId: number }) {
  const { bundle, isLoading } = useBundle(bundleId);
  const builder = useBundleBuilder(bundle);
  const { formattedDiscountedPrice, hasDiscount } = useBundlePrice(bundle, builder.selections);
  const { addBundleToCart } = useBundleCart();

  if (isLoading || !bundle) return null;

  // Render bundle.sections yourself, call builder.addItem(sectionId, variantId)…
  // Then submit:
  // const result = await addBundleToCart(bundle, builder.selections);
}

Add the result to the Shopify cart (and write the _bundles attribute for native bundles). The addBundleToCart helper does both for you — see Cart helpers.

Full SDK guide Provider, every hook, and the cart helpers.

<link rel="stylesheet" href="https://live.bb.eight-cdn.com/bundle-builder-bundle.css" />
<script src="https://live.bb.eight-cdn.com/bundle-builder-bundle.js" async type="module"></script>

<bundle-builder-bundle-v1
  id="42"
  api-key="kit_live_…"
  prefix="https://live.bb.eight-cdn.com/api/headless/v1/embed"
  data='{"shop":{"domain":"your-store.myshopify.com","shopCurrency":"USD","cartCurrency":"USD","enabledCurrencies":["USD"],"moneyFormat":"${{amount}}"}}'
>
  <div class="bundle-builder-app--loading-spinner"><div></div></div>
</bundle-builder-bundle-v1>

import { BundleEmbed } from '@kitenzo/react';

<BundleEmbed
  bundleId={42}
  apiKey={import.meta.env.VITE_KITENZO_API_KEY}
  shopDomain="your-store.myshopify.com"
  onAddToCart={({ lines, bundleContent }) => {
    // add lines to the Shopify cart; write `_bundles` if bundleContent is present
  }}
/>

Full Embed guide Web component attributes, React wrapper, vanilla JS and cart interception.