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

Store Design
,
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.