Skip to content
Kitenzo Headless is currently invite-only. To enable it on your store, email support@kitenzo.com.

Integration modes

There are two ways to put a Kitenzo bundle into a headless storefront. They share the same API and the same API key — pick based on how much control you want over the UI.

Mode 1 — Embed the full UI

Render the admin-configured bundle template with the <bundle-builder-bundle-v1> web component (or the React BundleEmbed wrapper, or createBundleEmbed for vanilla JS).

Best for: stores that want the exact same experience as a Liquid theme — templates, conditions, limit rules, tiered discounts and visual customizations — with zero UI code.

Read the Embed guide →

Mode 2 — Build a custom UI

Use @kitenzo/core / @kitenzo/react hooks to fetch bundle data and drive a builder state machine. You render every pixel; the SDK handles validation, local pricing and the cart payload.

Best for: stores that need a fully custom design that matches their headless storefront.

Read the SDK guide →

Mode 1 — EmbedMode 2 — SDK
UIAdmin-configured template (prebuilt)You build it
PackagesNone required (or @kitenzo/react for BundleEmbed)@kitenzo/core + @kitenzo/react
API surface usedEmbed sub-API (/embed/api/v1/…)Headless API (/bundles, /configure, …)
Conditions engineEvaluated by the bundle UIYou evaluate client-side if needed
Cart integrationIntercept kitenzo:addtocart, write _bundlesaddBundleToCart() / buildCartPayload()
StylingOverride the template’s CSSEntirely your own
  • Authentication — a Bearer API key (kit_live_… / kit_test_…).
  • Discounting — the Shopify cart transform applies the discount at checkout as long as the _bundles cart attribute is set for native bundles. See Cart & discount application.
  • No proxy — both talk directly to the Kitenzo API; CORS is handled per key.