help on making announcement bar transparent

Store Design
,

Topic summary

A user seeks help making their announcement bar transparent on their Shopify store.

Two solutions provided:

  1. First approach: Navigate to Admin → Online Store → Themes → Edit code → Assets folder → base.css. Add CSS targeting .announcement-bar.color-inverse-gradient with background: transparent and adjust #MainContent margin-top to account for header height.

  2. Second approach: Similar navigation path, but add CSS to base.css targeting .announcement-bar with background: transparent !important and .color-gradient with color: #000 !important.

Both responses provide step-by-step instructions for accessing the theme code editor and inserting custom CSS. The discussion remains open with no confirmation from the original poster about which solution worked.

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

Hi! Im triyinh to make my announcement bar transparent buy had no luck

Right now is black.

My site is https://www.amiemx.com/

Thank you guys!

1 Like
2

Hi @arkenciel

You use the code below.

  1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
  2. Go to Asset folder and open the base.css file
  3. At very end of the code, add the code below
main#MainContent {
    margin-top: var(--header-height);
}

.announcement-bar.color-inverse.gradient {
    background: transparent;
}
3

Hello @arkenciel

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.announcement-bar {
    color: #000 !important;
}
.gradient {
    background: transparent !important;
}