Quantity Selector

What it does

Quantity Selector stores the quantity chosen for a product.

That saved quantity is then used 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 Quantity Selector on the product page.

Step 2

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

Step 3

Set Start Qty to the amount you want shown first. Most stores use 1.

Step 4

Set Min Qty and Max Qty to control the allowed range.

Step 5

If you want the quantity number to match your typography, connect Number Font.

Step 6

Style the component with Background, Text / Icons, Border, and Radius.

How it works

Quantity Selector saves the selected number by Product ID.

When the add-to-cart action happens, that saved quantity is used for the cart item.

Common mistakes

Product ID does not match

If the Product ID is different from Add To Cart Hitbox, the chosen quantity will not be used correctly.

Max Qty is left too high

If you want to reflect stock limits, make sure Max Qty is realistic or bound to stock data.

The stepper is placed too far from the add-to-cart action

Keep Quantity Selector visually close to the main product action so it is clear what it controls.

Quick setup checklist

1. Install Cart Engine.

2. Add Quantity Selector to the product page.

3. Match Product ID with Add To Cart Hitbox.

4. Set Start Qty, Min Qty, and Max Qty.

5. Connect Number Font.

6. Style the component and test it.