---
title: Add a cart and checkout to your site
description: 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`.

1. **Load the SDK**

    **npm**

    ```bash
    npm install bolder-storefront
    ```

    ```js
    import { createStorefront } from 'bolder-storefront'

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

    **Script tag**

    Paste the loader from the [SDK quick start](/frontend/sdk#quick-start) with your shop name, then queue your code with `Bolder.ready()`:

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

2. **Show the cart count**

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

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

3. **Add products**

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

4. **Check out**

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

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

```js
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](/frontend/sdk/cart#cross-origin-cart-identity).

## Next

- [Catalog & search](/frontend/sdk/catalog): product lists and live search.
- [Checkout](/frontend/sdk/checkout): hosted redirect mode and return detection.
- [Use Bolder checkout with your own cart](/guides/checkout-only) if you already have a cart.