How to change color of announcement bar in Dawn theme

Store Design

Topic summary

Goal: change the Dawn theme’s announcement bar color beyond the default palette.

  • Initial guidance: use the Theme Customizer to set the announcement bar’s color scheme (e.g., “Accent 2”), then modify that accent color in the theme settings. This leverages Dawn’s built-in color schemes.
  • User need: a custom pink not present in the default colors. The built-in approach was unclear for this use case.

Solution implemented:

  • Add a CSS rule in base.css targeting the announcement bar to set a custom background color (e.g., #E9CED9) with !important to override theme styles. The OP and another user confirmed it worked.

Context:

  • Dawn is a Shopify theme; the announcement bar is the top banner. base.css is the theme’s stylesheet. Screenshots were shared to illustrate the Customizer color scheme settings; the CSS snippet was central to the fix.

Open question:

  • How to style two announcement bars with different colors. No answer provided yet; discussion remains partially open.
Summarized with AI on January 14. AI used: gpt-5.
5

Hii, @melimiya
Paste this code on top of the base.css file.

.announcement-bar.color-background-1.gradient {
    background-color: #E9CED9 !important;
}

Thank You.

4 Likes