How to change announcement bar text color in DAWN theme?

Store Design

Topic summary

Issue: User needs to change announcement bar text color to white in the Dawn theme without affecting other text elements on the site.

Solution Provided:

  • Add custom CSS code to target the announcement bar specifically:
.announcement-bar__message {
  color: #fff !important;
}

Implementation Methods:

  • Initially suggested: Add code to bottom of base.css file via Theme Editor → Edit Code → Assets
  • Recommended approach: Use the Custom CSS option directly in the announcement bar section within Shopify’s Theme Customization interface (no code editing required)

Outcome: Multiple users confirmed the solution works successfully. One user asks about additional customization for font and size, but this remains unanswered.

Note: The conversation contains reversed/mirrored text that has been interpreted for this summary.

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

Theme settings only has one color for text. And if I change that to white, none of my other texts would be visible. I only want white text on announcement bar.

Please advise thank you!

Screen Shot 2023-02-24 at 1.40.15 PM.png
Screen Shot 2023-02-24 at 1.40.15 PM.png1616×218 19.2 KB

2

Hi @chelsea914 ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

.announcement-bar__message {
    color: #fff !important;
}

I hope it would help you
Best regards,

Richard | PageFly

1 Like
3

Hi Richard,

I added it to the bottom but the announcement text is still brown. hasnt changed.

4

Screen Shot 2023-02-24 at 5.27.37 PM.png
Screen Shot 2023-02-24 at 5.27.37 PM.png1122×418 99.9 KB

5

Hi @chelsea914 ,

Maybe there’s something wrong with your bottom css.
You can paste my code at the TOP of the base.css file.

I hope it would help you
Best regards,

Richard | PageFly

1 Like
6

I used the code and it worked perfectly through the custom CSS option in the Shopify Theme Customization window.

I added this to the announcement bar custom CSS box by clicking on the announcement bar section then when the announcement bar section heading is displayed, I clicked on that and you will see the CSS customization box in the white panel on the right. I pasted the code and the text immediately showed up as white. Perfect!!!

  • Now is there a way to keep this and change the font and size? :blush:
7

Thank you so much @PageFly-Richard ! This worked for me DAWN theme! Much appreciated!