How to Add "Read More / Read Less" for Collection Description (Dawn Theme) & Center Align It

[crepscity]

Hi everyone,

I’m trying to add a “Read More / Read Less” toggle to the collection description on my Dawn theme store. Currently, the full description is always visible, but I want to:

• Show only two lines of text initially.
• Make the third line blurry.
• Include a “Read More” button that expands the full description when clicked.
• Include a “Read Less” button to collapse it back.
• Center align the description text and title.

I tried some JavaScript and Liquid solutions, but either the description stays fully visible or the button doesn’t toggle properly. Also, the text alignment is off.

Has anyone successfully implemented this on the Dawn theme? Any code snippets or guidance would be really helpful!

Here is a photo example of what I’m trying to achieve:

Website: crepscity.com

Thanks in advance!

[Arif_Shopidevs]

Can you share site url where you add so that it is each to give answer quickly

[Arif_Shopidevs]

@crepscity

To add a “Read More” button to the collection description, follow these steps:

1. For your store design ->edit themes

2. Open the sections/main-collection-banner.liquid section.

3. Look for the SectionHeader__Description class within that section.

4. Replace the existing code with the one provided below.

Let me know if you need help with the code or further adjustments!

{%- if section.settings.show_collection_description -%}
        {% if collection.description.size > 200 %}
          
            {{ collection.description | truncate: 200, '. . . ' }}
            Read More
          

          
            {{ collection.description }}
            Read Less
          

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

        {% endif %}
      {%- endif -%}

add this js at the end of this page

document.addEventListener("DOMContentLoaded", function() {
    const readMoreLessButtons = document.querySelectorAll('.read_more_less');
    readMoreLessButtons.forEach(function(button) {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const fullDescription = document.querySelector('.product-description-full');
            const shortDescription = document.querySelector('.product-description-short');

            if (fullDescription && getComputedStyle(fullDescription).display !== 'none') {
                fadeOut(fullDescription, function() {
                    fadeIn(shortDescription);
                });
            } else {
                fadeOut(shortDescription, function() {
                    fadeIn(fullDescription);
                });
            }
        });
    });

    function fadeOut(element, callback) {
        element.style.opacity = 1;

        (function fade() {
            if ((element.style.opacity -= 0.1) < 0) {
                element.style.display = "none";
                if (typeof callback === "function") callback();
            } else {
                requestAnimationFrame(fade);
            }
        })();
    }

    function fadeIn(element) {
        element.style.opacity = 0;
        element.style.display = "block";

        (function fade() {
            let val = parseFloat(element.style.opacity);
            if (!((val += 0.1) > 1)) {
                element.style.opacity = val;
                requestAnimationFrame(fade);
            }
        })();
    }
});

Then it will look like

Hope it solved your issue. If it worked do not forget to marked it as solved and like the solution.

Thank you

[Theishenriksen]

Hey @crepscity I have had success multiple times when following this former guide by @dmwwebartisan
With minor tweaking, it also works for other themes
https://community.shopify.com/post/1892646

[crepscity]

Hi there,

I have a few questions:

1. I can’t find SectionHeader__Description in the code. What line is it on?
2. When you say “Add this JS at the end of this page,” which page do you mean? Do I need to create a custom JS file?
3. After adding the code on your end:
   • Only two lines of text should show initially, and the third line should be blurry.
   • The title and text should be centred on desktop and mobile.
   • “Read More / Read Less” should be black, not blue.

[Arif_Shopidevs]

sections/main-collection-banner.liquid search in your theme file then you will find that code.

[crepscity]

yes i found that file however, your saying SectionHeader__Description?

Do i replace the hole code in that file?

Also, did you get the chance to see the errors i highlighted?

Thank you in advance.

[Arif_Shopidevs]

Hello, If the code is working for you then we can help

In liquid file if you set the character limit it will increase or decrease the size of width

[crepscity]

You said Look for the SectionHeader__Description class within that section? this is no where to be found in main-collection-banner.liquid.

Can you highlight it and share it here so i know exactly where to replace the code with the new one

[crepscity]

Does any have a solution to this. I want it to look exactly how you see it in the below images.

Thank you in advance.

[Arif_Shopidevs]

@crepscity

{% 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 -%}
        {% if collection.description.size > 200 %}
          {{ collection.description }}

          
        {% else %}
          {{ collection.description }}
        {% endif %}
      {%- 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"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    }
  ]
}
{% endschema %}

Please use this code in your sections/main-collection-banner.liquid it will solve your issues.

If you found this helpful, we’d really appreciate it if you could give it a thumbs up and mark it as the solution!