Collection title text changes color when showing collection description - Dawn theme

Technical Q&A
, , , ,

Topic summary

A user encountered styling issues when enabling collection descriptions in their Shopify store using the Dawn theme. The problem manifested in two ways: the collection title changed to green, and the website appeared cropped around the edges.

Root Cause Identified:
The h1 and h2 headers were styled with a green color. When the collection description was added, it became a header element and inherited this green styling.

Initial Solution Provided:
A CSS fix was suggested to override the color:

h1.collection-hero__title {
    color: #000;
}

This resolved the title color but similar issues persisted in the footer, and the cropping problem remained.

Final Resolution:
The user discovered that problematic HTML code within the collection description itself was causing both issues. Cleaning up this HTML code resolved all styling problems. The issue persisted across different themes (Dawn and Craft), confirming the collection description HTML was the source rather than theme-specific code.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hey guys

I want to start using collection descriptions for SEO purposes. When I toggle “Show collection description” it changes the color of my collection title and sort of crops the edges of the entire website?

Can anyone help with this? We are using the Dawn theme

I have tried showing my issue in the pictures. (Before on the left vs after on the right)

Before.png
Before.png874×768 60.8 KB

After.png
After.png896×860 70.2 KB

1 Like
2

Hi @al00

Please, share your store URL with the description of collection. Thanks!

3

The store URL is medomhu.dk and you can see the issue on the collection page right here: https://medomhu.dk/collections/kopreoler

In terms of the description of collection - I just put this as a test as I haven’t written the actual description yet: “Her kan du se vores kopreoler”

4

Thanks for the info, your h1 and h2 header was set the color of green

Made4uoRibe_0-1738785377394.png

So when you add the description it become the header so it color green.

Possible if you add some h1 and h2 in your store it will be also color green. Check this one to change the color.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
h1.collection-hero__title {
    color: #000;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

I see - that worked.

But I have the same issue in the footer. And the website still get’s cropped around the edges…

Skærmbillede 2025-02-05 kl. 21.03.47.png
Skærmbillede 2025-02-05 kl. 21.03.47.png1400×242 8.4 KB

6

Also, I tried changing to a different free theme (craft) and it still does the same thing? I thought the code would be reset when getting a new theme?

7

I fixed it!

Somehow the HTML in the collection description had some different code, which caused this to happen.