Collections: Move description to bottom of collection page

If you'd like to move your collection description to the bottom of the page, move it out of the title area - This tutorial will help you create a custom collection template that you can use for certain collections that have that need. 

Result:

How to:

For this to work, you'll need to be working with a live/published theme. Draft themes can't show custom templates unless you create the templates on both the live and draft themes. 

Start by opening the Code Editor:

Quick link:
Open Code Editor

1

Create a new section

In the Sections folder, choose Add a new section:

Call the section:

collection-bottom

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 5.0, use:

Click to view code

Or

Pipeline 4.2, use:

Click to view code

Or

Pipeline 4.0 and Pipeline 4.1, use:

Click to view code

Or

Earlier versions of Pipeline, use:

Click to view code

Save the file after replacing the code.

2

Create a new template

In the Templates folder, choose Add a new template:

Change the type (1) to collection and call it bottom (2):

Use the Create template button to complete. 

Next, we will modify the default code in Line 1:

Pipeline 5.0 Change the line to:

{% section 'collection-bottom' %}

<div class="wrapper">
  <div class="grid">
    <div class="grid__item one-whole">
      <div class="rte" style="margin-bottom: 60px;">
			{{ collection.description }}
      </div>
    </div>
  </div>
</div>

<style>
.template-collection .section--image .rte,
.template-collection .collection__heading--below.rte {display:none;}
.collection {padding-bottom: 60px;} 
</style>

Earlier versions of Pipeline change the line to:

{% section 'collection-bottom' %}

<div class="wrapper">
  <div class="grid">
    <div class="grid__item one-whole">
      <div class="rte" style="margin-bottom: 60px;">
			{{ collection.description }}
      </div>
    </div>
  </div>
</div>

<style>
.template-collection .content--flex, .template-collection .h4--body {display:none;}
.collection {padding-bottom: 0px;} 
</style>

Example:

Save the file.

3

Assign the new template to your collection

We're finished with the Code Editor. Now let's assign the new template to the collection which will have the custom sidebar and settings.

Quick link:
Open Collections admin

In your Collections setup, choose the collection and modify the template option to collection.custom:

Change from collection:

Change to: 

Use the Save button at the top to complete. 

4

Browse to the collection in the Theme Editor

Open your Theme Editor:

Quick link
https://shopify.com/admin/themes/current/editor

Browse to the collection that has the custom template assigned. This is important, make sure you browse to that collection in order to see and set the new settings.

Once you're at the right collection page, you'll see the sections settings on the left:

You'll know all your steps were completed correctly if you see the Collection custom section option rather than the regular Collection page option here.

Since this is a new template, your collection settings will need to be setup again. The other collections won't be affected as they are using a different template.

This content will now show at the bottom of the page:

Tip: Use the Description Editor to center your text or change the font size. 

Example: