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 the code. I’m fairly new to shopify and looking to apply the hover effect on my debut theme store. It seems that the images have been doubled. May I ask for advise on this and whether there is any solution for it? The images on the first row does not have the hover effect, whil…

Hi Tyw Thanks for the tutorial. Do you think a similar approach could be applied to add a text box hover on a non-product image? Would you be so kind to provide a way forward that I can try to add a box hover with text over regular images on my homepage? Or even pointing me in the right direction…

I followed this step by step on the Minimal theme and it didn’t work…

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?

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.

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

Store Design

chrisbrennan13 March 23, 2020, 11:34am 4

Hi,

Just wondering if you solved this duplication? I am experiencing the same thing.

Thanks in advance!

Topic		Replies	Views
Reveal second image on hover - Debut theme Store Design	134	1623	November 9, 2023
How can I enable second image hover on mobile product cards? Store Design design , css	142	2014	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	132	August 15, 2022
Add A Hover Effect To Product Images On my SHOPIFY Collection Pages Shopify Discussion apps	2	497	April 1, 2024

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

Related topics