Add a cart and checkout to your site

Load the Storefront SDK in any page, add products to the shop's cart and send the customer to checkout.

Goal: an existing site (static HTML, an SPA, a landing page) sells products from a Bolder shop, with Bolder holding the cart and running the checkout. You need the shop’s subdomain, for example acme for acme.boldershops.com.

Load the SDK

npm install bolder-storefront

import { createStorefront } from 'bolder-storefront'

const storefront = await createStorefront({ shop: 'acme' })

Paste the loader from the SDK quick start with your shop name, then queue your code with Bolder.ready():

<script>
  Bolder.ready(function (storefront) {
    // your code
  })
</script>

Show the cart count

storefront.cart is an event emitter over the shop’s cart session:

storefront.cart.on('updated', () => {
  document.querySelector('#cart-count').textContent = storefront.cart.units
})

Add products

// by URL slug (single-variant products)
storefront.cart.quickAdd('aurora-runner')

// by product and variant id (-1 lets the server pick the default variant)
storefront.cart.addItem(productId, variantId, 1)

To list products or get the variant matrix for a selector, use storefront.products.

Check out

The cart gives you a checkout URL; open it in the embedded slide-out checkout:

import { openCheckout } from 'bolder-storefront'

document.querySelector('#checkout').addEventListener('click', () => {
  storefront.cart.checkout((err, url) => {
    if (err) return
    openCheckout({ checkoutUrl: url })
  })
})

Or use the ready-made cart

The ShoppingBeacon component is a cart button and slide-out with checkout and return detection wired in:

import { createStorefront, ShoppingBeacon } from 'bolder-storefront'

const storefront = await createStorefront({ shop: 'acme' })
storefront.mount(ShoppingBeacon, '#beacon-container')

Cookies and other origins

The cart doesn’t depend on cookies: the SDK keeps the cart id in localStorage and sends it as an X-Cart-Token header, so it works when your site runs on a different domain from the shop. See Cart.

Catalog & search: product lists and live search.
Checkout: hosted redirect mode and return detection.
Use Bolder checkout with your own cart if you already have a cart.

Add a cart and checkout to your site

Or use the ready-made cart

Cookies and other origins

Next