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 all, I made a video tutorial for this solution using the Venture theme. Thought it might be useful if anyone is having trouble implementing the feature in this post. The main change is that you edit product-card.liquid instead of product-grid-item.liquid.

i made it work. however i have all these coding on the footer of every page now. Please help me get rid of this [WhatsApp Image 2021-06-17 at 11.12.34 PM.jpeg]

Can you send us the css code so the transition to the 2nd image become smoother?

@k1p57a Thank you for this. The only issue I was actually having with my site was that part of the image would fade slower when hovering off. By switching from ‘opacity’ to ‘all’ it fixed it. So, if anyone is having issues with that, make that same change and see if it works. I’m using Venture them…

Hi all, To anyone trying to get this to work properly on the Venture theme, here is what I did. Now before you start getting into this, here is what I was actually trying to accomplish, so if you wanted to do something different you might still need to make some adjustments. On the Venture theme, w…

Hello, Thanykyou for this tutorial. However, I have had no luck with it for the boundless theme - are the steps supposed to be repeated for every <img segment? Thanks.

@JunePratt It works for me. Thanks!

Hi, I have duplicate pictures on mobile version, any idea how to fix it? [Godzhand_0-1640237389370.png]

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

Store Design

JP_24 November 28, 2022, 4:24pm 83

@HeyShopr

can you please share code for product-card-grid.liquid for Debut Theme along with theme.css code

Topic		Replies	Views
Reveal second image on hover - Debut theme Store Design	134	1647	November 9, 2023
How can I enable second image hover on mobile product cards? Store Design design , css	142	2036	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	500	April 1, 2024

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

Related topics