Truncating collection description text in shopify

New Member
1 0 0

I am trying to add "Read more" and "Read less" buttons to collection descriptions for my Shopify store how can I add Html with liquid conditions? Currently,
{{ collection.description }} is the only thing on collection.description template.


What I have tried:

The HTML is working perfectly on the storefront but I want to add HTML in the theme template with liquid conditions, here is the code:



<p>text before Read More<span id="dots">...</span><span id="more"> the remaining 
<button id="myBtn" onclick="myFunction()">Read more</button>

function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if ( === "none") { = "inline";
    btnText.innerHTML = "Read more"; = "none";
  } else { = "none";
    btnText.innerHTML = "Read less"; = "inline";




Replies 0 (0)