> For the complete documentation index, see [llms.txt](https://docs.elitebundleapp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.elitebundleapp.com/developer-sdk/getting-started.md).

# 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.

{% stepper %}
{% step %}
Open the Elite Bundle Builder app in your Shopify admin.
{% endstep %}

{% step %}
Go to **Settings → Developer SDK**.
{% endstep %}

{% step %}
Click **Enable SDK access**, enter your developer email, and confirm.
{% endstep %}
{% endstepper %}

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:

```js
window.eliteBundle
```

You should see an object like:

```js
{
  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`.

{% hint style="info" %}
`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.
{% endhint %}

## 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:

```js
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

{% hint style="warning" %}
`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.
{% endhint %}

```js
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:

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

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

```js
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](/reference/sdk.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.elitebundleapp.com/developer-sdk/getting-started.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
