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
Hey Phil, I'm back with a more concise answer.
If you copy and paste this in your 'product-grid-item.liquid' below " <div class="grid-product__image-wrapper">" and above "{% if sold_out %}" you should be better than good!
<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: 'large' }}" 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="{{ featured_image.src | img_url: '1024x' }}" 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: 'large' }}" alt="{{ product.images[1].alt | escape }}" /> </noscript> {% endif %} </div> </a>
For reference this is what my Reveal Module css looks like:
/* =============================================== // Reveal module // =============================================== */ .reveal .hidden { display: block !important; visibility: visible !important;} .product:hover .reveal img { opacity: 1; } .reveal { position: relative; } .reveal .hidden { position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .reveal: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; } }
Hey There,
Thank you for this! It's working for me in the Brooklyn theme, however, some of the hover images just layer on top of the other image, so with two PNGs that have transparent background, I see both images. It also seems to be compressing aspect ratios of some images. Is there a fix in the code, or do I need to adjust my images?
Thanks so much!
Well thank you JunePratt!!
This worked like an absolute charm! Sorry for my late reply, with all that's been going on I haven't been around much lately...
While I'm at it, would you mind if I picked your brain about something? We've had a pretty skilled dev working on a shop a while back and he actually managed to set up the hover image by calling it up using the alt-tag of said image. For example, you could use "hover-image" on any desired image and that's the image it'd switch to. Any ideas how that would work?
Also, I went ahead and changed the reveal module ever so slightly for a smoother fade in/out transition only. Ease-in-out seemed buggy somehow (image snaps back to previous instead of fading back out) so I went ahead and used transition all:
.reveal .hidden {
position: absolute;
z-index: -1;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
Thank you for this. The only issue I was actually having with my site was that part of the image would fade slower when hovering off. By switching from 'opacity' to 'all' it fixed it. So, if anyone is having issues with that, make that same change and see if it works. I'm using Venture theme BTW, so if you're having issues with the images fading on that theme change it from transition: opacity 0.3s ease-in-out; to transition: all 0.3s ease-in-out; under the .reavel .hidden in the original css from the original post.
Hi JunePratt, thank you for the code - I copied both your code sections and it worked however it has somehow duplicated the image (I'm working on Brooklyn).
Therefore, I now have two thumbnail images - 1 where the hover works as expected and 2nd which is a static duplicate. Do you know how I can fix the image duplication so that it only shows the one image with the hover function?
Please see image below:
woaw it works !!!! thanks you guy ! I was tried some tuto since 2 days
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
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 product-grid-item.liquid snippet.
/* ===============================================
// Reveal module
// =============================================== */
.reveal .hidden { display: block !important; visibility: visible !important;}
.product:hover .reveal img { opacity: 1; }
.reveal { position: relative; }
.reveal .hidden {
position: absolute;
z-index: -1;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.reveal: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;
}
}
@getyourbirdseed and others,
My advice is to follow the original poster's instructions and then follow my previously posted instructions on page 3 of this thread. Brooklyn's images for the collection grid is located in the product-grid-item.liquid. The image tag is around line 59, if you have a little bit of html know how you should be able to figure it out fairly quickly.
I hate to be like this, but I unfortunately can't live on replying to people on the shopify design community forum. Hopefully, I can get around to making an instructional video for this topic, but if I do that will be far down the line. If you're looking for something immediate please feel free to hire me through my personal messages here or contact me on my website: joonipea.com. My rates are competitive and sliding scale.
Anybody knows how to apply that to the debut theme?
still need help?
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
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" issue on the search page but then creates other issues on normal collection pages. Anyone had this issue?
Thanks in advance!
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!
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.
<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 %}
This is the working solution.
<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 %}
EDIT: Ok so it seems this website (The Forum) when I add the space on the 2 locations where it needs to be added it returns to to be without the space, I have seen other solutions like that so that could be the reason why I was not able to find it before.
Just add the spaces and you will be good to go. Cheers!
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: 100%;
max-height: 345px;
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;
}
Hi,
do you maybe have also a solution for the minimal theme?
Hi Tyw!
Thanks for the tutorial. Very useful information!
I've got the code in place for a secondary image to pop up on hover but the original first image is being duplicated on top. Please, someone, answer this. It is infuriating ha. Screenshot Attached.
@Peoni300 is it possible you've pasted the code snippet beneath the already existing image tag instead of replacing it?
Any one know how to do this for Testament theme? I've entered the code, worked but the images doubled. And I've even tried deleting the old code, but it ended up saying error.
Hi Ty,
I couldnt find the file liquid for "all the product" grid that I can edit on the code.
Could you assist with this enquiry?
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 down ahead of time!
Anyone got this working for the Narrative theme?
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!
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
Thanks Elizabeth it worked to a certain extent but it wouldn't show the price and description 😞
Thanks i mean when I installed the code the descriptions and prices atthe bottom went missing. This is what it looks like: https://fxchroma.co.uk/collections/all
I'm using the simple theme, how can I add the hover effect and show another image?
Thanks.
hello thank you this was helpful but it actually gave me something that looks like this
User | RANK |
---|---|
182 | |
150 | |
80 | |
72 | |
61 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023