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, Try the following code with Debut. A demo can be found here: https://cookies-by-maria.myshopify.com/collections/all /* =============================================== // Reveal module // =============================================== */ .reveal .hidden { display: block !important; visib…

Hello, For Brooklyn, try this code. See a demo here (preview link from Shopify expires in 14 days): https://50xsd8wr0jvludpv-20140633.shopifypreview.com/collections/all /* =============================================== // Reveal module // =============================================== */ .revea…

Just realized there is a typo in my previous replies. I can’t edit the replies so I’ve pasted the corrected code here. For Debut: .reveal .hidden { display: block !important; visibility: visible !important; } .template-collection .product-card:hover .reveal img { opacity: 1; cursor: point…

No luck with that code for Brooklyn theme

This did not work with boundless theme either - did anyone manage to get it to work? thank you

Hey TyW, First of all, thank you so very much for taking the time to write up a tutorial like this! It’s easy to understand and a quick read. We’re working with Brooklyn theme over here, and your tutorial doesn’t seem to apply – seems Brooklyn’s built their img tag a little different then is shown…

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…

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

Store Design

ZZainee May 29, 2020, 3:43pm 18

Has anyone tried this with the Supply theme? I’ve tried it but only the images show up, and the title, price, compare at price are all gone.

Thanks!

Topic		Replies	Views
Reveal second image on hover - Debut theme Store Design	134	1539	November 9, 2023
How can I enable second image hover on mobile product cards? Store Design design , css	142	1867	March 21, 2025
Image on hover on product card not be second image Store Design design , customizations , css , shopify-themes , troubleshooting	22	242	July 29, 2025
How can I add hover product images to my Boundless theme site? Store Design	17	120	August 15, 2022
Add A Hover Effect To Product Images On my SHOPIFY Collection Pages Shopify Discussion apps	3	479	June 4, 2026

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

Related topics