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…

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?

I have Brooklyn and this works perfectly, however on my search page I get a “Liquid error: Unkown operator blank” message where every photo should be and every items says “Sold out”. If I try and add == instead of = to certain places in product-grid-item.liquid it will get rid of the “sold out” issu…

Hi, I have done all the mentioned steps but the images on my shop still do not change with the hover effect. At most the images have a slight opacity overlay but they do not change to the other custom image. Please help!

Thank you very much @HeyShopr . This worked for me using the Debut theme.

Ok I found my solution to the error mentioned above. I’m using Brooklyn. Here is the before. there is no space between ‘featured_image.src’ and ‘==’ in both mentions of the code below. {% if featured_image.src== blank %} This is the working solution. {% if featu…

Hello gurus, may i know why my hover image is not centralised? .reveal { position: absolute; top: 0; margin-left:auto; margin-right:auto; width: 100%; height: 100%; } .reveal .hidden { position: absolute; z-index: -1; top: 0; margin-left: auto; margin-right: auto; width: 1…

Hi I am stuck trying to get this to work for the Venture theme. Do you have a workaround? I would like to use the effect on my feature products on the homepage. Many thanks.

I’m not sure if it will work for Venture theme but this video worked well for me on Debut https://www.youtube.com/watch?v=9uxSrOxxZpY maybe you can try it

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

Store Design

JaimeRosales_1 December 29, 2020, 12:32am 54

Hi @animusfilmco I have a similar issue when trying to Search (see attached) were you able to solve this? Any help or pointer is appreciated. I’m also using Brooklyn.

Thanks!

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