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

jowestaway
Excursionist
12 1 6

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
Shopify Partner
19 4 9

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

Alex Marse | Shopify Enthusiasts
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!
jowestaway
Excursionist
12 1 6

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.

Screen Shot 2020-12-04 at 3.10.57 pm copy.png

 

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

 

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

Jo.

alexmarse
Shopify Partner
19 4 9

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!

Alex Marse | Shopify Enthusiasts
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!
0 Likes
GSol
Excursionist
19 0 2

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

0 Likes
sahyog-wellness
New Member
2 0 1

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

0 Likes
GSol
Excursionist
19 0 2

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
<div class="rte">
{{ collection.description }}
</div>

with

<div class="rte collection-description page-width" id="first_collection_description">
{{ collection.description | split: '<!-- split -->' | first }}
</div>

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

</div>
</div>

I added

<div>
<center>
<h3>
{% if collection.description contains "<!-- split -->" %}
<div class="rte collection-description page-width" id="last_collection_description">
{{ collection.description | split: '<!-- split -->' | last }}
</h3>
</h3></center>
</div>

Now whenever I add <!-- split --> after the main collection description, the text after <!-- split --> appears beneath the product image grid.

Please let me know if that works for you.

GSol
Excursionist
19 0 2

This answer was removed and added to a post above.

0 Likes
sahyog-wellness
New Member
2 0 1

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

GSol
Excursionist
19 0 2

You might try changing those "<h3> tags to <h4> or <p> for smaller or <h2> for larger.  I'd caution against <h1> 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!