The Variant Swatches feature allows product variants (images or colors) to be displayed visually on the product page, helping customers compare and select options faster than using Shopify’s default dropdown or block list.
Here are some available options to display variant images or colors that you can refer to.
1. Show variants as Image Swatches
Step 1: Assign images to variants
Go to Products → select a product.
In the Variants section, make sure each variant is assigned the correct image and that every color/option is linked to its corresponding image.
Step 2: Configure in the Theme Editor
In the Product page → Information → Variant picker, select the color option and set Color selector type to Variant image.
2. Show Color Swatches
This method uses Shopify Categories + Metaobjects
Step 1: Configure in Shopify Products
Go to Products → select a product
Assign a Category to the product
Connect the color option to the corresponding Category metafield
Define colors in Color metaobjects
Step 2: Select the color display style in the theme
Go to Product page → Information → Variant picker
In Color selector type, choose one of the following options:
Block with color swatch
Color swatch
Color swatch rectangle
Dropdown with color 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.
If you would like our team to check your setup, please contact us on Live chat.
