The Variant Swatches feature lets you display product variants visually using images or colors instead of Shopify’s default dropdown or option list. This makes it easier for customers to compare and select product options.
There are two ways to display variant swatches:
Image Swatches — display a product or variant image.
Color Swatches — display a color swatch using Shopify Categories and Color metaobjects.
1. Show variants as Image Swatches
Image Swatches use the images assigned to individual product variants.
Step 1: Assign images to variants
Go to Products and select a product.
In the Variants section, assign the correct image to each variant.
Make sure each color or option is linked to its corresponding variant image.
Step 2: Enable Image Swatches
In the theme editor: Product page → Information → Variant picker
Then:
Set Swatch selector style to Swatch.
If you are using color swatches with variant images, enable Show variant image below.
2. . Color Swatches
Color Swatches use Shopify Categories and Color metaobjects to define and display product colors.
Step 1: Configure the product
Go to Products and select a product.
Assign the appropriate Category to the product.
Connect the product's color option to the corresponding Category metafield.
Define the available colors using Color metaobjects.
Step 2: Choose the color display style
In the theme editor: Product page → Information → Variant picker
Under Color selector type, choose one of the following:
Block with swatch
Swatch
Dropdown with swatch
FAQ:
1. Why doesn’t my option show swatches if it’s not named “Color”?
The theme detects Color Swatches based on the option name (color, colors, colour, couleur).
If you use other names such as Farbe, Couleur, Pattern, or similar, the swatches won’t display.
How to fix:
Go to ... → Edit theme default content → search for “Swatch” → add the option names you’re using.
