Dawn theme -Announcement bar. User issues, maybe?

Store Design
,

Topic summary

A user reports that their announcement bar suddenly stopped displaying correctly—it now shows a black background instead of the intended transparent/pill-shaped design.

Proposed Solutions:

Three community members offered CSS-based fixes:

  • Solution 1: Add custom code to theme.liquid file (above </body> tag)
  • Solution 2: Insert CSS into base.css targeting .announcement-bar__announcement with black background property
  • Solution 3: Add CSS to base.css/style.css/theme.css (depending on theme structure) using .announcement-bar-slider .slider with background: transparent !important;

All solutions involve accessing the theme code editor through Online Store → Themes → Edit Code.

Status: Multiple solutions provided with screenshots demonstrating expected results. The issue appears solvable through CSS customization, though the root cause of the sudden change remains unaddressed. Users are encouraged to mark helpful responses as solutions.

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

I am having a new issue, kinda out of the blue. THe announcement bar no longer looks correct. It is supposed to have the black background but now has like the pill look to it. Any suggestions?

www.nope-rope.com

2 Likes
2

Hey @nope-rope

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1728667931891.png
Moeed_0-1728667931891.png1903Ă—728 150 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello @nope-rope

  • Go to Online Store → Theme → Edit code.
  • Find the file base.css and paste the code below at the bottom of the file.
.announcement-bar__announcement {
background: black;
}

devcoders_0-1728668363769.png
devcoders_0-1728668363769.png1141Ă—164 10.1 KB

4

Hi @nope-rope

Try this one.

  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:
.announcement-bar-slider .slider {
    background: transparent !important;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!