Color Selector

What it does

Color Selector saves the selected color label for a product.

That selection is then included when the product is added to Cells Cart.

Before you start

Make sure Cart Engine is installed.

You should also already have Add To Cart Hitbox on the same product.

Steps to set up the component

Step 1

Place Color Selector on the product page.

Step 2

Set Product ID to the same value used in Add To Cart Hitbox.

Step 3

Set Color Label to the label you want stored in the cart, usually Color.

Step 4

Enter Colors in bracket format like

[Black #0f0f0f] [White #ffffff] [Red #FF4444]

[Black #0f0f0f] [White #ffffff] [Red #FF4444]

[Black #0f0f0f] [White #ffffff] [Red #FF4444]

Step 5

If needed, set Default so one swatch is selected on page load.

Step 6

Style the selector using Gap, Radius, and Active Ring.

How it works

When a customer clicks a swatch, Color Selector saves the color label for that Product ID.

The stored label, not the hex code, is what gets included with the order data.

Common mistakes

Product ID does not match

If the Product ID is different from Add To Cart Hitbox, the selected color will not be attached to the right product.

Colors are written in the wrong format

Each entry should include both a label and a hex code, like [Blue #3456FF].

Only hex codes are used

Always include readable labels so the final order data is easy to understand.

Quick setup checklist

1. Install Cart Engine.

2. Add Color Selector to the product page.

3. Match Product ID with Add To Cart Hitbox.

4. Set Color Label.

5. Enter Colors in bracket format.

6. Adjust Gap, Radius, and Active Ring.