How to show Variants as Image or Color Swatches?

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.