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…

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 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!

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?

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…

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

Store Design

michaellauu September 12, 2020, 12:57pm 47

still need help?

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

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

Related topics