Section displaying the collection copy/description with 'read more' button. A friendlier version of implementing a "Read more" button in collection descriptions for Shopify themes.

collection-copy.liquid

{% comment %}
  If the user is planning to have long collection descriptions, they would just have to add <!-- Read More-->
  at the top of the paragraph(s) that they want to be included in the "more" section of the description.
{% endcomment %}

{% assign truncated_description = collection.description | split: '<!-- Read More -->' | first %}
{% assign rest_of_description = collection.description | split: '<!-- Read More -->' | last %}

<div class="page-width">

    {% if collection.description contains '<!-- Read More -->' %}
        <div class="first-part-of-description">
            {{ truncated_description }}
        </div>
        <div class="rest-of-description">
            {{ rest_of_description }}
        </div>
        <a id="description-toggle" class="read-more">Read more</a>
    {% else %}
        {{ collection.description }}
    {% endif %}
    
</div>

<!-- Styles can be adjusted based on the theme -->
<style> 
    .rest-of-description {
            display: none;    
    }
    .rest-of-description.show {
        display: block;
    }
    #description-toggle {
        color: #676f78;
        font-family: 'Heebo','Helvetica Neue',Helvetica,Arial,sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
        letter-spacing: .4px;
        text-decoration: underline;
        cursor: pointer;
    }
</style>

<script>
    document.getElementById('description-toggle').addEventListener('click', function(evt) {
        if(evt.currentTarget.classList.contains('read-more')) {
            evt.currentTarget.classList.remove('read-more');
            evt.currentTarget.classList.add('show-less');
            evt.currentTarget.innerHTML = "Show less";
            document.querySelector('.rest-of-description').classList.add('show');
        } else {
            evt.currentTarget.classList.remove('show-less');
            evt.currentTarget.classList.add('read-more');
            evt.currentTarget.innerHTML = "Read more";
            document.querySelector('.rest-of-description').classList.remove('show');
        }
    });
</script>

{% schema %}
  {
    "name": "Collection Copy",
    "settings": [],
    "presets": [
        {
            "name": "Collection Copy"
        }
    ]
  }
{% endschema %}