Collection List: Use an alternate image or link with Collection List section

Note:
Groupthought does not provide any warranty or further support for this code. Use this code at your own risk. The code provided below is only a suggestion. You are responsible for any and all code customizations made to your theme. Please work with a developer or Shopify Expert to ensure proper customization. This code may not work with all versions of of Pipeline or with other code customizations and apps you may have installed. We strongly recommend that you make duplicate of your theme before adding or changing any code in your theme.
This tutorial is intended for use with the Pipeline theme.

Note: If you're running Pipeline 4.3 or higher, this feature is already included in the theme, no code changes are required:
Pipeline 4.3 New Features

This customization allows you to use a different image with the homepage Collection list section. There is also an option to change the link URL to link to any other page. 

Example:
Instead of using the collection featured image here, you can choose any image:

Settings example:

How to:

1

Create a new section file

Open your Code Editor (use this link for live/published theme):

Quick link to open Code Editor

Under the Sections folder, choose Add a new section:

Call the new section:

index-collection-grid-custom

Example:

Use the Create section button to complete.

Erase all the default code that generated:

Replace with:

For Pipeline 4, use this code:
Click link to view code

For Pipeline 2 or Pipeline 3, use this code:
Click link to view code

Note: Be sure you know  which version of Pipeline you're using.

Save the file

2

Add the new section in the Theme Editor

Open the Theme Editor:

Quick link to open Theme Editor

Under Sections:

Choose Add section:

Find the new section under Collection:

Add Custom Collection list. 

3

Configure the settings

The new custom section will have an option to add an alternate image and also alternate link:

(1) Be sure to select a collection. This is required even when linking to a different page. 

(2) If you'd like to choose a custom image for the collection, use this option.

(3) If you'd like to link to a page or blog post instead of the collection, use this option. 

Save your settings when completed. 

Update: We've also added the ability to have 4 collections per row:

Resulting in: