Add collapsible tab/ show more to collection description

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.

Thanks works great!