Option Types & Values

Options power the variant picker, the row of chips or color squares on a product page that jumps between versions of the same product: a fridge in graphite or white, a hood in 60 or 90 cm. Understanding one idea makes everything else fall into place:

Every variant is its own product. The graphite fridge and the white fridge are two separate documents with their own slugs, images, prices and content. Options do not create variants, they describe how existing sibling products differ so the site can link between them.

The pieces

Four things work together, all under Catalog:

Option Types

An option type is the axis itself. It has a translated title, which the picker shows as the caption above the row, and a display mode that decides how its values render:

That is the whole definition. Like attributes, each option type has a Values tab where its values live and where you create new ones.

Option Values

A value belongs to exactly one option type and carries a translated label. Values of swatch types also get a swatch color, a hex code like #1A1A1A that paints the square in the picker. The label is still required, it becomes the accessible name for screen readers.

Labels are translated once, centrally, exactly like attribute values. Every product picking Graphite inherits the same word in every locale.

Product Groups

A group is an internal binder, its title never appears on the site. It does two jobs:

1. Holds the siblings together. Products pointing at the same group appear in each other's picker.
2. Declares the axes. The group lists which option types its products must fill in, and their order here is the order of the rows on the product page.

A two-axis group like Color and Capacity means every product in it must pick exactly one color and exactly one capacity.

How the picker behaves

For the product you are viewing, the site walks the group's axes in order and builds a row per axis. Three rules decide what you see:

• Only used values appear. A value shows up only if some published sibling actually carries it. Defining 90 cm under Size changes nothing until a 90 cm product exists and is published.
• Switching keeps the rest fixed. Clicking White on the graphite 344 l fridge looks for the sibling that is White and still 344 l, then links there. Each click changes one axis.
• Missing combinations stay unclickable. If White exists only as 500 l, the White square on the 344 l page has nowhere to go and renders disabled. The combination does not error, it just is not offered.

Drafted or unpublished siblings drop out of the picker entirely, so unpublishing a variant can quietly disable values for the rest of the group.

Guardrails

The system protects itself from the common mistakes:

• An option type or value that products still use cannot be deleted.
• An axis cannot be removed from a group while any product in the group still picks a value on it.
• If a product's picked values stop matching its group's axes, the stray values are dropped on save instead of lingering invisibly.
• The dashboard's Variant deadlock check tool scans every group and reports combinations that lead nowhere, worth running after bigger catalog changes.

Setting up variants, start to finish

Say the TCE fridge now comes in two colors and two capacities.

1. Option types first. Create Color (display: swatch) and Capacity (display: chip) under Catalog → Option Types, if they do not exist yet.
2. Values on their tabs. Under Color create Graphite #4A4A4A and White #F5F5F5. Under Capacity create 344 l and 500 l.
3. The group. Create a product group named TCE fridges and add Color and Capacity as its option types, in the order the rows should stack on the page.
4. Bind the products. On each fridge's Details tab under Variants, pick the group, then exactly one value per axis: the first fridge is Graphite + 344 l, the next White + 344 l, and so on.

Publish the siblings and the picker assembles itself. Adding a third color later is steps 2 and 4 only, the axis already exists.