Collections: Show last image on hover

This code change will show the last image on hover instead of the second image. This change is for Pipeline 4 and higher only. 

How to:

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:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

1

Open snippet file

In the Snippets folder, open product-grid-item.liquid:

2

Find and change code

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

[1]

You'll find two results:

We will be making a change to the second instance (2).

Replace the following:

product.images[1]

With:

product.images.last

Example:

Verify that line is correct.

If you need a copy of the entire line, you can use this:

<div class="collection__image__bottom lazyload" data-bgset="{% include 'bgset', image: product.images.last %}"></div>

Save the file.

Undo

Use the Older versions link at the top of the file if you need to rollback or undo this code change.