Splitting the collection description in two; short at top and long at bottom

Store Design
1

I would like to have a short description at the top of my collection page and het long description at the bottom of my collection page. I have read somewhere that this code should be added at the collection-template.liquid:

**{% comment %}ly_global_begin{% endcomment %}{% include 'ly-global' %}{% comment %}ly_global_end{% endcomment %}**
**{% assign descriptions = collection.description | split: "<!-- split -->" %}**
**{% assign short_desc = descriptions[0] %}**
**{% assign long_desc = descriptions[1] %}**

However I do not know where to place this code. I am afraid if I place it in the wrong section I will lose my current descriptions.

Here below this is my collection-template.liquid html-code:

{%- endcomment -%}

<div class="CollectionMain">
{%- if section.settings.toolbar_position == 'top' -%}
{{- collection_toolbar -}}
{%- endif -%}

<div class="CollectionInner">
{%- if show_filters and section.settings.filter_position == 'sidebar' -%}
<div class="CollectionInner__Sidebar {% if collection_toolbar != blank and section.settings.toolbar_position == 'top' %}CollectionInner__Sidebar--withTopToolbar{% endif %} hidden-pocket">
<div class="CollectionFilters">
{{ filters_content }}

<button type="button" class="Button Button--secondary" data-action="reset-tags" {% if current_tags == blank %}style="display: none"{% endif %}>{{ 'collection.filter.reset' | t }}</button>
</div>
</div>
{%- endif -%}
<div class="CollectionInner__Products">
{{ collection_inner }}
</div>
</div>

{%- if section.settings.toolbar_position == 'bottom' -%}
{{- collection_toolbar -}}
{%- endif -%}
</div>
{%- else -%}
<div class="EmptyState">
<div class="Container">
<h3 class="EmptyState__Title Heading u-h5">{{ 'collection.general.empty' | t: collection_title: collection.title }}</h3>
<a href="{{ routes.root_url }}" class="EmptyState__Action Button Button--primary">{{ 'collection.general.empty_button' | t }}</a>
</div>
</div>
{%- endif -%}
</section>
{%- endif -%}
{% if collection.description != blank %}
<div class="rte collection-description page-width">
{{ collection.description }}
</div>
{% endif %} 
{%- capture hack -%}
{%- comment -%}This is just an ugly hack to make those variables appear as part of the theme editor in the General Settings{%- endcomment -%}
{{ settings.product_list_horizontal_spacing }},{{ settings.product_list_vertical_spacing }}
{%- endcapture -%}

Or do I have to do something with this code in the description of the collection page to separate the html-code:

<p>short</p>
<!-- split -->
<p>long</p>

I posted this question yesterday and today but I got deleted somehow. It would be nice if you could answer before deleting the post.

2

@Wesley9 - you have this line -

{{ collection.description }}

this is your original code which shows description right now , you can replace this code with your code and check

3

I did but nothing happened

4

Okay for anyone looking for this too.
This is the actual solution and it works:

Replace this code:

{% if collection.description != blank %}
<div class="rte collection-description page-width">
{{ collection.description }}

For this code:

{% if collection.description != blank %}
<div class="rte collection-description page-width">
{% assign descriptions = collection.description | split: "<!--split-->" %}
{{descriptions[0] }}
</div>
{% endif %}

Then place somewhere down this code:

{{descriptions[1] }}

Do not forget the place this code in your HTML of your collection description

<!--split-->