Color swatches

IMPORTANT: COLOR SWATCHES DON’T WORK WITH DROPDOWN MENUS!

Enable color swatches

Click on Variant picker block (under Product information) and in the settings click on "Enable color swatches".

Option on which swatches are displayed

Setting "Option to display swatches on" ("Custom swatch option name” in versions before 1.2.2) refers to which variant group you want the color swatches to be displayed on.

If that field is empty, swatches will be displayed on option whose name contains the word "color".

How to display solid colors instead of variant images

Follow our video tutorial to learn how to display solid colors/gradients on color swatches.

Here is the link to the CSS Gradient tool (opens in a new tab).