--- title: Overview description: Embed cart and other storefront functionality into any page — a custom HTML site, an SPA, a landing page — without building a full Liquid theme. --- Bolder Headless lets you embed cart and other storefront functionality into any page — a custom HTML site, a framework-based SPA, a landing page — without building a full Liquid theme. There are two integration paths: | Path | Use when… | |------|-----------| | **Script tag** (`storefront.umd.cjs`) | No build tooling; drop a ` ``` The loader's positional arguments (after `window`/`document`/`'script'`) are `shop`, `src` (the SDK URL), and an optional 6th `apiBase` override. They end up as `data-shop`/`data-api-base` on the dynamically-created script tag, which is what `createStorefront()` reads internally to auto-init. You never write those attributes by hand. If you need to initialise manually with options the loader doesn't expose, skip the loader and call `createStorefront()` yourself once the script has loaded — see [createStorefront(options)](/frontend/sdk/core#createstorefrontoptions). **npm package** ```bash npm install bolder-storefront ``` ```js import { createStorefront } from 'bolder-storefront' createStorefront({ shop: 'acme' }).then(function(storefront) { storefront.cart.on('updated', function() { document.querySelector('#cart-count').textContent = storefront.cart.units }) }) ``` ## Pre-load queue pattern The loader snippet above already implements this: `Bolder.ready(fn)` pushes `fn` onto `window.Bolder.q` if the SDK hasn't finished loading yet, and calls `fn` immediately once it has. You can call `Bolder.ready()` as many times as you like, from as many separate ` ``` There's no manual queue array to manage — don't push onto `window.Bolder.q` directly, always go through `Bolder.ready()`. **[Core API](/frontend/sdk/core)** createStorefront(options), Emitter, and the full config reference. **[Cart](/frontend/sdk/cart)** Adding items, cross-origin cart identity.