Solved

How can I effectively add text to top and bottom of collection pages?

LothaireBordeau
Explorer
57 1 8

Hello,

 

What would be the optimal way to add text at the top and bottom of collection pages ? Here : https://www.lothaire.fr/collections/moncler I had to make a custom collection theme. But there has to be a better way.

 

I want all collections to have a place that I can fill with text at the top and bottom, that is hidden in collections where I haven't written the text yet.

Accepted Solution (1)
websensepro
Shopify Partner
1045 144 149

This is an accepted solution.

Just wrap the text in h2 element in metafield 

 

If I managed to help you then, please Mark it as Solution!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

Replies 9 (9)

NomtechSolution
Astronaut
1245 113 149

To add text in top of collection page, you can modify code of collection.liquid file in theme code and add <h1></h1> tag

LothaireBordeau
Explorer
57 1 8

Thanks. Should I find this file in Layout, Templates, Sections, Config, Snippets, Assets, Locales ?

trailblazer2407
Visitor
1 0 0

Hello! I'm currently working on enhancing the default collection page by adding text both at the top and the bottom.

Right now, on this page I have used custom html and other collections there's a "read more" link that seems to conceal all the text at the top of the page, and I'd like to modify this so more text remains visible. Additionally, I want to include text below the images on the collection page. I'm using the EMPIRE theme.

Any assistance would be greatly appreciated.

websensepro
Shopify Partner
1045 144 149

Hi @LothaireBordeau

You can follow these steps to show content on the top and bottom of the collection page
1- Goto setting -> custom data -> collection -> add definition 

websensepro_0-1685351148982.png

websensepro_1-1685354519898.png

 

 

After creating a definition add below liquid code in the relevant collection template file
{{ collection.metafields.custom.content_top }}

If I managed to help you then, don't forget to Like it and Mark it as a Solution!



Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
LothaireBordeau
Explorer
57 1 8

Wow, that feature is great ! Didn't even know it existed.

 

Can you please help me locate where I'm supposed to implement the code ? Is that in main-collection.liquid ? (please see attached screenshot)

 

Capture d’écran 2023-05-29 à 12.13.42.png

websensepro
Shopify Partner
1045 144 149

If you are using the dawn theme 
1- Goto main-banner-collection.liquid and paste the code

websensepro_0-1685355710991.png

 

2- Also goto main-collection-product-grid.liquid and paste the exact same code above schema tag

websensepro_1-1685355796358.png

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
LothaireBordeau
Explorer
57 1 8

You are absolutely awesome ! My issue is almost done.

 

In the top bottom part, I need to input not only text, which currently works, but also an H2 title. What would be the easiest way to accomplish that  ?

websensepro
Shopify Partner
1045 144 149

This is an accepted solution.

Just wrap the text in h2 element in metafield 

 

If I managed to help you then, please Mark it as Solution!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
LothaireBordeau
Explorer
57 1 8

Thank you so much for going the extra mile !