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…

I’ve got the code in place for a secondary image to pop up on hover but the original first image is being duplicated on top. Please, someone, answer this. It is infuriating ha. Screenshot Attached. [Screen Shot 2020-07-13 at 10.02.24 AM.png]

Well thank you JunePratt!! This worked like an absolute charm! Sorry for my late reply, with all that’s been going on I haven’t been around much lately… While I’m at it, would you mind if I picked your brain about something? We’ve had a pretty skilled dev working on a shop a while back and he actu…

@Peoni300 is it possible you’ve pasted the code snippet beneath the already existing image tag instead of replacing it?

Any one know how to do this for Testament theme? I’ve entered the code, worked but the images doubled. And I’ve even tried deleting the old code, but it ended up saying error.

Hey there. I had this same issue at first. You’ll need to make all of your images jpegs, so that the backgrounds are white. I used SEO Image Optimizer Tiny IMG to automatically reformat all of my photos to jpeg. It’s also a great tool for SEO optimization as it renames your photo files for you t…

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!

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

Store Design

ronneybhasin July 27, 2020, 8:56am 32

Hi June,

Thanks for sharing this code, it works really well for Brooklyn.

Ronney

BusinessGrowthTalk

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

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

Related topics