Shopify themes, liquid, logos, and UX
You can add a hover effect to your product images on the home page and on collection pages. When a customer moves the cursor over a product image, the image will change to show either an alternate product image, custom text, or a combination of the two:
To add a hover effect, you will need to add some CSS code to your theme's stylesheet:
theme.css.liquid
. If your theme doesn't have a theme.css.liquid
file, then click styles.css.liquid
, or another file with a .css.liquid
file extension.
To edit the code for your product images:
product-grid-item.liquid
.product-grid-item.liquid
file, then look for one of the following:<img
. The code for the tag varies theme to theme, but always starts with <img
, and ends with either >
or />
. It might look similar to this:<img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}">
img
tag, paste the following code:<div class="reveal">
img
tag, paste the following code:</div>
<div class="reveal"> <img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}"> </div>
img
tag and above the closing </div>
tag, add the code that changes what is shown on hover. The code that you add will vary depending on whether you want to show an alternate product image, custom text, or a combination of the two. Follow the steps for the customization of your choice.
img
tag and above the closing </div>
tag, paste the following code:<img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" />
<div class="reveal"> <img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}"><!-- this is your original image tag --> <img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" /> </div>
img
tag and above the closing </div>
tag, paste the following code:<div class="hidden"> <div class="caption"> <div class="centered"> YOUR TEXT </div><!-- end of .centered --> </div><!-- end of .caption --> </div><!-- end of .hidden -->
Replace YOUR TEXT
with the text of your choice. You can use HTML and Liquid tags, for example:
<div class="hidden"> <div class="caption"> <div class="centered"> <p>{{ product.title }}</p> <p>{{ product.price | money }}</p> </div><!-- end of .centered --> </div><!-- end of .caption --> </div><!-- end of .hidden -->
The example code above shows the title and the price of a product when you hover over the image.
Your code should look like this:
<div class="reveal"> <img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}"><!-- this is your original image tag --> <div class="hidden"> <div class="caption"> <div class="centered"> YOUR TEXT </div><!-- end of .centered --> </div><!-- end of .caption --> </div><!-- end of .hidden --> </div><!-- end of .reveal -->.
img
tag and above the closing </div>
tag, paste the following code:<div class="hidden"> <img src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" /> <div class="caption"> <div class="centered"> YOUR TEXT </div><!-- end of .centered --> </div><!-- end of .caption --> </div><!-- end of .hidden -->
<div class="reveal"> <img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}"><!-- this is your original image tag --> <div class="hidden"> <img src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" /> <div class="caption"> <div class="centered"> YOUR TEXT </div><!-- end of .centered --> </div><!-- end of .caption --> </div><!-- end of .hidden --> </div><!-- end of .reveal -->
Click here to view a demo store that has product images with a hover effect.
TyW | Online Community Manager @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
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, while the second row does.
Looking forward to your reply.
Thanks in advance!
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 would be great too!
I am using Brooklyn.
Thanks
Josè Luis
Hi,
Just wondering if you solved this duplication? I am experiencing the same thing.
Thanks in advance!
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 help me to check what is wrong?
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.
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; visibility: visible !important; } .template-collection .product-card:hover .reveal img { opacity: 1; cursor: pointer; } .reveal { position: absolute; top: 0; width: 100%; height: 100%; } .reveal .hidden { position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity 0.15s ease-in-out; -moz-transition: opacity 0.15s ease-in-out; -o-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out; } .template-collection .product-card:hover .hidden { z-index: 100000; opacity: 1; } .reveal .caption { position: absolute; top: 0; display: table; width: 100%; height: 100%; background-color: white; /* fallback for IE8 */ background-color: rgba(255, 255, 255, 0.7); font: 13px/1.6 sans-serif; text-transform: uppercase; color: #333; letter-spacing: 1px; text-align: center; text-rendering: optimizeLegibility; } .reveal .hidden .caption .centered { display: table-cell; vertical-align: middle; } @media (min-width: 480px) and (max-width: 979px) { .reveal .caption { font-size: 11px; } }
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 // =============================================== */ .reveal .hidden { display: block !important; visibility: visible !important; } .template-collection .product--wrapper:hover .reveal img { opacity: 1; cursor: pointer; } .reveal { position: absolute; top: 0; width: 100%; height: 100%; } .reveal .hidden { position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity 0.15s ease-in-out; -moz-transition: opacity 0.15s ease-in-out; -o-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out; } .template-collection .product--wrapper:hover .hidden { z-index: 100000; opacity: 1; } .reveal .caption { position: absolute; top: 0; display: table; width: 100%; height: 100%; background-color: white; /* fallback for IE8 */ background-color: rgba(255, 255, 255, 0.7); font: 13px/1.6 sans-serif; text-transform: uppercase; color: #333; letter-spacing: 1px; text-align: center; text-rendering: optimizeLegibility; } .reveal .hidden .caption .centered { display: table-cell; vertical-align: middle; } @media (min-width: 480px) and (max-width: 979px) { .reveal .caption { font-size: 11px; } }
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: pointer; } .reveal { position: absolute; top: 0; width: 100%; height: 100%; } .reveal .hidden { position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity 0.15s ease-in-out; -moz-transition: opacity 0.15s ease-in-out; -o-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out; } .template-collection .product-card:hover .hidden { z-index: 1; opacity: 1; } .reveal .caption { position: absolute; top: 0; display: table; width: 100%; height: 100%; background-color: white; /* fallback for IE8 */ background-color: rgba(255, 255, 255, 0.7); font: 13px/1.6 sans-serif; text-transform: uppercase; color: #333; letter-spacing: 1px; text-align: center; text-rendering: optimizeLegibility; } .reveal .hidden .caption .centered { display: table-cell; vertical-align: middle; } @media (min-width: 480px) and (max-width: 979px) { .reveal .caption { font-size: 11px; } }
For Brooklyn:
/* =============================================== // Reveal module // =============================================== */ .reveal .hidden { display: block !important; visibility: visible !important; } .template-collection .product--wrapper:hover .reveal img { opacity: 1; cursor: pointer; } .reveal { position: absolute; top: 0; width: 100%; height: 100%; } .reveal .hidden { position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity 0.15s ease-in-out; -moz-transition: opacity 0.15s ease-in-out; -o-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out; } .template-collection .product--wrapper:hover .hidden { z-index: 1; opacity: 1; } .reveal .caption { position: absolute; top: 0; display: table; width: 100%; height: 100%; background-color: white; /* fallback for IE8 */ background-color: rgba(255, 255, 255, 0.7); font: 13px/1.6 sans-serif; text-transform: uppercase; color: #333; letter-spacing: 1px; text-align: center; text-rendering: optimizeLegibility; } .reveal .hidden .caption .centered { display: table-cell; vertical-align: middle; } @media (min-width: 480px) and (max-width: 979px) { .reveal .caption { font-size: 11px; } }
No luck with that code for Brooklyn theme
This did not work with boundless theme either - did anyone manage to get it to work? thank you
Has anyone tried this with the Supply theme? I've tried it but only the images show up, and the title, price, compare at price are all gone.
Thanks!
Hey TyW,
First of all, thank you so very much for taking the time to write up a tutorial like this! It's easy to understand and a quick read.
We're working with Brooklyn theme over here, and your tutorial doesn't seem to apply – seems Brooklyn's built their img tag a little different then is shown in your tutorial. We have put in some work trying to analyze (💪🤓), however we can't seem to figure it out.
Here's what we've come up with...
Brooklyn seems to have 3 separate img tags in the product-grid-item.liquid file:
Line 50
<img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
Lines 55-61
<img class="product--image lazyload {{ img_id_class }}" data-src="{{ img_url }}" data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ featured_image.aspect_ratio }}" data-sizes="auto" alt="{{ featured_image.alt | escape }}" data-image>
and Line 65
<img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
By process of elimination line 50 and line 65 did absolutely nothing... Hence, not it.
Wrapping the div (as instructed) around the image tag (lines 55-61) however, completely broke the template, no longer showing any images whatsoever. Hence we strongly believe it must be that one 😉
Seeing that Brooklyn uses a much more complex way of listing their images, we're guessing the html for the wrapping div would need to be adapted accordingly also.
Got any pointers? Has anyone else figured this out already?
Any answers are most welcome.
Cheers,
Phil
Hey Phil,
I'm also using Brooklyn theme and I've spent the past 3 hours scratching my head at this. I ended up finding a solution here. Basically around line 61 or so you need to duplicate that <img> tag and replace 'featured_image' with 'product.images[1]'. This will hopefully fix your problem.
I've pasted my code below which should allow for an easy copy paste for you. The issue now is that the loaded images are essentially thumbnails. Hopefully I can find a workaround. If I do I'll make sure to update you.
<a class="grid-product__image-link{% unless featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url | within: collection }}" data-image-link> <div class="reveal"> {% if featured_image.src== blank %} <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}"> <img class="hidden" src="{{ product.images[1].src | img_url: '1024x' }}" alt="{{ product.images[1].alt | escape }}" /> {% else %} {% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %} <div id="{{ img_wrapper_id }}" class="product--wrapper"> <div style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100 }}%;"> <img class="product--image lazyload {{ img_id_class }}" data-src="{{ img_url }}" data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ featured_image.aspect_ratio }}" data-sizes="auto" alt="{{ featured_image.alt | escape }}" data-image> {% if product.images.size > 1 %} <img class="product--image lazyload hidden {{ img_id_class }}" data-src="{{ product.images[1] | img_url 'large' }}" data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ product.images[1].aspect_ratio }}" data-sizes="auto" alt="{{ product.images[1].alt | escape }}" data-image> {% endif %} </div> </div> <noscript> <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}"> <img class="hidden grid-product__image" src="{{ product.images[1].src | img_url: '1024x' }}" alt="{{ product.images[1].alt | escape }}" /> </noscript> {% endif %} </div> </a>
User | RANK |
---|---|
122 | |
98 | |
77 | |
69 | |
38 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022