Move collection title and or description below collection banner image
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
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.2, use:
Pipeline 4.0 and Pipeline 4.1, use:
Earlier versions of Pipeline including Pipeline 3 and Pipeline 2, use:
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:
