> 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**
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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.optis.me/swatch/frequently-asked-questions/how-to-change-image-on-hovering.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.