Add To Cart Hitbox

What it does

Add To Cart Hitbox makes the parent frame clickable and sends the product into Cells Cart.

It is invisible on the live site and automatically fills the parent frame.

Before you start

Make sure Cart Engine is installed.

You should have the product data ready for:

• Product ID

• Product Name

• Price

• Product Image

• Optional Stock

Steps to set up the component

Step 1

Drop Add To Cart Hitbox inside the frame you want customers to click.

Step 2

Set Product ID to a unique product value. If you use CMS, bind it to your slug or product ID field.

Step 3

Bind Product Name, Price, and Product Image.

Step 4

If you want stock limiting, turn on Limit Stock and bind Stock.

Step 5

If you are using Variant Selector, Color Selector, or Quantity Selector, make sure they all use the same Product ID.

How it works

When the customer clicks the parent frame, the component sends the product data, selected variants, selected quantity, and optional stock into the cart.

Common mistakes

Cart Engine is not installed

Without Cart Engine, the hitbox cannot add products to the cart.

Product ID does not match across components

If Variant Selector, Color Selector, or Quantity Selector use a different Product ID, their selections will not be attached correctly.

Important fields are not bound

If Product Name, Price, or Product Image are missing, the cart data can become incomplete.

Quick setup checklist

1. Install Cart Engine.

2. Drop Add To Cart Hitbox inside the clickable product frame.

3. Bind Product ID, Product Name, Price, and Product Image.

4. Turn on Limit Stock only if needed.

5. Match the same Product ID across all related Cells Cart components.