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

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

  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 a variant option name

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

Create swatch thumbnails