How can I make swatch options change the main product image when clicked?
PreviousWhy aren’t my swatches showing up on the store?NextCan I display swatches/button/dropdown on the collection page?
Last updated
To enable swatch options to change the main product image, you need to do 2 things:
OPTIS Color 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 Color Swatch will automatically update the product image when the customer clicks on a swatch.

Go to page Configure variants > Find your targeted options > Choose the Display Style as Custom Swatch or 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: OPTIS Color Swatch 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 selecte
=> 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.

Last updated