Why do my colors show up as white?

This happens when you use custom names like 'Passion Red' and the theme can't find an associated HEX code. You should use standard names (Red) or configure HEX metafields.

Do I need an app for swatches?

Most modern Shopify themes (like Dawn) already include this feature for free. You just need to enable it in the customizer.

How to Add Color Variants with Images in Shopify

It's not enough to just write "Red" or "Blue." Your customers want to see the actual color or specific design before buying. Here you'll learn how to configure the famous "Swatches" (color circles) or image selectors in Shopify.

Tutorial: Connect variants and metafields for perfect selectors

What Are Color Swatches and Why Use Them?

Swatches are small circles or squares that show a visual sample of the product's color or pattern, instead of just its name in text. They improve the user experience by allowing customers to quickly visualize all available options without having to read a dropdown list.

1. Color Circles (Swatches)

Ideal for solid colors.

✓ Looks clean and minimalist.
✓ Uses HEX codes or standard names.
ℹ Requires metafield configuration.

2. Image Variants

Ideal for patterns or designs.

✓ Shows the actual product in thumbnail.
✓ Perfect if the "Red" has a pattern.
✓ Easier to configure (no code).

Are your products not selling?

Poor product presentation can kill conversion. Diagnose your store for free.

Free Evaluation →

Step by Step: Visual Configuration

1 Verify Your Variants

Make sure your product has an option named exactly Color (or Colour). Shopify and most themes automatically detect this name to activate special selectors.

2 Customize the Theme

Go to Online Store > Customize. Navigate to a product page and click on the "Variant Picker" block.

Here look for options like "Swatch style" or "Selector type." Change it from "Dropdown" (drop-down list) to "Pill" (buttons) or "Swatch" (color circles) depending on what your theme allows.

3 Image vs Color Option

If you choose to use images (recommended for patterns):

Make sure you've assigned a photo to each variant in the product page.
In the customizer, look for the "Use variant images for swatches" option or similar.

Not seeing the correct color?

If you use solid color "Swatches" and "Passion Red" shows up white, it's because the system doesn't recognize that name. You need to go to Settings > Custom Data > Variants and create/edit the color category to assign specific HEX codes to your custom names.

Frequently Asked Questions

Why do my colors show up white?

This is common with creative names (e.g., "Midnight Blue"). The browser doesn't know what color that is. You must use standard HTML names (Blue, Red) or configure HEX metafields.

Does it work on all themes?

Most modern themes (OS 2.0) like Dawn support this natively. If you use a very old theme, you might need an app or custom code.

Remember: If you change variant names or reorder options, always verify that photos remain correctly assigned.