Adding a long description to a collection page

Highlighted
New Member
4 0 0

Hi everybody, 

 

I would like to add a long description below my product listing on each collection page. By reading the Shopify community forum and an article on that issue (https://www.kumodigital.co.uk/add-a-short-and-long-description-to-a-shopify-collections-page-templat...) I have learned that I have to replace the {{collection.description}} in the collection.liquid with the following code: 

 

{% assign descriptions = collection.description | split: "<!-- split -->" %}
{% assign short_desc = descriptions[0] %}
{% assign long_desc = descriptions[1] %}

 

My {{collection.description}} looks a bit different than the ones I have seen In the explanations (see below). This is why I would like to know what of the code needs to be replaced? The entire {% if collection.description%} tag or just the {{collection.description | strip_html }} part? By the way, what does the strip_html mean? 

 

Bildschirmfoto 2020-03-30 um 20.12.11.png

 

As background information:

  • My collection.liquid in the templates file refers to the collection.liquid in the sections file. 
  • The theme I 'm working with is a third party theme called MODULAR (VERSION 1.3.1) - design and support by Presidio Creative. 

 

I would be very grateful for your help.

 

Best regards

Yemin

0 Likes
Highlighted
Shopify Staff
Shopify Staff
8 3 1

Hi @Yemin,

 

Could you try to follow these steps?

 

1. Update your liquid as follows:

{% if collection.description != blank %}
{% assign descriptions = collection.description | split: "<!-- split -->" %} {% assign short_desc = descriptions[0] %} {% assign long_desc = descriptions[1] %}
 <div class="row row-lg">
    <div class="page-title__text rte size--{{ text_size }}">
<p>Short description: {{short_desc | strip_html}}</p>
<p>Long description: {{long_desc | strip_html}}</p>
<p>{{ collection.description | strip_html }}</p>
</div>
  </div>
{% endif %}
 

In the code above, we have a short, long, and original description. You can edit this to your liking, but it will look something like this.

 

2. You will need to update your collection details as well. You can add this html description:

 

<p>YOUR SHORT DESCRIPTION HERE</p>
<!-- split -->
<p>YOUR LONG DESCRIPTION HERE</p>

The important part is <!-- split -->, this piece of code is needed so liquid will know where to find the short description and the long description.

 

 

You can see my store example here too:

Liquid changes:

Screen Shot 2020-03-31 at 12.47.52 PM.png

 

 

 

Collection detail changes:

Screen Shot 2020-03-31 at 12.47.31 PM.png

 

 

 

 

 

 

 

 

 

Online store collection detail:

Screen Shot 2020-03-31 at 12.51.11 PM.png

 

 

 

 

 

 

 

 

 

Let me know if you need more help.

James

0 Likes
Highlighted
New Member
4 0 0

Dear @JamesWoo,

 

Thank you very much for your detailed explanation. I will try as instructed by you. 

 

Best regards,

Yemin

 

 

 

 

0 Likes
Highlighted
New Member
4 0 0

Hi @JamesWoo,

 

I'm sorry, but your suggestion didn't work out. Do you mind to look into this with me for another time?

 

I've updated the collection-template.liquid (see image 1) ...

 

image 1.png

 

 

 

 

 

 

 

 

 

and the collections details in the HTML-editor (see image 2), but ...

 

Image 2.png

 

 

 

 

 

 

 

 

 

 

unfortunately it looked like this (see image 3):

 

Bildschirmfoto 2020-04-01 um 15.53.23.png

 

 

 

 

 

 

There are three problems:

1. The words "Short description" and "Long Description" are being displayed, (as I have seen, in your example they appear as well).

2. the long description doesn't appear below the product list,

3. the entire text is being displayed twice. In the short and long description, as well as in the original description. 

 

It would be very nice of you to figure this out with me. 

 

Thanks in advance and best regards

Yemin

0 Likes
Highlighted
Shopify Staff
Shopify Staff
8 3 1

Hi @Yemin,

 

1. The words "Short description" and "Long Description" are being displayed, (as I have seen, in your example they appear as well).

You can remove "Short description" and "Long description" in the liquid file.

 

2. the long description doesn't appear below the product list,

I am not sure what you want it to look like? Could you provide the exact details of how you want the collection to look like?

 

3. the entire text is being displayed twice. In the short and long description, as well as in the original description. 

You will have to play around with the liquid file and edit it as needed.

 

Untitled drawing (1).png

 

For example: 

<p> Short description: {{short_desc | strip_html}}</p>

 

If you delete "Short description" then it will not show up in the collection detail. So if you don't want "Short description" to appear, you can have this:

<p>{{short_desc | strip_html}}</p>

The same applies for "Long description".

 

If you want the last line gone (the purple box), just delete that line of code.

 

I recommend you try playing with the liquid script a little to get what you need. Each line represents what will be shown on your collection detail page:

 

<p> Short description: {{short_desc | strip_html}}</p> "Short description: Naturbelassene..."

<p> Long description: {{short_desc | strip_html}}</p> "Long description: TEST TEST TEST"

<p> {{collection.description | strip_html}}</p> "Naturbelassene... TEST TEST TEST" (if you don't want this to show up in collection details, just delete this line)

 

If you want just the long description then your final code could look like:

 

<div class="page-title__text rte size--{{ text_size }}">
  <p>{{long_desc | strip_html}}<p>
</div>

Again, you will need to experiment with the code to get what you want. I hope the explanations were clear enough to help you! 

 

Let me know if you need further assistance!

James

 

 

 

0 Likes