Tutorial: How to display the collection description below the featured image

In this tutorial we will modify the collection template to use a new version which provides options to move your collection description below the featured image. This new version also allows you to move the heading below the featured image plus left, center and right alignment options.

NEW:

This tutorial has been updated to support Pipeline 4.x

Examples:

Description moved below featured image:

Example 2 - Description below, both heading and description left aligned:

Example 3 - Same as above but with smaller description font:

Example 4 - Both heading and description below and both left aligned:

Example 5 - Both heading and description below and both centred:

Example 6 - Below and right alignment:

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:

1

Create a new section file

Open your 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

In the Sections folder, choose Add a new section:

Call the section:

collection-custom-heading

Example:

Use the Create section button to complete. 

Erase all the default code that generated:

Replace the default code with one of these options - Choose your version of Pipeline:

If you're unsure of your version:
What version of Pipeline am I using?

Pipeline 4, use:

Click to view code

Earlier versions of Pipeline including Pipeline 3 and Pipeline 2, use:

Click to view code

Save the file after replace code.

2

Change your collection template

From the Templates folder, open collection.liquid:

The default version looks like this: 

change

collection

to:

collection-custom-heading

It should look like this now: 

Save the file.

3

Configure your settings in the Theme Editor

Use the Custom Theme option in the top right corner of the Code Editor:

Browse to a collection page in the Theme Editor or use the top menu and choose Collection pages:

Once in your Collection page settings you can start to configure the options. Since you're using a new template section your original Collection page settings we be reset. For example, the sidebar options, how many products per row and others will need to be configured again.

The new settings are found under Heading and Description:

Save your changes in the Theme Editor. 

Notes:

The color of your heading or description can be changed if it's placed in the featured image you have them positioned in the featured image area. Use the settings at the button under Feature Image to adjust the color:

If you use the alignment options, test out how they look on other collection pages. The settings will apply to all your collections. 


Undo or return to original template

To return to the original collection template format, you can simply change the code in templates/collection.liquid back to:

Still need help? Contact Us Contact Us