Swatches

Color swatches are tiny, clickable buttons on your products. Each swatch links to one of your color variants.

Here's how Context's color swatches feature works:

STEPS

1. It looks for all products with a special variant option for swatches.

2. It tries to match the defined color (like Heather Gray) with an existing swatch image in your Files admin area (called heather-gray.png).

3. It displays the swatch images as color swatch buttons.

This article goes deeper into what all of that means, and how you can add any swatch that you want.

Set up variant option names

Setting color swatches up requires some setup and planning. Follow the steps here for success:

Note: Multiple swatch option names are available in Ira 3.2.0 or later. Single options are available in 3.0.0 and up

Create swatch thumbnails

• Product pages

• Featured product

• Collection pages