Collection List: Display the second product image on homepage

If you're using the Collection list section module on your homepage and would like to display the second product image instead of your first product image, you can use this modification. If you are using a collection featured image and would like to use an alternate image, there is a link at the bottom for another tutorial. 

From:

To:

Second product in collection:

How to:

Open this file:

sections/index-collection-grid

Quick link for live/published themes:
sections/index-collection-grid

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

collection.products

Example:

Add [1] to the code after collection.products on both these instances. 

In Pipeline 4, you'll be replacing:

collection.products.first

With:

collection.products[1]

Earlier versions of Pipeline, you'll just be adding the [1].

I've highlighted the changes you need to make:

Pipeline 4:

Pipeline 3:

Save the file.

Still need help? Contact Us Contact Us