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. 

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

Settings example:

How to:


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:



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


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. 


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: