Getting started with the SDK

Enable SDK access in Elite Bundle Builder, wait for the elite:byob:ready event, and read your first bundle state from window.eliteBundle.sdk.byob.

1. Enable SDK access

SDK access is off by default.

1

Open the Elite Bundle Builder app in your Shopify admin.

2

Go to Settings → Developer SDK.

3

Click Enable SDK access, enter your developer email, and 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,
    countryCode: "US",
    locale: "en",
    storefrontAccessToken: "...",
    sdkEnabled: true
    // plus internal setup fields
  },
  byob: { bundleConfig: {...}, shopifyVariantId: 123, productId: "789" },
  sdk: {
    byob: { steps: [...], cart: [...], addToCart: fn, selectOne: fn, checkout: fn, ... }
  },
  on: fn,
  off: fn
}

byob holds the bundle on this page whichever type it is — build-your-own or multi-option. Both use the same sdk.byob.

sdk is only present when sdkEnabled is true. If it is missing, either SDK access has not been enabled in the app settings, or the deferred bundle script has not run yet. See step 4.

3. Wait for the ready event

sdk.byob is populated once the bundle has fetched its products and rendered. Wait for the ready event before reading it:

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.products.map(p => p.title));
  });
});

A multi-option bundle fires the same event; its options arrive as steps.

4. Check if the SDK is available

window.eliteBundle is written by the theme app embed in <head>, but sdk is added later by the deferred bundle script. Do not gate on sdk existing. Theme code that runs early would bail out permanently even on stores where the SDK is enabled. Listen on document and check the SDK inside the handler.

function onBundleReady(callback) {
  const ready = () => {
    const sdk = window.eliteBundle?.sdk?.byob;
    if (sdk) callback(sdk);   // absent means SDK access is off
  };

  // Handle the event having already fired before your script ran
  const sdk = window.eliteBundle?.sdk?.byob;
  if (sdk && !sdk.isLoading && !sdk.error) ready();
  else document.addEventListener('elite:byob:ready', ready, { once: true });
}

onBundleReady((sdk) => {
  console.log(sdk.steps.length);
});

5. Read shop and bundle basics

app is written by the theme app embed, so it is available synchronously:

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

So is byob — but only on a page that actually has a bundle, so guard it:

const bundle = window.eliteBundle.byob;
if (bundle) console.log(bundle.productId);   // Shopify product ID

Its bundleConfig is an internal encoded form and is not a public API. For anything you want to read or render, use sdk.byob — see the Bundle SDK.