transparent announcement bar

Store Design
, ,

Topic summary

A user needed help making their announcement bar transparent on their Shopify store (stridedrinks.com).

Solution provided:

  • Navigate to Online Store → Theme → Edit Code
  • Locate one of these CSS files: base.css, theme.css, style.css, main.css, or custom.css
  • Add custom CSS code targeting the specific announcement bar section ID

Key CSS changes:

  • Set announcement bar position to absolute with 100% width
  • Apply background: transparent to remove background color
  • Adjust header positioning and transitions for proper layering

The solution included a screenshot demonstrating the code placement. The issue was successfully resolved, with the user confirming the fix worked as intended.

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

Hi,

I’m trying to make my annoucement bar transparent but nothing works. The site’s url is stridedrinks.com.

2

Hi @stride ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

div#shopify-section-sections--22799632531782__announcement-bar {
    position: absolute;
    width: 100% !important;
}

#shopify-section-sections--22799632531782__announcement-bar .utility-bar--bottom-border {
    background: transparent !important;
}

.scrolled-past-header sticky-header {
    top: 0px !important;
    transition: all .3s ease;
}
.section-header .header-wrapper--border-bottom {
    top: 20px;
    transition: all .3s ease;
}

CodingFifty_0-1738350195651.png
CodingFifty_0-1738350195651.png1582×608 134 KB

1 Like
3

Thanks!! It works :slightly_smiling_face:

4

You’re welcome! @stride