How to delete the banner/bar on top of our online store?

Topic summary

A user needs to remove a yellow COVID announcement banner appearing at the top of their Shopify store header. The banner is visible in a provided screenshot but has no removal option in the standard settings.

Proposed Solutions:

Three community members offered CSS-based fixes:

  • Solution 1: Add CSS code to the theme.css file (Assets folder) to hide the banner using display: none on the specific header element

  • Solution 2: Reference to a detailed guide in another community thread addressing the same COVID banner issue

  • Solution 3: Insert custom CSS within a <style> tag in the theme.liquid file before the </head> tag, with a screenshot showing the expected result

All approaches involve editing theme code files rather than using built-in Shopify settings. The issue remains open as the original poster hasn’t confirmed which solution worked.

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

We are trying to delete the yellow covid announcement banner/bar on top of the header. We cant seem to see any option on the settings. Thank you

1 Like

Hi @KarlosPena ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

#header .row.mob-header>div:first-child {
    display: none;
}

Hi @KarlosPena

Please follow up the case from this post: https://community.shopify.com/c/shopify-design/covid-banner-announcement-on-top-of-the-page/td-p/2902370

I have already shared the detail guide for you :heart:

  • Here is the solution for you @KarlosPena
  • Please follow these steps:
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press ‘Save’ to save it

  • This is the result you will get:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.