How can I add more content to collection descriptions without making them too long?

ChrisW3
Pathfinder
213 1 9

I want to add more content to our collection descriptions but don't want themn to be too long on the frontend. Tried to add code below and it's fudged it:

ChrisW3_0-1712242298837.png

ChrisW3_1-1712242311389.png

 

Preview Link:

https://czc7uit6obrczel4-40186413217.shopifypreview.com

 

 

Code Added:

collection-template.liquid

{% if collection.description.size > 50 %}
  <div class="collection-description-short">
  {{ collection.description | truncate: 30, ". . . " }}<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 %} 


collection.liquid
   
  <script>
$('.readmore').click(function (event) {
  event.preventDefault();
  var descriptionFull = document.querySelector('.collection-description-full');
  descriptionFull.style.display = 'block';
  var descriptionShort = document.querySelector('.collection-description-short');
  descriptionShort.style.display = 'none';
});
$('.readless').click(function (event) {
  event.preventDefault();
  var descriptionFull = document.querySelector('.collection-description-full');
  descriptionFull.style.display = 'none';
  var descriptionShort = document.querySelector('.collection-description-short');
  descriptionShort.style.display = 'block';
});  
</script>

 

 

Reply 1 (1)
ChrisW3
Pathfinder
213 1 9

Hi how does the <split> tag work?