Variant options and swatches

When a product's variants have options, such as a Colour and a Size, the product page shows one choice per option instead of one list of every variant. Shoppers pick a colour, then a size, and the price, stock and pictures change to that variant.

This works on its own: give each variant its options in the product editor's Variants tab (for example Colour: Red and Size: M), and the product page shows them.

What shoppers see

• One group per option, in the order your variants list them. Values show as buttons; an option with more than 7 values shows as a dropdown.
• Sold-out values are struck through and cannot be picked.
• Values that do not go with another choice (Blue exists, but not in size M) are shown with a dashed border. Picking one keeps the choices that still fit and clears the others.
• An option with only one value is already picked.
• Once every option is picked, the variant's SKU shows in small print under the price, and it changes with the choice. Products without SKUs show nothing there.
• The link changes as shoppers pick, for example …/eos-hoodie?color=blue&size=m, so a shared or bookmarked link opens the same combination. Search engines keep indexing the plain product page.

The picker needs every variant to have options, with no two variants alike. If that is not the case, the product page keeps the single list of variants, so every variant can still be bought.

Below the buy box, All variants lists every combination with its SKU and price, and highlights the chosen one. It starts folded, so a long list does not push the rest of the page down; shoppers open it with a click.

Choosing buttons, a dropdown or swatches

Open the product and go to the Option display tab. It lists the options your variants use. For each option choose:

• Automatic: buttons, or a dropdown for more than 7 values.
• Buttons or Dropdown: always that.
• Swatches: a round colour or picture per value.

For swatches, give each value a Colour, an Image, or both (the image is shown when both are set). A value with neither shows as a button with its name. Images can be any shape; they are cropped to a circle.

Save the product. The settings belong to that product.

Good to know

• Options match by exact name and value. "Colour" and "colour" are two different options, and renaming a value in the Variants tab drops its swatch; set it again for the new name.
• Only active variants count.
• The option names can also be used as catalog filters.