Read more for collection description Enterprise theme

Store Design

Topic summary

Goal: Add a “Read more”/“Read less” toggle to the collection description in the Shopify Enterprise theme.

Proposed approach: Use custom code, primarily JavaScript, to toggle expanded/collapsed text. The responder offers to implement it if needed.

Details shared: A “base” example was provided with Liquid/HTML looping over products and conditionally showing a “Read More” when product.description.size > 100. Basic CSS for truncation (overflow hidden, white-space: nowrap) and link styling was included.

Key gaps: The JavaScript block was left empty, so the toggle logic is missing. The example targets product descriptions, not the collection description specifically, meaning it requires adaptation to the Enterprise theme’s collection template/section.

Notes: Code snippets are central to the solution, but they are incomplete and require theme-specific editing rather than copy-paste.

Status: Unresolved. Next step is supplying or implementing the JavaScript and adjusting the code to the collection description context in the Enterprise theme; the responder is available to help tailor and implement it.

Summarized with AI on December 29. AI used: gpt-5.
1

Hi there!

I would like to add a Read more button on the collection description in Enterprise theme. How can I achieve that?

Thank you!

2

Hi @fcapatina With the help of custom code you will be able to achieve this, you need to add the Javascript code in your code so that you will be able to achieve the Read more and read less functionality.

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

3

What code?

4

Hi @fcapatina I am talking about the custom code through which you can accomplish this functionality I can provide you the base code, if you need it, but you need to edit the base code according to your theme code, just copy and pasting the same code will not work.

HTML Code:

{% for product in collection.products %}
  
    ## {{ product.title }}
    
      {{ product.description }}
    

    {% if product.description.size > 100 %}
      Read More
    {% endif %}
  

{% endfor %}

Javascript Code:

CSS Code:

.description {
  overflow: hidden;
  white-space: nowrap;
}

.ellipsis {
  margin-left: 5px;
}

.read-more {
  color: blue;
  cursor: pointer;
}

Note: You need to edit the base code according to your theme code, just copy and pasting the same code will not work.

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil