Add Read More rich text or button to "collection page banner" on dawn theme 7.0.1

[Montique]

some of our collection descriptions are very long and require a read more button or rich text added, is this possible on dawn theme 7.0.1?

here is a link to my preview: https://swus24ixs6mrnxc1-19884295.shopifypreview.com

[SmallTask]

Hi @Montique ,

Can you provide a screenshot of which section you want to add the read more button

[BSS-Commerce]

Hi @Montique

Please follow these steps:

1. Login to your Shopify account and go to “Online store>Themes”

2. Click on the “Action” button and go to “Edit code”

3. Find “theme.liquid” page in the Layout section and open the file

4. Copy the below code and paste the above tag

5. Select main-collection-banner.liquid file from the search file

6. Find ” {{ collection-description }}”

7 . Replace this code with the below code

            

              {{ collection.description }}
            

            Read more...
          

8. Save the file and See the results on the collection page.

I hope that it will work for your site

[Montique]

Thank you for the code, it has placed the rich text but when I click on it, it jump to the top of the page instead of expanding

Here is the link: https://kz15z26taua5own8-19884295.shopifypreview.com

[Montique]

hello BSS Commerce’s code can place the rich text correctly but when we click on the read more it will jump to the top of the page. maybe i have done something wrong in my code or maybe there is a code missing?

[Montique]

thank you for the code it will place the rich text correctly but when we click on the read more it will jump to the top of the page. maybe I have done something wrong in my code or maybe there is a code missing?

[BSS-Commerce]

Hi @Montique

I installed the Dawn Theme 7.0.1 theme and found the solution for you. Please follow these steps:

1. Access to your Shopify Admin > Theme > Edit Code

2. Find any CSS file, it should be base.css or global.css

3. Find “theme.liquid” page in the Layout section and open the file.

4. If you were doing the direction at on, you need to change the code below by new code or please add a new code above tag

• Old Code:

• New code:

5. Select main-collection-banner.liquid file from the search file

6. If you were doing the direction at on, you need to change the code below by new code or Find ” {{ collection-description }}” and replace it with new code

• Old code:

            

              {{ collection.description }}
            

            Read more...

• New code:

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

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

{{ collection.description }}

 Show Less

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

7. Save the file and See the results on the collection page.

I hope that it will work for you.

[Montique]

thank you @BSS-Commerce half of the code works but I think the issue is my main-collection-banner.liquid has the below code:

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

{{ collection.description }}

{%- endif -%}

if i insert your code at the {{ collection.description }} it will repeat my description and stretch the image (text can flow beyond the image if possible)

also we have updated to dawn theme 8.0.0

with the Show more state:

with the read less state:

[brindle_staffy]

Hi, Did you find a working solution for this? Trying to get a read more/less code working on Dawn theme & so far can only fine enough code to get the ‘Read more’ to work but can’t find anything with ‘Read less’ to work.