How to change image on hovering?

  1. OPTIS Color Swatch
  2. 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
  3. Select the display type:


  • Swatch
  • Button
  • Dropdown
  1. Open the Collection page tab
  2. Enable Change image on hover


Change image on hover enabled in the Styling Collection page tab


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


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.

Updated on: 25/09/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!