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
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
Is there a solution to Supply theme?
I tried the original code but then nothing happens when I hover over, but instead it messed up the images that covers the price underneath.
Please help!
Thanks in advance.
Hello,
Is this still working in 2021 ? I can't find the "<img src" in my product-card-grid.liquid
I'm on Debut theme (v 17.12.0)
I've tried an alternative way from this post, the mouse hover works but there's "no image" instead of my products first photo
Hi tried several times to implement this coding myself but just can't achieve the mouse roll-over effect that we're after willing to pay unto £100 to get this fixed!
we're using the "minimalist" theme on our store.
Folllowed these steps on the Brooklyn theme, triple checked it all and nothing changed. Help?
Hi all, I made a video tutorial for this solution using the Venture theme. Thought it might be useful if anyone is having trouble implementing the feature in this post. The main change is that you edit product-card.liquid instead of product-grid-item.liquid.
Weekly Shopify advice: ShopSavvy newsletter
i made it work. however i have all these coding on the footer of every page now. Please help me get rid of this
Can you send us the css code so the transition to the 2nd image become smoother?
It didn't work on me!
Hi all,
To anyone trying to get this to work properly on the Venture theme, here is what I did. Now before you start getting into this, here is what I was actually trying to accomplish, so if you wanted to do something different you might still need to make some adjustments. On the Venture theme, when you hover on a product image, a box pops up that says 'View' and I wanted to get rid of that box and instead have an alternate image of the product show up instead. So here's what I did.
I used all of the code from the original post on this topic and then made these changes in the theme files:
Snippets > product-card.liquid:
Go to line 16 and either delete or quote out the block of code that starts right under "product-card__image js". Also, go down to where you added the "reveal" div from the code in the original post in this thread and quote out the "noscript" opening and closing tags. Then go down to the bottom and quote out the "product-card__overlay" code at the bottom of the page. So, your code should look something like this now:
<!-- /snippets/product-card.liquid -->
{% comment %}
The product card snippet is passed a liquid object, used in this file
as "product". The object is either "product" or "item", the latter if
it is from search results.
{% endcomment %}
{%- assign current_variant = product.selected_or_first_available_variant -%}
<a href="{{ product.url }}" class="product-card">
{% assign image = product.featured_image %}
<div class="product-card__image-container">
<div class="product-card__image-wrapper">
<div class="product-card__image js" style="max-width: {% include 'image-width' with image: image, width: 235 %}px;" data-image-id="{{ image.id }}" data-image-with-placeholder-wrapper>
<!-- <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100 }}%;">
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[100, 140, 180, 250, 305, 440, 610, 720, 930, 1080]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="contain"
data-image
alt="{{ image.alt | escape }}">
</div> -->
<div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
</div>
<!-- <noscript> -->
<!-- ----------START CODE FOR SHOWING DIFFERENT IMAGE ON HOVER--------- -->
<div class="reveal">
<img src="{{ product.featured_image.src | img_url: '450x450' }}" alt="{{ product.featured_image.alt | escape }}" class="product-card__image" />
<img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" />
</div>
<!-- ----------START CODE FOR SHOWING DIFFERENT IMAGE ON HOVER--------- -->
<!-- </noscript> -->
</div>
</div>
<div class="product-card__info">
{% if settings.product_vendor_enable %}
<div class="product-card__brand">{{ product.vendor }}</div>
{% endif %}
<div class="product-card__name">{{ product.title }}</div>
{% if product.available %}
<div class="product-card__price">
{% if product.compare_at_price > product.price %}
{% comment %}
Product is on sale
{% endcomment %}
{% if product.price_varies %}
{% assign sale_price = product.price | money_without_trailing_zeros %}
{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="product-card__regular-price">{{ product.compare_at_price | money_without_trailing_zeros }}</s>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
{{ product.price | money_without_trailing_zeros }}
{% endif %}
{% else %}
{% comment %}
Not on sale, but could still have varying prices
{% endcomment %}
{% if product.price_varies %}
{% assign price = product.price | money_without_trailing_zeros %}
{{ 'products.product.from_text_html' | t: price: price }}
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{{ product.price | money_without_trailing_zeros }}
{% endif %}
{% endif %}
{%- unless product.price_varies -%}
{%- if current_variant.unit_price_measurement -%}
{% include 'product-unit-price', product_variant: current_variant, wrapper_class: "product-card__unit-price" %}
{%- endif -%}
{%- endunless -%}
</div>
{% else %}
<div class="product-card__availability">
{{ 'products.product.sold_out' | t }}
</div>
{% endif %}
</div>
{% if product.compare_at_price > product.price %}
{% comment %}
A visually-hidden label before regular/sale prices clarifies
prices for screen readers, so hide the sale tag from them.
{% endcomment %}
<div class="product-tag product-tag--absolute" aria-hidden="true">
{{ 'products.product.on_sale' | t }}
</div>
{% endif %}
<!--
<div class="product-card__overlay">
{% assign view_string_length = 'products.product.view' | t | size %}
<span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
</div> -->
</a>
Assets > theme.scss.liquid
The first chunk of CSS code from the original post was causing issues with the secondary image fading properly, so I changed it to this:
.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: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
Hello, Thanykyou for this tutorial. However, I have had no luck with it for the boundless theme - are the steps supposed to be repeated for every <img segment? Thanks.
This does not work.
Hi,
I have duplicate pictures on mobile version, any idea how to fix it?
Thank you for a great tutorial. But I have a problem, so when im looking at the collection page on the phone the picture is no longer a button to press. It's only possible to go to the product by clicking in the product name. Can this be fixed?
Hello!
I was trying to use this code to have that hover over effect and I ended up finding this one wich works for the theme I'm using on shopify but it is not reflected on my site :/. Works on shopify but not on my site https://www.friendsfromnewyork.com/shop-bodega. Can anyone please help me?
Thanks for sharing, till adding CSS it was good but when it came to product-loop.liquid I cant find the img src code in the entire code, where to I paste everything? I am using Mobilia theme.
Here is what I see:
same happens to me. I dont see any img tag in tha file. Im using expanse them
Hi, great tutorial. I could find these files and lines in my theme. However, what I am looking for is solution for my products. My mockups use transparent background and when I hover over them I can still see the first image. This is very disturbing. Any solution for this? Thank you. Much appreciated.
hello thanks for the code, but my product-grid-item.liquid
doesnt have any <img tag anywhere in the page, how I can do it?
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024