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

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

TyW
Community Manager
463 71 1238

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:

hover-01.gif

 

Add CSS to your stylesheet

 

 

To add a hover effect, you will need to add some CSS code to your theme's stylesheet:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Assets directory, click 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.
  4. At the very bottom of the file, paste this code hosted on GitHub.
  5. Click Save.

 

Edit the code for your product images

 

 

To edit the code for your product images:

  1. In the Snippets directory, click product-grid-item.liquid.
    If your theme doesn't have a product-grid-item.liquid file, then look for one of the following:

    • product-card.liquid
    • product-card-grid.liquid
    • product-loop.liquid

  2. Find the HTML img tag for your product images by searching for <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 }}">

     

  3. On a new line above the img tag, paste the following code:

    <div class="reveal">

    On a new line below the img tag, paste the following code:

    </div>

    The result should look like this:

    <div class="reveal">
    <img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}">
    </div>

     

  4. On a new line below the 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.

 

Show an alternate product image on hover

 

 

  1. On a new line below the 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 }}" />

    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 -->
      <img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" />
    </div>

     

  2. Click Save.

 

Show custom text on hover

 

 

  1. On a new line below the 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 -->.

     

  2. Click Save.

 

 

Show an alternate product image with custom text on hover

 

 

  1. On a new line below the 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 -->

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

     

  2. Click Save.

 

Demo store



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

Replies 87 (87)
JaimeRosales
Tourist
6 0 0

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!

Pun
Visitor
1 0 0

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;
}

Screenshot 2021-01-04 at 11.42.55 AM.png

Yana22
Visitor
2 0 0

Hi,

do you maybe have also a solution for the minimal theme? 

ready_golfer
Excursionist
21 1 7

@JunePratt 

It works for me. Thanks!

Andogagra
Tourist
7 0 0

Hi Tyw!

Thanks for the tutorial. Very useful information!

Peoni300
Visitor
1 0 0

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.Screen Shot 2020-07-13 at 10.02.24 AM.png

 

k1p57a
Tourist
4 0 4

@Peoni300  is it possible you've pasted the code snippet beneath the already existing image tag instead of replacing it?

SusieFromJurate
Visitor
2 0 0

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. 

animusfilmco
Tourist
10 0 2
Hey there. I had this same issue at first. You'll need to make all of your
images jpegs, so that the backgrounds are white. I used SEO Image Optimizer
- Tiny IMG to automatically reformat all of my photos to jpeg. It's also a
great tool for SEO optimization as it renames your photo files for you to
match searches.

JimmyNguyen
Tourist
19 0 2

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?

getyourbirdseed
Tourist
4 0 1

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!

SateNL
New Member
5 0 0

Anyone got this working for the Narrative theme? 

Twooogirlsco
Excursionist
11 0 6

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!

FXCHROMA
Visitor
3 0 0

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.

Elizabeth01
Tourist
5 0 3

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

FXCHROMA
Visitor
3 0 0

Thanks Elizabeth it worked to a certain extent but it wouldn't show the price and description 😞

 

Elizabeth01
Tourist
5 0 3
Mmm...so you want to show your price and description on hover too? You can
look for an app on the Shopify App store for preview, and when you click on
the preview link people will see the price, description, pictures, etc, and
the more information link to go to the product page. There are some free
apps just make sure it works well on desktop and mobile. So you complement
this hover option with the preview for more info.

I hope it helps 🙂
FXCHROMA
Visitor
3 0 0

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

 

alisonhui
Excursionist
14 1 4

I'm using the simple theme, how can I add the hover effect and show another image?

 

Thanks.

pamelasfeir
Visitor
2 0 0

 hello thank you this was helpful but it actually gave me something that looks like this

Screen Shot 2021-02-28 at 10.20.15 PM.png

iq180
Tourist
6 0 1

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.

jordae
Excursionist
22 0 3

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

 

daughterscandle
Tourist
7 0 1

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.

helppls
Visitor
2 0 0

Folllowed these steps on the Brooklyn theme, triple checked it all and nothing changed. Help?

wmiz
Shopify Partner
41 7 37

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.

Learn how to code Shopify sites: My YouTube channel

Weekly Shopify advice: ShopSavvy newsletter


Work with me: [email protected]
Yessenia_Tseng
Excursionist
17 0 9

i made it work. however i have all these coding on the footer of every page now. Please help me get rid of this

WhatsApp Image 2021-06-17 at 11.12.34 PM.jpeg

Fotis
New Member
4 0 0

Can you send us the css code so the transition to the 2nd image become smoother?

ezenails
Visitor
1 0 0

It didn't work on me!

klooney
Tourist
4 0 0

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;  
}

 

 

MRam
Visitor
1 0 0

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.

RawCutSB
Tourist
7 0 3

This does not work.

Godzhand
Tourist
39 0 2

Hi,

I have duplicate pictures on mobile version, any idea how to fix it?

Godzhand_0-1640237389370.png

 

Ziva1
Visitor
1 0 0

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?

Sandr
Visitor
1 0 0

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?

ramizroshanali
Visitor
3 0 0

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:

ramizroshanali_0-1689799857855.png

 

wereproject
New Member
6 0 0

same happens to me. I dont see any img tag in tha file. Im using expanse them

usturpunks
Visitor
1 0 0

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.

wereproject
New Member
6 0 0

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?