How to add a read more/read less button on collection description in dawn theme

[leanne89]

Hi,

I'm looking for some help to add a read more and read less button to collection descriptions to make screens more user friendly.  Some of my descriptions are getting quite long and causing the user to have to scroll down to see the collection products.  I've tried a number of solutions I've found on the internet and can't find one that works for all my collection pages.  I found one solution that worked for some of my collection descriptions however on others it gave me an HTML error saying there was broken code.  I'm using the dawn theme and would really appreciate some guidance on how to get this to work.  

Thanks in advance,

Leanne

[swym]

Hey @leanne89, 

To add the Read more/ Less button on the collections pages you can follow the below guide. 

1. Find the file that renders the collection's description. If you are using Dawn theme it is sections/main-collection-banner.liquid file. 

2. Find the code for the Collection Description. Look for this line in the file:

{{ collection.description }} 

3.

    a. Add an id attribute to the element containing the description: id="custom-collection-description" as shown in the screenshot below. 

    b. Add the Read More / Less button right below the description:

<span class="read-more-btn" id="readMoreBtn" onclick="toggleDescription()">Read More</span>

4. To add the styling and functionality, add the following CSS and JavaScript at the bottom of the file:

<style>
  #custom-collection-description {
    max-height: 100px; /* Adjust this for the visible part */
    overflow: hidden;
    position: relative;
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 1;
  }

  #custom-collection-description.expanded {
    max-height: 500px; /* Adjust this for the full expanded height */
    opacity: 1;
  }

  .read-more-btn {
    display: inline-block;
    color: blue;
    cursor: pointer;
    font-weight: bold;
    margin-top: 5px;
    transition: color 0.2s ease-in-out;
  }

  .read-more-btn:hover {
    color: darkblue;
  }
</style>

<script>
  function toggleDescription() {
    var desc = document.getElementById("custom-collection-description");
    var btn = document.getElementById("readMoreBtn");

    if (desc.classList.contains("expanded")) {
      desc.style.maxHeight = "100px"; // Collapse
      desc.style.opacity = "0.7"; // Subtle fade effect
      setTimeout(() => {
        desc.classList.remove("expanded");
        btn.innerText = "Read More";
      }, 300); // Matches transition time
    } else {
      desc.classList.add("expanded");
      desc.style.maxHeight = "500px"; // Expand smoothly
      desc.style.opacity = "1";
      btn.innerText = "Read Less";
    }
  }
</script>

5. Done? Now, save the file and preview your collection page. If everything was updated correctly, the Read More / Less button should appear and function as expected.

I hope this helps! 

If my response helped you, please consider giving it a like (👍) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.

Regards, 

Abhishek from Swym

[leanne89]

Hi Swym,

This worked great - thank you so much!  A couple of quick questions on the layout of it - is it possible to get the show less and the show more to appear at the end of the line as opposed to below the text, and after ... to show that the text is to be continued, for example:

"This is the webpage...read more

Also is there a way to hide the show more and show less when the text on the page doesn't actually need it i.e. on a short page?

Thanks again,

Leanne

[swym]

Hey @leanne89, 

Is it possible to get the show less and the show more to appear at the end of the line as opposed to below the text

- Yes it is possible but follow up question to that will be what is the maximum length of the descriptions for which you want to show the read more/ less buttons? And also do you want the read more/ less buttons to show up on the first line itself like the way you explained or show 2 -3 lines of small content of the description and then show the button? 

If its the single line approach then I can suggest some solution to you but for the multi-line preview before showing the button there are complexities involved in terms of designing and positioning the button and so it would be time consuming and I wont be able to assist with you on that here and in that case and maybe you can go with some developer help. 

Also is there a way to hide the show more and show less when the text on the page doesn't actually need it i.e. on a short page?

 - Yes, you can hide the "Show More" button when the text is already short enough. To implement this properly, I’d need to know the exact limit (either by character count) where you want the button to appear.

Regards, 

Abhishek from Swym

[Dan-From-Ryviu]

Hi @leanne89 

Please open main-collection-banner.liquid file in store admin > Sales channels > Online Store > Themes > click "..." > Edit code 

Find this line of code 

<div class="collection-hero__description rte">{{ collection.description }}</div>

Replace it with those codes and save your file

        <div class="collection-hero__description rte">
          <div class="expand-col">
          {{ collection.description }}
          </div>
          <a href="javascript&colon;void(0)" class="read-more">Read More</a>
          {% style %}
            .collection-hero__description {
              position: relative;
            }
            .expand-col {
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 2; /* Show only 2 lines */
              -webkit-box-orient: vertical;
              text-overflow: ellipsis;
              max-height: 4em; /* Adjust based on line height */
              transition: max-height 0.3s ease;
            }
        
            .expand-col.expanded {
              -webkit-line-clamp: unset;
              max-height: none;
            }
        
            .read-more {
              display: inline-block;
              margin-top: 5px;
              color: #007bff; /* Adjust to match your theme */
              cursor: pointer;
              text-decoration: underline;
            }
            {%- endstyle -%}
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                const readMoreLinks = document.querySelectorAll('.read-more');
            
                readMoreLinks.forEach(link => {
                  link.addEventListener('click', function () {
                    const container = this.previousElementSibling; // The rich text paragraph
                    container.classList.toggle('expanded');
            
                    if (container.classList.contains('expanded')) {
                      this.textContent = 'Read Less';
                    } else {
                      this.textContent = 'Read More';
                    }
                  });
                });
              });
            </script>          
        </div>

[leanne89]

Hi Dan,

Thank you for this.  It works well and looks good however when I am viewing the collections inside the editor I receive the error:  An embedded page at ...my website.myshopify.com says:  This link cannot be opened inside the editor. It will be opened in a new window (javascript:void(0)). Click OK to continue.  

This happens each time I click on a different collection page.

Any ideas?

Thanks,

Leanne

[Dan-From-Ryviu]

Please update the code 

        <div class="collection-hero__description rte">
          <div class="expand-col">
          {{ collection.description }}
          </div>
          <a href="javascript&colon;void(0)" class="read-more">Read More</a>
          {% style %}
            .collection-hero__description {
              position: relative;
            }
            .expand-col {
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 2; /* Show only 2 lines */
              -webkit-box-orient: vertical;
              text-overflow: ellipsis;
              max-height: 4em; /* Adjust based on line height */
              transition: max-height 0.3s ease;
            }
        
            .expand-col.expanded {
              -webkit-line-clamp: unset;
              max-height: none;
            }
        
            .read-more {
              display: inline-block;
              margin-top: 5px;
              color: #007bff; /* Adjust to match your theme */
              cursor: pointer;
              text-decoration: underline;
            }
            {%- endstyle -%}
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                const readMoreLinks = document.querySelectorAll('.read-more');
            
                readMoreLinks.forEach(link => {
                  link.addEventListener('click', function () {
                    const container = this.previousElementSibling; // The rich text paragraph
                    container.classList.toggle('expanded');
            
                    if (container.classList.contains('expanded')) {
                      this.textContent = 'Read Less';
                    } else {
                      this.textContent = 'Read More';
                    }
                  });
                });
              });
            </script>          
        </div>