Color swatches

Color swatches turns product option values, such as colors, into swatches on product cards and product pages.

How to find it

In the Theme Editor, open Theme settings, then select Color swatches. Enable color swatches and Maximum swatches to show are in Product listing.

Settings

View the settings guide .

Setting	Options	Description
Swatch type	• Variant image • Color	Variant image fills each swatch with the variant's featured image. Color fills it with the option's color value. This applies to the swatches shoppers pick on product pages and product cards.
Swatch shape	• Round • Square	Round or square swatches in the product variant pickers and in the product filters.
Color swatch trigger		Product option names that render as color swatches. Separate them with commas, e.g. Color, Shade. Capitalization is ignored, so add the names your store uses.
Custom colors		Valid format: Muesli: #ddd5bc or Muesli: image.png, separated by commas.

Color swatch trigger lists the option names that become swatches, separated by commas. Capitalization is ignored.

Swatch type sets the source of the swatch: Variant image uses the image of each variant, and Color uses a color.

Swatch shape sets Round or Square swatches.

Custom colors sets the color or image for option values. Follow the format in the help text, such as Muesli: #ddd5bc, separated by commas.

Notes

Only option names listed in Color swatch trigger show as swatches.

Variant image uses the variant's image, or the product's featured image when the variant has none. Custom colors apply only when Swatch type is Color.