> ## 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 to change image on hovering?

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

# How to change image on hovering?

### Overview

The **Change Image on Hover** feature allows the **main product image on the Collection Page** to automatically update when customers hover over an option swatch.

This creates a more interactive shopping experience and helps customers preview product variants instantly, without opening the product page or clicking to the variant to see the product image of that variant.

#### Example

A customer views a T-shirt product on the Collection Page:

* Hover over **White** → Product image changes to the white variant.
* Hover over **Black** → Product image updates to the black variant.

No page reload or any click action required.

---
### Where to enable this feature

Follow these steps inside the OPTIS app:

1. Open **OPTIS Color Swatch**
2. Go to [Styling](/swatch/styling/styling-overview)
3. Select the display type:

* **Swatch**
* **Button**
* **Dropdown**
4. Open the **Collection page** tab
5. Enable **Change image on hover**

![Change image on hover enabled in the Styling Collection page tab](https://storage.crisp.chat/users/helpdesk/website/-/b/c/8/0/bc801607bbba6800/24d79bde-239f-4c15-8347-63171a_domeh8.png)

---
### How it works
#### Step 1: Customer hovers over an option

Customers move their cursor over a product variant on the Collection Page.

#### Step 2: Product image updates automatically

The featured image switches to the corresponding variant image.

![Animation of a collection page image changing as the shopper hovers over each swatch](https://storage.crisp.chat/users/helpdesk/website/-/b/8/9/b/b89b7f9f138df000/9c7583cc-d586-4097-8a79-b29027_dce7sy.gif)

Customers can preview available options more quickly and continue shopping without entering the product page.

---
### Supported Display Types

This feature currently works on **Collection Page** with:

✅ **Swatch** ✅ **Button** ✅ **Dropdown**

---
### Troubleshooting

If the product image does not change on hover, please check:

#### 1. Feature is enabled

Verify that **Change image on hover** is turned on in: `Styling → Collection page`

#### 2. Variant images are assigned

Ensure each variant has its own image configured in Shopify.

#### 3. Variant display is active

Confirm the product is using one of the supported display types:

* Swatch
* Button
* Dropdown

#### 4. Testing on Collection Page

This feature only applies to the **Collection Page**, not Product Pages.

---
### Need Help?

If the feature is not working as expected after checking the setup above, please contact our support team and share:

* Product URL
* Screenshot or screen recording
* Description of the expected vs actual behavior

We’ll help investigate further.