Getting Started

1. Enable SDK access

SDK access is not enabled by default. To turn it on:

1. Open the Elite Bundle Builder app in your Shopify admin
2. Go to Settings → Developer SDK
3. Click Enable SDK access and enter your developer email
4. Click Enable SDK access to confirm

The SDK is immediately active. The team may also reach out with setup guidance.

2. Verify the global is present

Open any bundle product page in your browser, open DevTools, and run:

window.eliteBundle

You should see an object like:

{
  version: "1.0.0",
  app: {
    shopDomain: "your-store.myshopify.com",
    moneyFormat: "${{amount}}",
    currencyCode: "USD",
    currencyRate: 1,
    storefrontAccessToken: "...",
    sdkEnabled: true,
    cartTransformCreated: true,
    bundleDiscountCreated: true,
    webPixelCreated: true,
    bundleRenderMode: "product_page"
  },
  byob: { templateData: {...}, bundleConfig: {...}, shopifyVariantId: 123, productId: "789" },
  mob: null,
  sdk: {
    byob: { steps: [...], cart: [...], addToCart: fn, checkout: fn, ... },
    mob: null
  },
  on: fn,
  off: fn
}

sdk is only present when sdkEnabled is true. If it is undefined, SDK access has not been enabled in the app settings.

3. Wait for the ready event

The sdk.byob and sdk.mob objects are populated after React mounts and products are fetched from the Storefront API. Listen for the ready event before reading SDK state:

document.addEventListener('elite:byob:ready', (event) => {
  const { steps, formatPrice } = window.eliteBundle.sdk.byob;
  console.log(`Bundle loaded with ${steps.length} steps`);
  steps.forEach(step => {
    console.log(step.title, step.products.map(p => p.title));
  });
});

For MOB:

document.addEventListener('elite:mob:ready', () => {
  const { options, selectableItems, totalPrice, formatPrice } = window.eliteBundle.sdk.mob;
  console.log(`MOB loaded with ${options.length} options`);
  console.log('Total price:', formatPrice(totalPrice));
});

4. Check if the SDK is available

Before using the SDK in your theme JavaScript, guard against stores that don't have it enabled:

function onSdkReady(type, callback) {
  if (!window.eliteBundle?.sdk) return; // SDK not enabled

  const eventName = type === 'mob' ? 'elite:mob:ready' : 'elite:byob:ready';
  document.addEventListener(eventName, callback);

  // Handle the case where the event already fired before your script ran
  const sdk = window.eliteBundle.sdk[type];
  if (sdk && !sdk.isLoading && !sdk.error) callback();
}

onSdkReady('byob', () => {
  // safe to use window.eliteBundle.sdk.byob here
});

5. Read static bundle config

The raw bundle config from Liquid is always available synchronously, even before React mounts:

const byob = window.eliteBundle.byob;
console.log(byob.productId);       // Shopify product ID
console.log(byob.bundleConfig);    // full bundle config object

The app object is also always available:

const { shopDomain, moneyFormat, storefrontAccessToken } = window.eliteBundle.app;