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:


Note: This feature is already included in Pipeline 4 and higher. You can turn it off in the Theme Settings -> Product grid


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. 

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

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.

Touchscreen laptops - If you're using any type of touch device like a Windows laptop with a touch screen, the hover effect will now show. 


Need help with code changes?

We're not able to make any code customizations but we can recommend shophelper.io and heycarson -- they both specialize in small code changes and have really competitive flat-rate pricing. 

Still need help? Contact Us Contact Us