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

1. [OPTIS Color Swatch](/swatch)
2. [Frequently Asked Questions](/swatch/frequently-asked-questions)

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

![Animation of the main product image updating when a swatch is clicked](https://storage.crisp.chat/users/helpdesk/website/-/8/c/4/0/8c40bbfdc679a000/b80e8452-0816-4a8d-a549-325028_1alkfm4.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**](/swatch/variant-display/custom-swatch) or [**Auto-image Swatch**](/swatch/variant-display/auto-image-swatch)

![Choosing the Custom Swatch or Auto Image Swatch display style in Configure variants](https://storage.crisp.chat/users/helpdesk/website/-/d/4/f/2/d4f2bd6965115000/39cd3c97-de3d-43a8-b21c-196d75_1iy4cfg.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.

![Custom Swatch using a custom color or uploaded image for each option](https://storage.crisp.chat/users/helpdesk/website/-/9/8/0/f/980f97344e7b8000/1ab36283-78a2-4660-b652-2ac654_9vdna4.gif)

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

![Auto Image Swatch pulling each variant image from the Shopify product](https://storage.crisp.chat/users/helpdesk/website/-/1/4/8/3/14830c2fb50d8200/e5c2895c-5594-400b-ab38-d2157b_plzjs5.gif)