Duplicating the Collection Description Editor in Shopify

nguyenquan088
Shopify Partner
1 0 0

editor.png

 

Hello Shopify Community,

I am reaching out to seek your help with a specific customization I wish to implement on my Shopify store. By default, each collection in Shopify allows for a single description area where we can write details about the collection. This default description field is displayed at the top of the collection page, right below the collection title.

What I aim to achieve is to add an additional description field to each collection. This means I would like to have two separate areas where I can write descriptions. The default description area will remain as it is, displayed at the top of the collection page, below the collection title. The new, additional description area I wish to introduce should be displayed at the bottom of the collection page, below the products.

This customization will enable me to provide more detailed information about my collections, making it easier for my customers to understand the value and context of the products curated in each collection.

I am not sure how to go about adding this additional description field and properly displaying it on the collection pages. If anyone in the community has experience with similar customizations or can guide me through the process, I would greatly appreciate your assistance. Your insights, suggestions, or any relevant resources would be incredibly helpful.

Thank you for taking the time to read my request. I look forward to any support you can provide.

Reply 1 (1)

devmont-digital
Shopify Partner
96 23 21

Hi @nguyenquan088,

Yes, it's possible to add a second description on the collection page using metafields. This description will appear after the products. Here are the steps to follow:

Step 1: Navigate to Settings -> Custom Data -> Collections -> Add Definition.

tempsnip.png

tempsnip.png

tempsnip.png

 

In the first field, enter any name. Then, select "Multi-line Text" as the type. Save this definition.

tempsnip.png

 

Step 2: Navigate to Online Store -> Themes -> Edit code. Search for the file main-collection-product-grid.liquid. Find the pagination section and paste the code above.

 <div class="description-2">
  {{ collection.metafields.custom.collection_description_2 }}
 </div>

tempsnip.png

 

Step 3: Navigate to Products -> Collections. When you enter any collection, at the bottom of the page, you will find the collection description. Simply enter additional text here and save it.

tempsnip.png

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io