Caution This is an advanced tutorial and is not supported by Shopify . Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren’t comfortable doing the steps in the tutorial. You can add a hover effect to your product images on the home page and on co…

Hi June, Thanks for sharing this code, it works really well for Brooklyn. Ronney BusinessGrowthTalk

Hi JunePratt, thank you for the code - I copied both your code sections and it worked however it has somehow duplicated the image (I’m working on Brooklyn). Therefore, I now have two thumbnail images - 1 where the hover works as expected and 2nd which is a static duplicate. Do you know how I can fi…

This works for Debut for me, where other similar instructions do not. https://www.youtube.com/watch?v=9uxSrOxxZpY But I would love to find code that would ZOOM the primary image, not just give an alternate image.

Hi Robert, Thank you so much for the link - I followed the steps and unfortunately it is still duplicating the image. This time it enlarged the second the image (which hovers). See images below: [First Image] [Image with Hover (blown up)] Really struggling with this one :disappointed_face: Ki…

Found the error in my code - all is working now! Thank you so much!

They have to be jpeg and not png. There are app plugins that will convert all of your images for you.

woaw it works !!! thanks you guy ! I was tried some tuto since 2 days

Hi Ty, I couldnt find the file liquid for “all the product” grid that I can edit on the code. Could you assist with this enquiry?

Hi, I applied this tutorial on the Debut theme, it duplicated all the product images. All uploaded images on my store are JPG not PNG, still no luck :confused:

Collection - Add a hover effect to product images on your collection pages

Store Design

mdkallday001 August 7, 2020, 7:27am 37

doesnt work on brooklyn

the images just tend to overlay eachother

anyone help?

Topic		Replies	Views
Reveal second image on hover - Debut theme Store Design	134	1165	November 9, 2023
How can I enable second image hover on mobile product cards? Store Design design , css	142	1507	March 21, 2025
Image on hover on product card not be second image Store Design design , customizations , css , shopify-themes , troubleshooting	22	220	July 29, 2025
How can I add hover product images to my Boundless theme site? Store Design	17	85	August 15, 2022
Add A Hover Effect To Product Images On my SHOPIFY Collection Pages Shopify Discussion apps	2	458	April 1, 2024

Collection - Add a hover effect to product images on your collection pages

Related topics