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 TyW, Thanks for your detail introduction on code. I have followed them in my Minimal Theme and seccessed to set up hover effect on my product collection page. But meanwhile the other negative result is all the image on product collection page became fade and hardly visible . Could you kindly …

I have followed this tutorial exactly and nothing happens. This is my site. Has anyone else run into the hover effect not working for them? I’m using Debut theme.

Hello, I am afraid it did not work. I look for all the code as you showed but they look quite different. The effect was not applied. Can you please assist me with applying the code. Thank you.

Has anyone else run into the hover effect not working for them? I’m using Debut theme. Hey saknight19 – I’m in the same boat. Check this video out for Debut theme solution.

It works but only on the first page of 20 products… how can I make it work if I have more pages on a collection because of 20+ products?

It didn’t work on the Brooklyn theme as well

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…

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

Store Design

Amer19 May 2, 2020, 6:14am 11

I’m using a Debut theme and followed the exact steps mention but it did not work. Did someone else was able to do this on Debut theme? Thanks.

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

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

Related topics