Add collapsible tab/ show more to collection description

Technical Q&A

Topic summary

A user sought to add a collapsible “show more” button to collection descriptions in Shopify’s Dawn theme, ideally triggered when text exceeds a certain length. They wanted to modify the main-collection-banner.liquid file but had limited coding experience.

Solution Found:

  • The user discovered a working solution from another community thread by @Justin-Smith
  • Implementation involved replacing {{ collection.description }} in main-collection-banner.liquid with code that truncates the description and adds a “Read More” link
  • The solution includes jQuery script for toggle functionality and CSS for cursor styling
  • Code snippets show truncation at 10 words with fade-in/fade-out effects on click

Additional Question:
The user also wanted the collection banner to display like the image-banner.liquid (showing collection description below the image) while maintaining the banner type in collection-template.json, though they believed they could solve this independently.

Multiple users confirmed the solution worked successfully for them.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

So I just started using Shopify and have been stuck on this problem for the last few days. I’m aware that I posted a similar question yesterday but I’ve asked a moderator to delete it since I believe this formulating below is more explanatory of the issue.

I’m using Dawn theme, and have very limited knowledge in coding. Only super-basic JS experience.

So I got one main concern which I desperately been searching answers for, and that is:

What I want to do is add a “show more button” / collapsible tab to my collection descriptions, preferably by default if text contains a certain amount of letters. I’m guessing that i need to change some code in the file "main-collection-banner.liquid".

If someone could provide a helping hand i would be super grateful.

Then I’ve got another “extra follow-up” question. I think i would be able to figure this one out myself but if anyone have got the possibility to answer this as well I would really appreciate it:

I want the collection banner to be like the image-banner.liquid, but also include the collection description beneath the image. I’ve kinda solved it by simply changing banner type in the collection.json - template, but that excludes the collection description.

If there is no relatively simple solution for this I’m aware that I just can add a rich text beneath instead, and copy paste the desc.

2

Finally found a solution thanks to this legend @Justin-Smith answers in this thread: https://community.shopify.com/c/shopify-design/help-requested-to-add-quot-read-more-quot-and-to-collection/td-p/376239

In main-collection-banner.liquid file, i replaced

{{ collection.description }}

with:

<div id="truncated">{{ collection.description | truncatewords: 10, "... <a class='read-more-collection' data-no-instant>Read More</a>" }}</div>
<div id="fullDescription" style="display: none">{{ collection.description | append: " <a class='read-more-collection' data-no-instant>Read Less</a>" }}</div>

Then added this at the bottom, right before the schema starts:

<style>
  .read-more-collection:hover{cursor:pointer}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
  var jq224 = jQuery.noConflict(true);
  jq224('.read-more-collection').on('click', function(e){
    e.preventDefault();
    if (!jq224('#fullDescription').is(':visible')){
      jq224('#truncated').fadeOut(300, function(){ 
        jq224('#fullDescription').fadeIn(500);
      });
    }else{
      jq224('#fullDescription').fadeOut(300, function(){ 
        jq224('#truncated').fadeIn(500);
      });
    }
  });
</script> 
2 Likes
3

Thanks works great!

4

This worked out perfect! Thanks!