Frontend
Two ways to build a storefront on Bolder: bring your own frontend with the JS SDK, or write Liquid themes that Bolder hosts for you.
Choose your path
Headless
Your own frontendBuild the storefront yourself, in any framework or plain HTML, and call Bolder for cart, catalog, search, auth and checkout.
Go to the SDK →Hosted themes
Liquid templatesWrite Liquid templates that Bolder renders on its own servers, with a library of ready-made JS modules and components.
Go to themes →Quick start
Install the SDK and react to cart changes in a few lines. No build step? There's a script-tag loader too.
npm install bolder-storefront
import { createStorefront } from 'bolder-storefront'
const storefront = await createStorefront({ shop: 'acme' })
storefront.cart.on('updated', () => {
console.log(storefront.cart.units)
})Packages & references
What you install, and what you look things up in.
- bolder-storefrontnpm — cart, search, auth, components
- bolder-checkoutnpm — embedded checkout
- Liquid referencedrops, filters, tags
- JS modules & componentshosted themes
What's in the SDK
Core API
createStorefront(options), events, mount() and the full config reference.
Cart
Line items, and cart identity across cross-origin, cookie-blocked integrations.
Catalog & Search
Listing and looking up products, and live typeahead search.
Forms & Content
Contact forms and the few content pages headless shops can still show.
Auth & Delivery
Customer login and registration, and the delivery-setup overlay.
Checkout
Embedded slide-out or hosted redirect checkout, and return detection.
Customer Console
Orders, addresses, subscriptions and wishlist as a tree-shakeable entry point.
Components
Mount the bundled and on-demand components from headless code.