Swatch

Written By Floris de Vries

Last updated 2 days ago

Swatch

The Swatch field allows customers to select one option visually using color swatches. It works like a single-choice selector (similar to radio buttons), but with a strong visual focus. Each swatch option has its own numeric value, which can be used directly in price calculations or referenced in later steps of the calculator. Swatches are ideal for colors, materials, finishes, or styles where customers benefit from visual selection.

Label

The Label defines the text displayed above the swatch options on the product page.
Use a clear and descriptive label so customers know what they are selecting.

Example:
Choose a color

Key (unique ID)

The Key is a unique technical identifier for the swatch field.
It is used by the calculator engine and can be referenced in calculation formulas or conditional logic.

Important rules:

  • Only lowercase letters are allowed

  • Numbers and underscores are supported

  • No spaces or special characters

Examples:
color_choice
finish_swatch

Required field

When Required field is enabled, the customer must select a swatch option before the product can be added to the cart.
Use this option when the selection is mandatory for pricing or fulfillment.

Swatch options (color and value)

Each swatch option consists of a Label, a Value (float), and a Color.

Option label

The Option label is the name of the swatch option.
This text is used internally and may also appear in the customer-facing UI (depending on your theme/layout).

Example:
Red

Value (float)

The Value (float) is the numeric value linked to the swatch option.
This value can be used to:

  • Add a fixed amount to the price

  • Act as a multiplier

  • Be referenced in later calculation steps

Example use cases:

  • 1 for no price change

  • 1.2 as a price multiplier

  • 15 as an additional cost

Color

The Color setting defines the visual color displayed in the swatch.
Choose a color that matches the option label, so customers can easily recognize their selection.

Add / Remove options

  • Use Add to create a new swatch option

  • Use Remove to delete an existing swatch option

All changes are applied immediately and will be reflected in the calculator logic.

💡 Tip:
Use Swatches when the choice is primarily visual (e.g. product colors). If you have long text descriptions or many options, a dropdown may be more suitable.