Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Truncating Collection description text in Shopify

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 147
    Answer it

    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
    description</span></p>
    <button id="myBtn" onclick="myFunction()">Read more</button>
    
    
    <script>
    
    function myFunction() {
     var dots = document.getElementById("dots");
     var moreText = document.getElementById("more");
     var btnText = document.getElementById("myBtn");
    
     if (dots.style.display === "none") {
      dots.style.display = "inline";
      btnText.innerHTML = "Read more";
      moreText.style.display = "none";
     } else {
      dots.style.display = "none";
      btnText.innerHTML = "Read less";
      moreText.style.display = "inline";
     }
    }
    
    </script>
    
    ...

     

 0 Answer(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: