Change announcement bar text colour theme studio

Store Design

Topic summary

A user seeks to modify the announcement bar text color on their Shopify store without affecting other site elements.

Proposed Solutions:

Two community members provided similar CSS-based approaches:

  • Navigate to Themes → Edit Code → Assets → base.css
  • Add custom CSS code at the bottom of the file

CSS Modifications Include:

  • .announcement-bar__message - controls text color (suggested: white #fff or #ffffff)
  • .announcement-bar or .announcement-bar.color-background-2.gradient - controls background color (examples: red or #000000)

Both responses recommend the same technical path but with slightly different CSS selectors and color values. The discussion remains open with no confirmation from the original poster about implementation success.

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

I want to change the text color in the announcement bar without changing the rest of my website. Any idea how?

Website:https://www.auntclothing.com/search

Password:auntsoon

Thanks in advance!

Screenshot 2022-11-06 at 17.00.28.png
Screenshot 2022-11-06 at 17.00.28.png1918×226 12.1 KB

1 Like
2

hi @Zakariatheguy

To change the style of the announcement bar
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

/* change background of the section */
.announcement-bar {
background: red;
}
/* set gradient for the message and change font size */
.announcement-bar__message {
color: #fff;
}
1 Like
3

@Zakariatheguy

yes, please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
.announcement-bar.color-background-2.gradient {
    background: #000000;
}
.announcement-bar__message {
    color: #ffffff;
}