Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Truncating Collection description text in Shopify

    @code_maniacs
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 199
    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:

    1. ...
    2. <p>text before Read More<span id="dots">...</span><span id="more"> the remaining
    3. description</span></p>
    4. <button id="myBtn" onclick="myFunction()">Read more</button>
    5.  
    6.  
    7. <script>
    8.  
    9. function myFunction() {
    10.  var dots = document.getElementById("dots");
    11.  var moreText = document.getElementById("more");
    12.  var btnText = document.getElementById("myBtn");
    13.  
    14.  if (dots.style.display === "none") {
    15.   dots.style.display = "inline";
    16.   btnText.innerHTML = "Read more";
    17.   moreText.style.display = "none";
    18.  } else {
    19.   dots.style.display = "none";
    20.   btnText.innerHTML = "Read less";
    21.   moreText.style.display = "inline";
    22.  }
    23. }
    24.  
    25. </script>
    26.  
    27. ...

     

    html javascript Shopify Web development
    Answer it

 0 Answer(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: