> 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/dev-docs.md).

# Developer SDK

Elite Bundle Builder developer SDK: build a custom Shopify bundle UI with live bundle data, cart state, actions and events from window\.eliteBundle.sdk.

The SDK lets a developer build a fully custom storefront UI for bundles instead of the built-in layouts. When SDK access is enabled, the app exposes `window.eliteBundle.sdk` on bundle pages with live bundle data, cart state and actions, so you can render your own product cards, step navigation, cart drawer or price display and still drive the app's add-to-cart and checkout logic.

{% hint style="info" %}
Build-your-own and multi-option bundles use **one** SDK. A multi-option bundle is a bundle whose every step holds exactly one item, so the same `steps`, `cart` and `checkout` describe both. Pre-curated bundles have no SDK state: Shopify renders and sells them as a normal product.
{% endhint %}

## What you can build

* A build-your-own bundle UI with your own cards, step navigation and cart
* A multi-option picker with your own swatches, dropdowns or cards
* A bundle experience that matches your theme's design system exactly

The built-in UI keeps working. The SDK is additive: use one piece of it (just `addToCart`, say) or replace the whole interface.

## How it works

The theme app embed writes `window.eliteBundle` on the page, and the bundle script fills in the live SDK once it loads.

| Part       | What it holds                                                           |
| ---------- | ----------------------------------------------------------------------- |
| `app`      | Shop-level values: money format, currency, locale, Storefront API token |
| `byob`     | The bundle on this page: its product ID and stored configuration        |
| `sdk.byob` | Live bundle state and actions, for both bundle types                    |

## Prerequisites

* Elite Bundle Builder installed and set up on a Shopify store
* SDK access enabled in **Settings → Developer SDK** (asks for a developer email)
* JavaScript or TypeScript

## Documentation

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Getting started</strong></td><td>Enable access, wait for the ready event, read your first bundle state.</td><td><a href="/developer-sdk/getting-started.md">Getting started with the SDK</a></td></tr><tr><td><strong>Global object</strong></td><td><code>window.eliteBundle</code>: app, byob, on and off.</td><td><a href="/reference/globals.md">Global object</a></td></tr><tr><td><strong>Bundle SDK</strong></td><td>Steps, cart, discount state and actions.</td><td><a href="/reference/sdk.md">Bundle SDK</a></td></tr><tr><td><strong>Events</strong></td><td>ready, cart-change, checkout-start, checkout-success, checkout-error, error, plus upsell view and click.</td><td><a href="/reference/events.md">Events</a></td></tr><tr><td><strong>Custom bundle UI</strong></td><td>Replace the built-in interface end to end.</td><td><a href="/guides/custom-ui.md">Custom bundle UI</a></td></tr><tr><td><strong>Using with React</strong></td><td>Hooks around the SDK for a React storefront.</td><td><a href="/guides/react.md">Using with React</a></td></tr></tbody></table>


---

# 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/dev-docs.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.