Swatch

Swatch

The Swatch field allows customers to select one option visually using color and/or image 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, used internally by the calculator engine.

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

Each swatch option consists of a Label, a Value (float), and a visual: either a Color or an Image (or both).

Option label

The Option label is the name of the swatch option, used internally and as the visible label depending on the design settings.

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 fills the swatch with a flat color. Choose a color that matches the option label so customers can easily recognize their selection.

Image

You can upload an Image to use a texture, pattern or material photo instead of (or on top of) the color fill. Accepted formats are JPEG, PNG, WebP and GIF. Use the built-in crop tool to align the image with the swatch shape.

If both a color and an image are set, the image is shown on top of the color fill (useful when the image has transparency).

Default option

You can mark one option as the default. That option is preselected when the product page loads. Leave it unset to start with no 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.

Visual styling

The shape (square / portrait / landscape), size, border and active selection icon of swatches are controlled globally for all swatch fields under Step 3: Customize design → Swatches. Label position (beside / below / hidden) is also configured there.

Using the selection in pricing

In the formula builder the swatch field appears in the Form fields dropdown by its label, and using it inserts the numeric value of the selected option into the formula.

Inside Conditional pricing rules you also have access to the position of the selected option (1st, 2nd, 3rd…), so you can write rules that depend on which swatch was chosen even when several options share the same numeric value.

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