Color Picker

The Color Picker field lets the customer choose a color. It comes in two flavours: a free-form picker for any color, or a curated options list with predefined choices and per-option pricing. The selected value can be referenced in pricing formulas and conditional rules.

Label

The Label defines the text displayed above the color control on the product page.Use a clear and descriptive label so customers know what they are choosing.

Example: Frame color

Key (unique ID)

The Key is a unique technical identifier for the field, used internally by the calculator engine.

Important rules:

• Only lowercase letters are allowed

• Numbers and underscores are supported

• No spaces or special characters

Examples: frame_color · print_color

Required field

When Required field is enabled, the customer must select a color before the product can be added to the cart.

Mode

The Color Picker has two modes:

• Picker – the customer can pick any color using a native color input. You set a Default color in hex format (e.g. #000000). The chosen color is informational only and does not contribute a price by itself, since a free-form color is not a meaningful number for pricing. Use this mode when the choice is purely cosmetic.

• Options – the customer chooses from a curated list. Each option has a Label, a Color and a Value (float). You can mark one option as the default. Use this mode when different colors should affect the price (premium colors, special inks, etc.).

Options (Options mode)

In Options mode, each option consists of:

• Option label – customer-facing name (translatable).

• Color – the swatch shown next to the label.

• Value (float) – numeric value used in pricing formulas.

You can reorder options by drag and drop. Mark one option as the default to preselect it.

Using the selection in pricing

In the formula builder the field appears in the Form fields dropdown by its label. Picking it inserts the price of the selected color option (Options mode), or contributes nothing in Picker mode.

Inside Conditional pricing rules you also have access to the position of the selected option, so you can build rules like “when the second color option is chosen, do X”.

💡 Tip:Use Options mode whenever the color affects pricing or you want consistent brand colors. Reserve Picker mode for purely cosmetic personalisation where any color is acceptable.