Getting Started

1. Enable SDK access

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

Open the Elite Bundle Builder app in your Shopify admin
Go to Settings → Developer SDK
Click Enable SDK access and enter your developer email
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,
    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.

PreviousOverview

NextGlobal Object

Last updated 23 days ago

Was this helpful?