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…

Hey Phil, I’m also using Brooklyn theme and I’ve spent the past 3 hours scratching my head at this. I ended up finding a solution here . Basically around line 61 or so you need to duplicate that [image] tag and replace ‘featured_image’ with ‘product.images[1]’. This will hopefully fix your problem. …

Hey Phil, I’m back with a more concise answer. If you copy and paste this in your ‘product-grid-item.liquid’ below " " and above “{% if sold_out %}” you should be better than good! <a class="grid-product__image-link{% unless featured_image.src== blank %} grid-product__image-link--loading{% …

Hey There, Thank you for this! It’s working for me in the Brooklyn theme, however, some of the hover images just layer on top of the other image, so with two PNGs that have transparent background, I see both images. It also seems to be compressing aspect ratios of some images. Is there a fix in the…

Hello @HeyShopr Thank you very much for helping us! I was wondering if can help me with a code for the Supply Theme? I would be very grateful if you can help me! Thanks in advance, Andi

Hi Tyw! Thanks for the tutorial. Very useful information!

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?

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

Store Design

jiacheng1996 July 12, 2020, 8:57am 25

https://www.youtube.com/watch?v=9uxSrOxxZpY

Follow this video it works for debut theme especially when your featured collection doesn’t work

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