> ## Documentation Index
> Fetch the complete documentation index at: https://frammerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Cart runtime

> How Frammerce keeps the cart in sync across every page on your Framer site, automatically.

The cart runtime is the script Frammerce installs into your Framer project to keep the cart state in sync across pages. You don't write it, you don't copy/paste it. The plugin handles install, update, and removal.

## What it does

The runtime:

* **Holds cart state** in a single in-memory store shared across all Frammerce components on a page
* **Persists state** in `localStorage` so the cart survives page reloads and visits
* **Talks to Shopify's Storefront API** for cart operations (add line, update quantity, remove line, fetch totals)
* **Hands off to checkout** when the buyer taps the Checkout button - opens Shopify's hosted checkout in the same tab

## How it's installed

The runtime is injected into your project's `headStart` via Framer's `setCustomCode` API. The script tag carries a JSON config:

```html theme={null}
<script id="frammerce-cart-config" type="application/json">
  {"storeDomain":"...","accessToken":"...","apiVersion":"2024-10","plan":"basic"}
</script>
```

Install happens automatically:

* The first time you insert a Frammerce component
* Whenever the credentials or plan change
* On every project open (re-validates the installed config)

<Note>
  You never edit this script by hand. If you need to remove the runtime entirely, **Disconnect Store** from the Settings page.
</Note>

<Frame>
  <img src="https://mintcdn.com/framergeeks-5082ee09/N10R_Z8p3wsemciR/images/cart-published-site.png?fit=max&auto=format&n=N10R_Z8p3wsemciR&q=85&s=e20711371eaf7c41345e1d4e5a5698ec" alt="Cart drawer working on a live published Framer site" width="1150" height="897" data-path="images/cart-published-site.png" />
</Frame>

## How components use it

Every Frammerce cart component subscribes to the shared store. That means:

* Adding an item from the product page updates the cart badge in the navbar immediately
* The cart drawer reflects the latest line items across every page
* Subtotals and item counts stay consistent

No props need to be wired between components. They find each other through the runtime.

## API version

Frammerce pins to Shopify Storefront API version **`2024-10`** by default. The plugin manages version bumps in lockstep with component updates, so you don't have to.

## What ships with your published site

When you publish your Framer project, the cart runtime ships in the HTML automatically. Your published site:

* Loads the config script on every page
* Initialises the cart store from `localStorage`
* Wires up any Frammerce components on the page

You don't need to configure hosting, DNS, or anything else - it just works as part of the Framer site.

## Checkout gating

The runtime knows which plan is active on this project and uses that to gate the moment of order.

* **Basic (free)** - cart works fully. Add to cart, update quantities, view subtotal, open the cart drawer. Tapping **Checkout** or **Buy Now** on the published site shows an "Upgrade to take orders" prompt instead of creating a real Shopify checkout.
* **Pro / Scale** - checkout and Buy Now create a real Shopify checkout URL and redirect the buyer.

Inside the Framer canvas, everything works on every tier - so you can design and click around your full storefront on Basic without paying anything. The gate only fires on the **published** site.

## "Powered by Frammerce" badge

On the **Basic** plan, every published page renders a small "Powered by Frammerce" badge in the body. This funds the free tier.

Upgrade to **Pro** or **Scale** to drop the badge. The plugin automatically removes the script on the next project open after the upgrade.

<Card title="See the plan tiers" icon="award" href="/docs/faq">
  What changes between Free, Pro, and Scale.
</Card>