> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.optis.me/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/2/2/4/2/22429817467a0000/gif-q1-optis-swatch-1920-x-850_1skdktd.gif)
###### ✅ 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***

![](https://storage.crisp.chat/users/helpdesk/website/-/2/2/4/2/22429817467a0000/gif-q1-optis-swatch-1920-x-850_1lo85fb.gif)
### 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/2/2/4/2/22429817467a0000/gif-q1-optis-swatch-1920-x-850_x5qkeh.gif)
###### b. Auto Image Swatch

What is it: OPTIS 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 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/2/2/4/2/22429817467a0000/gif-q1-optis-swatch-1920-x-850_1n4n2wd.gif)