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

Store Design
1

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

1 Like
2

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 %}
    
      {{ collection.description }}
    

{% 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 %}
    
       {{ collection.description }}
    

{% endif %}

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


  // You'll see a bunch of other code here – don't change any of this

// 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

1 Like
3

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 %}


{{ collection.description }}

{% endif %}

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

Screen Shot 2020-12-04 at 3.10.57 pm copy.png
Screen Shot 2020-12-04 at 3.10.57 pm copy.png2542×1976 549 KB

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

Screen Shot 2020-12-04 at 3.11.16 pm.png
Screen Shot 2020-12-04 at 3.11.16 pm.png2538×1262 342 KB

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

Jo.

1 Like
4

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!

5

Will you help me please? I’d like to add a text field beneath the products on the collection page while leaving the original text above as is. I too use the Debut Theme.

Thanks

6

Hi

I also want to add text, on top & bottom of Debut theme, which should be different for all collection pages, can you please let us know how can we do that.

Thanks

7

This is what got my Debut Theme to work as expected.

Under SALES CHANNELS on the left navigation panel, I clicked Themes.
On the right, I clicked Actions - > Duplicate

When Theme library finished down below, I chose Customize on the one that reads “Copy of…”. I was now working a copy rather than my active theme. If it didn’t work, I could always restore the one that was working.

I chose Actions → Edit Code from the one that reads “Copy of…”

In Sections, I chose collection-template.liquid

At line 66-68

I replaced

{{ collection.description }}

with

{{ collection.description | split: '' | first }}

Then at line 225 after {% endif %} but before

I added

{% if collection.description contains "" %}
{{ collection.description | split: '' | last }}

Now whenever I add after the main collection description, the text after appears beneath the product image grid.

Please let me know if that works for you.

1 Like
8

This answer was removed and added to a post above.

9

Hi

It works in Debut theme.

But 1 small query, how can we adjust the font size for text given in bottom?

Please suggest.

Thanks

1 Like
10

You might try changing those "

tags to

or

for smaller or

for larger. I’d caution against

since there should only be one of those per page IMHO. Also, would you mind liking those instructions above? Not sure what that does, but it may do something.

Sell a bunch!

1 Like
11

At the moment it works, that the text after is shown beneath the products – however it is also shown in the main description above – so there is two times the same text (the one after split – above the products and below.)

Any solutions for that? Of course I want to show the text after only below the products.

Thanks in advance