Tutorial: How to display the collection description below the featured image in Pipeline 2 and higher

This tutorial is for Pipeline 2 and higher. There is a link at the bottom of this page for Pipeline 1.x

Result

Collection description moved centred and below the featured image:

Collection description justified left and below featured image:

Original without any customization (under title over image): 

Step 1

From the top right corner, choose the Actions dropdown menu and select Edit Code

Under the " Sections" folder on the left, choose "Add a new section"

Call the file: collection-custom-center

Next,
Replace  all the default code on the right with this code (click the link to view the code):

https://gist.githubusercontent.com/whistlerbrad/1d327f3247bfb6b8416ec68aed8805b2/raw/7b5591d5db8d5cd701b4279e694c0ef60de3fdea/collection-custom-center

Summary: You'll be deleting all the default code when the file was created. Then use  all the new code from the Dropbox link above and pasting into the newly created collection-custom-center.liquid file.

Save the file (top right side)

Step 2

Repeat the above steps but this time we will be creating a new section called:

collection-custom-left

Summary: Create a new section, call it " collection-custom-left" and then replace all the code with this version instead:

https://gist.githubusercontent.com/whistlerbrad/80fc21aabc7f00c68e41655564fac2ae/raw/6ff8f0cd84a156ec130ec730f1d6b875ef585084/collection-custom-left

Save the file.

Step 3  for Centred Version

For this step you're going to modify this file:

myshopify.com/admin/themes/current?key=templates/collection.liquid

The default version looks like this: 

change ' collection

to:

collection-custom-center


Save the file.

It should look like this now: 


You can now exit the Code Editor and return to your site. View a collection page to see the new changes. 

Step 3 for Left Justified Version

If you'd like the collection description left-justified and below the featured image, use this option instead of the centred version.

Click to modify this file: 

myshopify.com/admin/themes/current?key=templates/collection.liquid

The default version looks like this: 

change ' collection

to:

collection-custom-left


Save the file. 

It should look like this now:  


Final notes: 
Your Collection Sort Drop-down setting will have been reset after you change to collection-custom-center or collection-custom-left. Return to a collection page in your Theme Editor to turn the sort feature back on: 


Moving both the title and description below the image

Create a section file and call it:

collection-custom-center-center

Use this code 

https://gist.githubusercontent.com/whistlerbrad/f24749deae5070642415f831b99f4e4f/raw/803518d0c8a8b2d80b740f261f49e38251fcc241/collection-custom-center-center

Click to modify this file: 

myshopify.com/admin/themes/current?key=templates/collection.liquid

change ' collection'

to:

collection-custom-center-center

It should look like this:

Save the file.

Still need help? Contact Us Contact Us