How to add text on collection pages below/after products? (Debut theme)

[jowestaway]

Hi all

I'd love to add custom text at the bottom of each collection page. The text needs to be different on each page.

We're working with the Debut theme.

Any ideas how I code this?

Example of 2 current collection pages with text at top (before products). We want this text to be below/after products:

https://www.veruccascakes.com.au/collections/cakes

https://www.veruccascakes.com.au/collections/birthday-cakes

Thanks for your help

Jo

[alexmarse]

Hey Jo!

Great question. Probably the easiest way to make this change is to move the collection "description" out of the collection "header" and place it below the collection grid.

Step 0: Before you edit your theme's code, it is a best practice to duplicate it first to ensure that you're not editing the live production theme, but rather a copy

• Go to Online Store –> Themes –> Actions –> Duplicate 
• This will duplicate your theme – the duplicate will probably be called "Copy of Debut" and will show up in the Theme library section of the Themes page

Step 1: Navigate to the code editor within your new duplicated theme

• Actions –> Edit Code

Step 2: Open up the file "collection-templates.liquid" within the Sections dropdown folder

Step 3: Find the following bit of code (ctrl-f or cmd-f is your bff), copy it to your clipboard, then delete it

{% if collection.description != blank %}
    <div class="rte collection-description page-width">
      {{ collection.description }}
    </div>
{% endif %}

Step 4: Delete the following bit of code as well (it should be just below the other code you just copied and deleted)

{% if collection.description != blank %}
    <div class="rte">
       {{ collection.description }}
    </div>
{% endif %}

Step 4: Paste the code you copied below the closing div tag for the collection grid div

<div class="page-width" id="Collection">
  // You'll see a bunch of other code here – don't change any of this
</div>

// Insert the code you copied here

Step 5: Click Save and go back to the Themes page

• Click Actions –> Preview to make sure the code changes you made produced the desired effect on your Collections pages
• When you're ready to publish the duplicated theme you've made this code update to, click Actions –> Publish and you're all set!

Let me know how this goes, Jo. Your cakes look great btw!

Best,

Alex Marse

[jowestaway]

Thanks @alexmarse - you're a champion!

It worked, however, only when I inserted the first code at the bottom of the collection-template.liquid file.

{% endif %}
{% if collection.description != blank %}
<div class="rte collection-description page-width">
{{ collection.description }}
</div>
{% endif %}

This is what the collections page looked liked when I used both sets of code - doubling up on the wording.

And here is what the collections page looks like when I use only the first code. Perfect!

Thank you so much for your help. I really appreciate it.

Jo.

[alexmarse]

No prob at all Jo, I'm glad to hear you got it working!

Alex Marse | Shopify Enthusiast
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it Accept as Solution to help others locate the answer!
Your Like and Accept as Solution are much appreciated!