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

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: