How can I make swatch options change the main product image when clicked?

To enable swatch options to change the main product image, you need to do 2 things:

✅ Step 1: Make sure you’re using Shopify’s built-in product variants

OPTIS Swatch only works with native Shopify variants – meaning the product options (like Color or Size) must be created directly in your Shopify Products admin, not from a custom option app.
When each variant has its own image assigned in Shopify Products, OPTIS Swatch will automatically update the product image when the customer clicks on a swatch.

✅ Step 2: Set the Display Style to Custom Swatch or Auto Image Swatch

Go to page Configure variants > Find your targeted options > Choose the Display Style as Custom Swatch or Auto-image Swatch

What are Custom Swatch & Auto-image swatch?

a. Custom Swatch:

What is it: You can either assign a custom color or upload a custom image (e.g., texture, icon, or even a GIF) for each option.

Works best for: When you want full control over how each swatch appears – especially in cases where:

• You want to override the default variant image set in your Shopify product admin.

• You want to display a different visual cue (e.g., zoomed-in texture, logo, or animated image) instead of or in addition to the variant image.

• You prefer to visually differentiate options using custom visuals, whether it's a solid color or a unique uploaded image/GIF.

=> This setup is ideal for merchants who want to separate the swatch appearance from the product variant image.

b. Auto Image Swatch

What is it: Swatch Lab automatically pulls the image from each Shopify variant and displays it as the option swatch.

Works best for:
Quick and efficient setup. No manual upload needed – just assign a variant image in your Shopify admin, and it will:

• Show up as the swatch preview.

• Also control the main product image when selected.

=> This style is perfect if your variant images are already set up and you want a fast, hands-off solution that stays in sync with your product data.

Updated on: 13/06/2025