Variant Selector

What it does

Variant Selector stores a selected option for a product, such as size or material.

That value is saved and picked up when the customer clicks Add To Cart Hitbox.

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 Variant Selector on the product page.

Step 2

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

Step 3

Set Variant Label to the name of the option you are collecting, such as Size or Material.

Step 4

Enter Options in bracket format like:

[Option 1] [Option 2] [Option 3]...

[S] [M] [L] [XL] // for apparel sizes
[40] [42] [44] [46] // for number sizing

[Option 1] [Option 2] [Option 3]...

[S] [M] [L] [XL] // for apparel sizes
[40] [42] [44] [46] // for number sizing

[Option 1] [Option 2] [Option 3]...

[S] [M] [L] [XL] // for apparel sizes
[40] [42] [44] [46] // for number sizing

Step 5

If needed, set Default so one option is already selected.

Step 6

Style the pills with Active BG, Active Text, Inactive BG, Inactive Text, Border, Gap, Radius, X Padding, and Y Padding.

Step 7

Connect Option Font if you want the component to inherit your typography.

How it works

Variant Selector writes the chosen option using the current Product ID and Variant Label.

That saved value is then attached to the product when the add-to-cart action happens.

Common mistakes

Product ID does not match

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

Options are not written in bracket format

Use a format like

[Option 1] [Option 2] [Option 3]...

[S] [M] [L] [XL] // for apparel sizes
[40] [42] [44] [46] // for number sizing

[Option 1] [Option 2] [Option 3]...

[S] [M] [L] [XL] // for apparel sizes
[40] [42] [44] [46] // for number sizing

[Option 1] [Option 2] [Option 3]...

[S] [M] [L] [XL] // for apparel sizes
[40] [42] [44] [46] // for number sizing

so the component can read the choices correctly.

The same Variant Label is used twice

If two selectors use the same Variant Label, one selected value can overwrite the other.

Quick setup checklist

1. Install Cart Engine.

2. Add Variant Selector to the product page.

3. Match Product ID with Add To Cart Hitbox.

4. Set Variant Label.

5. Enter Options in bracket format.

6. Style the pills and connect Option Font if needed.