Read More & Read Less Function for Collection Page Description in the Dawn Theme

Store Design
, , ,
1

I have recently disabled the collection description as I didn’t want to show long texts there. But I realized that our organic traffic was affected by it.

I have long collection descriptions (for SEO) I would like the collection page to show the first 3 lines and then a ‘Read More’ button so that the description can expand and then a ‘Read Less’ to shorten it again.

Does anyone have a solution for that? (please do not use this post to promote Shopify experts)

2

Find the file called collection-template.liquid and open it.

Locate the line of code that displays the collection description, which should look like this:

{{ collection.description }}

Replace that line of code with the following code:

{% assign desc_length = 200 %}
{% if collection.description.size > desc_length %}
  {{ collection.description | truncate: desc_length }}

  Read More
  
{{ collection.description }}

  Read Less
{% else %}
  
{{ collection.description }}

{% endif %}

This code will truncate the collection description to the first 200 characters and display a “Read More” button

3

The same exact thing was told by chatgpt. It might work on some old themes but this one doesn’t for dawn theme.