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, I applied this tutorial on the Debut theme, it duplicated all the product images. All uploaded images on my store are JPG not PNG, still no luck :confused:

Can someone give a clear, concise, and complete solution for the implementation of this code on Brooklyn? One of my biggest design barriers are changing the hover style on this theme. There already is one, it dims the images upon hover, how difficult can this be? A big thanks to whoever nails it do…

Hey June, The last code that you added to the thread, is that in addition to something else? I copied it into the exact spot that you mentioned, but it only made the product image two photos in one. Was there a previous step to also follow? Thanks

Hi @YeahNah [email removed] Peoni300 , In order for this to work you need to follow the instructions in the original post and/or ad this code to your theme css, otherwise you’ll end up with two images and the hover feature won’t work. The first bit of code I posted in my other post goes in the produ…

Anybody knows how to apply that to the debut theme?

Hey, Yes! I am trying to achieve a text hover (with some transparency) on some products and some image image hover for others.

send me a code block that contains the product img or any image you’re trying to have it work for

Anyone got this working for the Narrative theme?

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

Store Design

deadrosesuk August 29, 2020, 3:54pm 46

Hey I’m having the same issues you were facing, what was the error in your code? - I’m hoping I just need to fix the same bit of code and it work haha!

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