How can I make my symmetry theme announcement bar transparent?

Store Design

Topic summary

A Shopify store owner using the Symmetry theme wants to make their blue announcement bar transparent.

Solution provided:

  • Navigate to Online Store > Themes > Edit code
  • Open the styles.css file in the Asset folder
  • Add custom CSS code targeting div#shopify-section-announcement-bar with background: transparent

Follow-up adjustments:

  • The transparent bar initially positioned too close to the main navigation menu
  • Additional CSS code provided to add spacing using top: 1rem on the page header element
  • User also asked about repositioning social media icons to the right of the USD currency selector
  • Advised to use the theme’s built-in Customize editor for the announcement section settings rather than custom code

Note: A user with the Impact theme asked if the same solution applies, but their theme lacks a styles.css file, suggesting theme-specific differences in implementation.

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

My theme is symmetry. I want to make the blue announcement bar become transparent. How can I edit the code. Thank you!

截屏2023-03-20 上午9.44.37.png
截屏2023-03-20 上午9.44.37.png1251×217 204 KB

1 Like
2

Hi @Kathy518 ,

Can you provide your website so we can provide a code specific for you? Thank you

3

https://phantomgogo.com/

4

Hi @Kathy518 ,

Thank you for the information. You can try the code below to have your announcement bar transparent.

  1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
  2. Find the Asset folder, and open the styles.css file
  3. Add the code below at the very end of the file
div#shopify-section-announcement-bar {
    position: absolute;
    height: 100px;
    width: 100%;
    display: block;
    background: transparent;
}

div#section-id-announcement-bar {
    background: transparent;
    color: #fff;
}

.announcement-bar__left.desktop-only .social-custom > img {
    filter: invert(1);
}

See the result here

made4Uo_0-1679337863557.png
made4Uo_0-1679337863557.png1906×811 216 KB

5

Thank you for the help. It works. But I saw the position is very close to the navigation (main menu), how to change it? Thanks

6

Hi @Kathy518 ,

Please add the code below to provide space.

  1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
  2. Find the Asset folder, and open the styles.css file
  3. Add the code below at the very end of the file
div#pageheader.pageheader--transparent {
    top: 1rem;
}
7

Thanks, it works. Also, I have one more questions about this announcement bar. If I want to put the social media icon to the right, just before the USD. How do I add the code?

8

Hi @Kathy518 ,

It looks like you can change placement using your theme editor. Please utilize those before using the code.

From you Admin page > Go to Online store > Themes > Click Customize. Check the announcement section

9

Got it. Thank you for your help. Appreciated it!

1 Like
10

Hi, i also want to make my announcement bar transparent but I do not have the styles.css file, my theme is the impact theme?