How can I add more content to collection descriptions without making them too long?

Store Design

Topic summary

A user is attempting to implement a “Show More/Show Less” toggle for collection descriptions to display extended content without overwhelming the page.

Current Issue:

  • Added Liquid code to truncate descriptions over 50 characters and provide expand/collapse functionality
  • The implementation has broken the display, as shown in attached screenshots
  • Code appears reversed/garbled in the post (likely a formatting error)

Technical Details:

  • Using Liquid template logic with conditional statements (if collection.description.size > 50)
  • Attempting to truncate text to 30 characters with “…” and toggle buttons
  • Code includes collection.description output and conditional rendering

Follow-up Question:

  • User asks how the <split> tag works, suggesting they may need clarification on the syntax or approach

The discussion remains open with no solution provided yet. The reversed text in the code snippet may indicate a copy-paste or encoding issue that’s contributing to the problem.

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

I want to add more content to our collection descriptions but don’t want themn to be too long on the frontend. Tried to add code below and it’s fudged it:

ChrisW3_0-1712242298837.png
ChrisW3_0-1712242298837.png1227×326 27.1 KB

ChrisW3_1-1712242311389.png
ChrisW3_1-1712242311389.png1219×469 43 KB

Preview Link:

https://czc7uit6obrczel4-40186413217.shopifypreview.com

Code Added:

collection-template.liquid

{% if collection.description.size > 50 %}
  
  {{ collection.description | truncate: 30, ". . . " }}Show More >
  

  
  {{ collection.description }}
  
< Show Less
  

  {% else %}
    {{ collection.description }}
{% endif %} 

collection.liquid
2

Hi how does the tag work?