Hello, I am using the Spotlight theme and trying to get an image to change while I hover with the cursor on the desktop and while I tap or touch the image while scrolling on a phone or tablet. I want to effect to work on the collection images and the product images as well. I have searched for codes and I’ve tried a few but they don’t seem to work. I don’t know if I’m not incorporating the codes correctly into the theme. Any help would be greatly appreciated. Thanks.
Topic summary
A user seeks to implement hover-triggered image changes on both desktop (cursor hover) and mobile/tablet (touch) for collection and product images in the Shopify Spotlight theme. Despite searching for and testing various code solutions, they haven’t successfully integrated the functionality.
Initial Troubleshooting:
- Support representatives requested the store URL and suggested enabling Shopify’s built-in “Show Second Image on Hover” feature
- Step-by-step instructions were provided for accessing this setting through Shopify Admin → Online Store → Customize → Theme Settings → Advanced Settings → Product Grid
Current Issue:
The user discovered that Spotlight’s native hover option only works in the “Featured Collection” section, not on regular collection pages. They’re now asking whether there’s a way to extend this hover functionality to standard collection product displays.
The discussion remains open, awaiting guidance on customizing regular collection pages to support the hover effect.
1 Like
@ll08
Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you with a solution here.
Okay, cool. Here’s my website: ELunaBrand.com. Thanks for your help.
1 Like
@ll08 thanks for URL can you please enable theme setting on hover change image please
Sorry, I don’t understand. What do you mean by “enable theme setting on hover change image”?
@ll08 i mean Shopify to by default option show image on hover just enable
How to enable the second image on hover feature
Go to your Shopify Admin and select Online Store.
Select your Debutify Shopify theme, and click on Customize.
Go to Theme Settings.
Click on advanced settings.
Scroll to the Product grid to find the second image on hover and check the box to enable or uncheck to disable.
Hi @ll08
To enable image change on hover feature, here are the steps -
-
Go to Shopify store admin
-
Select online store from left menu and click on customize button for the theme
-
Select the Featured section and enable the “Show Second Image on Hover” option
Here is screenshot for reference -
Pleas let me know if more details are needed.
Thanks & regards,
Vivek
Hello, thanks for sending the image and pointing it out. I had not noticed that the hover option in Spotlight is only available on the “Featured Collection” and not on a regular product collection. Is there a way to add the hover option to the regular collection products? Thanks again for your help.