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…

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!

doesnt work on brooklyn the images just tend to overlay eachother anyone help?

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

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:

Can someone give a clear, concise, and complete solution for the implementation of this code on Brooklyn? One of my biggest design barriers are changing the hover style on this theme. There already is one, it dims the images upon hover, how difficult can this be? A big thanks to whoever nails it do…

Hey June, The last code that you added to the thread, is that in addition to something else? I copied it into the exact spot that you mentioned, but it only made the product image two photos in one. Was there a previous step to also follow? Thanks

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

Store Design

Mathias08 August 8, 2020, 11:36pm 39

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

Topic		Replies	Views
Reveal second image on hover - Debut theme Store Design	134	1140	November 9, 2023
How can I enable second image hover on mobile product cards? Store Design design , css	142	1489	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	84	August 15, 2022
Add A Hover Effect To Product Images On my SHOPIFY Collection Pages Shopify Discussion apps	2	455	April 1, 2024

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

Related topics