How do I change my announcement bar details?

Store Design

Topic summary

Goal: Change announcement banner text, size, and color to resemble Sporty&Rich; two screenshots were provided to show current vs. desired look.

What to change where:

  • Text and colors: Use the theme customizer. If the theme exposes options, you can adjust background color and text color there.
  • Font size: Requires custom CSS. Add it in the custom.css file accessible at the end of the Section settings in the theme customizer.

Key CSS provided:

  • .announcement .rte–lock-font * { font-size: 20px !important; } (adjust the 20px value as needed)

Outcome:

  • The original poster confirmed the CSS solution worked. Issue resolved.

Notes:

  • Images were included to illustrate the current announcement bar and the target style, but no further visual implementation details were required beyond the CSS and theme settings.
Summarized with AI on December 18. AI used: gpt-5.
1

Hello, how do I change my announcement banner text, size, and color? I attached two photos. One is my announcement banner (Suvski website) and the other one is an example of how I want my banner to look like (Sporty&Rich website).

I want it to look like the Sporty&Rich announcement bar. Can anyone help? Thanks

Screen Shot 2024-09-22 at 7.45.58 PM.png
Screen Shot 2024-09-22 at 7.45.58 PM.png2880×1424 353 KB

Screen Shot 2024-09-22 at 7.46.14 PM.png
Screen Shot 2024-09-22 at 7.46.14 PM.png2880×1556 446 KB

2

Hello @iceymonski

You can change text from the customization of theme. If your theme has options to change color and background, then you also able to change the background color and color as well. But to change the font size of the text, you need to add custom css for that.
If you want to change the font size of the text, just copy below css and paste it in the custom.css which you can see at the end of the section settings in customization.

.announcement .rte--lock-font * {
  font-size: 20px !important; /* change font size according to your requirement */
}

Hope this solution works best for your issue.

1 Like
3

Hello. Thank you that worked :slightly_smiling_face: