Tutorial: Show Second Image on Hover

In this tutorial we will create an effect for the collection page that that shows the second product image on hover.

Result:

How-to:
You'll need to make code customizations with 2 files. The first one is your product-grid-item.liquid file. You'll need to replace a section of code with new code. Check which  version of Pipeline you're using to help find the correct code required. Click on the link below to open your product-grid-item file in the HTML/CSS editor,  find the old code based on your version, highlighted in a red box. Then replace that section with code from the green box of your version. The second step is to add some style code to the very bottom of your style.css.liquid file. That link and code from the grey box is below. 

There are 2 main steps in this tutorial. Be sure to complete both and save the files in each step.

1

snippets/product-grid-item.liquid

Around line 19 (line 59 in Pipeline 3) of  (click following link to open if you have a published version of Pipeline):

snippets/product-grid-item.liquid

Replace this code:

Pipeline 3

  <a href="{{ product.url | within: collection }}" class="grid__image">
    <img src="{{ product_img_url }}" alt="{{ product.featured_image.alt | escape }}">
    {{ sticker }}
  </a>

Pipeline 2

  <a href="{{ product.url | within: collection }}" class="grid__image">
    <img src="{{ product_img_url }}" alt="{{ product.featured_image.alt | escape }}">
  </a>

Pipeline 1.x

<a href="{{ product.url | within: collection }}" class="grid__image">
	<img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
</a>

With this code:

Pipeline 3

{% if product.images[1].src %}
  <a href="{{ product.url | within: collection }}" class="grid__image double__image">
    <img src="{{ product.featured_image.src | img_url: '900x' }}" alt="{{ product.featured_image.alt | escape }}" class="collection__image__top">
    <img src="{{ product.images[1].src | img_url: '900x' }}" alt="{{ product.featured_image.alt | escape }}" class="collection__image__bottom">
    {{ sticker }}
  </a>
{% else %}
  <a href="{{ product.url | within: collection }}" class="grid__image">
    <img src="{{ product.featured_image.src | img_url: '900x' }}" alt="{{ product.featured_image.alt | escape }}">
    {{ sticker }}
  </a>
{% endif %}

Pipeline 2

{% if product.images[1].src %}
  <a href="{{ product.url | within: collection }}" class="grid__image double__image">
    <img src="{{ product.featured_image.src | img_url: '900x' }}" alt="{{ product.featured_image.alt | escape }}" class="collection__image__top">
    <img src="{{ product.images[1].src | img_url: '900x' }}" alt="{{ product.featured_image.alt | escape }}" class="collection__image__bottom">
  </a>
{% else %}
  <a href="{{ product.url | within: collection }}" class="grid__image">
    <img src="{{ product.featured_image.src | img_url: '900x' }}" alt="{{ product.featured_image.alt | escape }}">
  </a>
{% endif %}

Pipeline 1.x

{% if product.images[1].src %}
  <a href="{{ product.url | within: collection }}" class="grid__image double__image">
    <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" class="collection__image__top">
    <img src="{{ product.images[1].src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" class="collection__image__bottom">
  </a>
{% else %}
  <a href="{{ product.url | within: collection }}" class="grid__image">
    <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
  </a>
{% endif %}

Save the file after replacing the code.

2

assets/style.scss.liquid

Add this code at the end of of your assets/style.scss.liquid file. Click this link if you have a published version of Pipeline:

assets/style.scss.liquid

Tip: Add a couple extra blank lines at the very bottom of the page before pasting this in.

Code to add (all versions of Pipeline):

/* -- code to provide hover effect on collection pages -- */
.supports-no-touch .double__image{
  .collection__image__top{ display: inline-block; }
  .collection__image__bottom{ display: none; }
  &:hover{
    .collection__image__top{ display: none; }
    .collection__image__bottom{ display: inline-block; }
  }
}
.supports-touch{
  .collection__image__bottom{ display: none; }
}
/* - end - */

Save the file.


Troubleshooting

Double images on your collection grid?
If you're seeing double images on your collection grid, verify you've done the second step of adding css styles in your assets/style.scss.liquid file.

Not seeing the hover effect work when you test?
The hover modification does work if you've completed both steps correctly. If you're testing with Chrome, we have found a setting that causes some merchants to not be able to see the hover effect:

8c34281633c0502e6135c654b9279b99.png

If Chrome is set to a forced touchscreen (Enabled), the hover won't work on a desktop browser. 

Copy the following and paste in to your Chrome address bar to open the Experiments settings:

chrome:/flags

Find: Touch Events API (use the search at the top). Change from Enabled to Automatic

Restart the browser after making the change and test hover.

Still need help? Contact Us Contact Us