> 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:

{% stepper %}
{% step %}

### Go to Styling

In **OPTIS Color Swatch**, go to [**Styling**](/swatch/styling/styling-overview.md).

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2F5BXPcLGTrZtuQJJ3fn37%2FScreenshot%20(26).png?alt=media&amp;token=cf552f92-4416-4ce8-b40b-64cff57b1ece" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Select the display type

Choose one of these display types:

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

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2F7QPojblXbEI88X6Tinho%2FScreenshot%20(28).png?alt=media&amp;token=9f303ae8-0076-436c-8e14-ac18b14d4b45" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Open the Collection page tab

Switch to the **Collection page** tab.

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2F3fpmIu31V4MGWH8gVoUa%2FScreenshot%20(29).png?alt=media&amp;token=55e164e8-edc1-4745-8cb0-1d20b33083c7" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Enable Change image on hover

Turn on **Change image on hover**.

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2FqnYcEr9S2PLcZGPjILfc%2FScreenshot%20(30).png?alt=media&amp;token=03b77fcd-c529-4ccb-9552-ee27e74675a9" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click Save to apply changes

Click **Save** to apply the setting to your store.

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fvj8fKnS4UmCb9ohmT3yW%2FScreenshot%20(31).png?alt=media&amp;token=439970c5-5b02-40d8-a856-584e0cc513a2" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

***

## How it works

{% stepper %}
{% step %}

### Customer hovers over an option

Customers move their cursor over a product variant on the Collection Page.
{% endstep %}

{% step %}

### Product image updates automatically

The featured image switches to the corresponding variant image.

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fgit-blob-ce4baaabef5ac531dc1964a0d95007a16e8bfdc6%2Fchange-image-on-hover-demo.gif?alt=media" 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.
{% endstep %}
{% endstepper %}

***

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