Collection description is duplicating/repeating itself on certain collection pages

[annalou]

I have the collection description code as follows in the theme but it's repeating the collection description twice on certain pages. How do I amend the code to stop this from happening please?

<div data-section-id="{{ section.id }}" data-section-type="collection-template" class="collection-template">
<header class="collection-row-header" role="banner">
{% if section.settings.title_position == 'top' %}
<h1 class="large-title collection-title {% if section.settings.description_position == 'top' %} collection-title--with-description{% endif %}">{{ collection.title }}</h1>
{% if collection.description != blank and section.settings.description_position == 'top' %}
<div class="collection-description rte clearfix">
{% if collection.description.size > 300 %}
<div class="collection-description-short">
{{ collection.description | truncate: 300, ". . . " }}<a class="readmore" href="#">Show More &#62;</a>
</div>
<div class="collection-description-full" >
{{ collection.description }}
<br><a class="readless" href="#">&#60; Show Less</a>
</div>
{% else %}
{{ collection.description }}
{% endif %}
</div>
{% endif %}
{% endif %}
{% unless section.settings.crop == "hidden" %}
{% unless section.settings.crop == "none" %}
<div class="global-border-radius banner-image banner-image--crop banner-image--crop-{{ section.settings.crop }}">
<div class="rimage-background fade-in lazyload"
data-bgset="{% render 'bgset', image: header_image %}"
data-sizes="auto"
data-parent-fit="cover">
<noscript>
<img loading="lazy" src="{{ header_image | img_url: '1024x1024' }}" alt="{{ header_image.alt | escape }}" class="rimage-background__image">
</noscript>
</div>
</div>
{% else %}
<div class="global-border-radius banner-image">
{% render 'responsive-image' image: header_image %}
</div>
{% endunless %}
{% endunless %}

{% if section.settings.title_position == 'top' %}
<h1 class="row large-title collection-title">{{ collection.title }}</h1>
{% if collection.description != blank and section.settings.description_position == 'top' %}
<div class="collection-description rte clearfix">
{% if collection.description.size > 300 %}
<div class="collection-description-short">
{{ collection.description | truncate: 300, ". . . " }}<a class="readmore" href="#">Show More &#62;</a>
</div>
<div class="collection-description-full" style="display: none">
{{ collection.description }}
<br><a class="readless" href="#">&#60; Show Less</a>
</div>
{% else %}
{{ collection.description }}
{% endif %}
</div>
{% endif %}
{% elsif section.settings.title_position == 'none' %}
{% if collection.description != blank and section.settings.description_position == 'top' %}
<div class="collection-description rte clearfix">
{% if collection.description.size > 300 %}
<div class="collection-description-short">
{{ collection.description | truncate: 300, ". . . " }}<a class="readmore" href="#">Show More &#62;</a>
</div>
<div class="collection-description-full" >
{{ collection.description }}
<br><a class="readless" href="#">&#60; Show Less</a>
</div>
{% else %}
{{ collection.description }}
{% endif %}
</div>
{% endif %}
{% endif %}
</header>

[Markit-Themes]

Hi Annalou,

It appears that you have two descriptions, one being a concise version with a "read more" option, and the other serving as the full description. The presence of both may indicate a potential issue with your JavaScript code. To assist you better, could you kindly share a link to your store? I'll review the code and identify any discrepancies that may be causing the problem.

Regards,

Emirates7

[annalou]

Thank you. The store is: https://www.annalouoflondon.com/

[Markit-Themes]

Hi,

I can't find collection with description. Can you provide url for that collection?

Regards,

Emirates7

[annalou]

Here's an example: https://www.annalouoflondon.com/collections/best-gifts-for-mums

[ThePrimeWeb]

Hey @annalou,

There are some Javascript errors. But it would be hard to fix them here. If you are ok with it, we can hide the short description and only show the full description. 

Follow these instructions 😊

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.collection-description-short > .row > .c-desc,
.collection-description-full .readless,
.collection-description-full .row:has(.nosto_element) {
    display: none;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

[annalou]

Thank you, unfortunately this didn't work.

[ThePrimeWeb]

It actually did work, you happen to have different collection templates I see. 

For example: https://www.annalouoflondon.com/collections/necklaces

This page had the same issue, now it's fine. I will see if there's a more global solution for all the templates

[ThePrimeWeb]

Either that or you are entering custom HTML, I am not sure because the structure of the pages are different page to page, 

Maybe try this and see, you can remove the previous code and replace with this.

<style>
.collection-description-short > .row > .c-desc,
.collection-description-full .readless,
.collection-description-full .row:has(.nosto_element), 
.collection-description-short:has( > span) {
    display: none;
}
</style>

[annalou]

Yes this seems to work for some pages but not others e.g. https://www.annalouoflondon.com/collections/bracelets