Scripts

Table of Content

Cart Engine

Core script that powers Cells Cart by storing cart data and syncing every cart-related component.

What it does

Cart Engine installs the cart runtime into your project's <head>.

It creates the shared cart system that Add To Cart Hitbox, Variant Selector, Color Selector, Quantity Selector, Cart Badge, Manual Orders, Auto Mail Orders, and Pro Mail Orders all rely on.

Before you start

You only need to install Cart Engine once per Framer project.

Before installing it, make sure:

  • You are inside the correct Framer project

  • You plan to use one or more Cells Cart components

  • You understand that the cart is stored in the browser using local storage, not in a backend

Steps to install Cart Engine

Step 0

Get a License Key. Click Here to get one.

Step 1

Open the Cells Cart plugin inside your Framer project and activate the key.

Step 2

Find the Cart Engine item in the plugin dashboard.

Step 3

Click Install Cart Engine.

Step 4

The plugin will insert the cart script into your project's <head> using Framer custom code.

Step 5

Publish or preview your project, then test one Cells Cart interaction such as Add To Cart Hitbox or Cart Badge.

Step 6

If you are using product options, connect the same Product ID across Add To Cart Hitbox, Variant Selector, Color Selector, and Quantity Selector.

How it works

Cart Engine creates a shared browser API called. That runtime handles the main cart actions:

  1. get

  1. add

  1. remove

  1. setQty

  1. clear

  1. count

  1. total

  1. on/off


The cart is stored in local storage, which means:

  • it stays available after page reloads in the same browser

  • it works without a cart backend

  • it is specific to the visitor's current browser

When the cart changes, Cart Engine dispatches the update event so other Cells Cart components can update automatically.

What data it stores

Each cart item can include:

  1. id

  1. name

  1. price

  1. image

  1. url

  1. variant

  1. quantity

  1. stock


Cart Engine also creates a stable internal item key from the Product ID and selected variant values. That allows different size or color combinations of the same product to stay as separate cart entries.

Common mistakes

Cart Engine is not installed before other components are used

If Cart Engine is missing, the rest of the Cells Cart components will not be able to read or update cart data correctly.

Cart Engine is installed more than once by accident

You only need one installation per project. Installing it once is enough for all product pages and cart flows in the same Framer project.

Product ID values do not match across connected components

If Add To Cart Hitbox, Variant Selector, Color Selector, or Quantity Selector use different Product ID values, the selected data will not be grouped correctly.

Expecting the cart to sync across different browsers or devices

Because Cart Engine uses local storage, the cart is local to that visitor's browser unless you build your own backend sync on top of it.

Testing only inside the editor without checking live behavior

Because Cart Engine runs as project head code, always test the cart flow in preview or on the published site.

Quick setup checklist

  1. Open the plugin in the correct Framer project.

  2. Click Install Cart Engine once.

  3. Add your Cells Cart components.

  4. Match Product ID values across connected product components.

  5. Test add, quantity, badge, and checkout behavior in preview or live mode.

Manual Orders - Apps Script

Manual Orders - Apps Script

Create a free website with Framer, the website builder loved by startups, designers and agencies.