Add read more / read less button to Dawn theme collection pages

Store Design
,

Topic summary

Adding a collapsible “read more / read less” for long collection descriptions in Shopify’s Dawn theme. The goal is to keep SEO-friendly long text while improving UX on collection pages.

Proposed approach: edit theme code to conditionally truncate the description using Liquid (Shopify’s templating language). One reply suggests replacing occurrences of {{ collection.description }} with a conditional that shows a truncated version (e.g., 500 chars if size > 700) with “Show More >” and a full version with “< Show Less,” and mentions adding code near {% endpaginate %}.

Theme structure caveat: newer Dawn versions use main.collection.banner.liquid (not collection-template.liquid) and may not include {% endpaginate %}. A later reply advises applying the same replacement directly where {{ collection.description }} appears in main.collection.banner.liquid.

Outcome/status: No confirmed working example or final resolution was posted. It’s unclear if additional JavaScript/CSS is needed for true toggling beyond showing truncated vs full text. Code snippets are central to implementing the suggestion, and file paths differ by Dawn version.

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

Hi,

I am using the Dawn theme and would like to add a “read more” “read less” button to my collection page descriptions.

Some of my collection descriptions are too long (for SEO purpose) and I need that toggle button to make it more user friendly.

Thanks in advance

2

@Steve791

Please try this

  • From your Shopify dashboard, click Online store > Actions > Edit code
  • Open the file collection-template.liquid
  • Replace this code (it is duplicated 2 times)
{{ collection.description }}

With this one

{% if collection.description.size > 700 %}

{{ collection.description | truncate: 500, ". . . " }}Show More >

{{ collection.description }}

< Show Less

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

Just before this code

{% endpaginate %}

Add this one
3

Im trying to this with your code but I have different one…

I have main.collection.banner.liquid - don’t have collection-template.liquid

in main.collection.banner.liquid I have one time code:

{{ collection.description }}

and I don’t have: {% endpaginate %}

This is my code from main.collection.banner.liquid

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{ ‘component-collection-hero.css’ | asset_url | stylesheet_tag }}

{%- style -%}
@media screen and (max-width: 749px) {
.collection-hero–with-image .collection-hero__inner {
padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem);
}
}
{%- endstyle -%}

{{ 'sections.collection_template.title' | t }}: {{- collection.title | escape -}}

{%- if section.settings.show_collection_description -%}

{{ collection.description }}
{%- endif -%}

{%- if section.settings.show_collection_image and collection.image -%}

{%- endif -%}

{% schema %}
{
“name”: “t:sections.main-collection-banner.name”,
“class”: “section”,
“settings”: [
{
“type”: “paragraph”,
“content”: “t:sections.main-collection-banner.settings.paragraph.content”
},
{
“type”: “checkbox”,
“id”: “show_collection_description”,
“default”: true,
“label”: “t:sections.main-collection-banner.settings.show_collection_description.label”
},
{
“type”: “checkbox”,
“id”: “show_collection_image”,
“default”: false,
“label”: “t:sections.main-collection-banner.settings.show_collection_image.label”,
“info”: “t:sections.main-collection-banner.settings.show_collection_image.info”
},
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “background-1”,
“label”: “t:sections.all.colors.label”
}
]
}
{% endschema %}

Can you help ?

4

Digging up an older thread but did you ever find a solution to this?

5
{{ collection.description }}

If you have a similar code. You can replace {{ collection.description }} with code mentioned in the solution above and it will work.