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

3. Select the display type:

   • Swatch

   • Button

   • Dropdown

4. Open the Collection page tab

5. Enable Change image on hover

---

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.

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.