> For the complete documentation index, see [llms.txt](https://docs.optis.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.optis.me/swatch/frequently-asked-questions/how-to-change-image-on-hovering.md).

# 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.md)
3. Select the display type:
   * **Swatch**
   * **Button**
   * **Dropdown**
4. Open the **Collection page** tab
5. Enable **Change image on hover**

<figure><img src="/files/7XzMHZ3j9WJNdx1voX1U" alt="Change image on hover enabled in the Styling Collection page tab"><figcaption></figcaption></figure>

***

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

<figure><img src="/files/ozLZUoRiScMuo07GOGDd" alt="Animation of a collection page image changing as the shopper hovers over each swatch"><figcaption></figcaption></figure>

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.