> ## Documentation Index
> Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme Editor - Announcement bar

> Style the announcement bar shown at the top of every storefront page.

<Frame caption="Theme Editor > Announcement bar">
  <img src="https://mintcdn.com/twicecommerce/cJlH0EnJIdVT0BaS/images/theme-editor-announcement-bar.webp?fit=max&auto=format&n=cJlH0EnJIdVT0BaS&q=85&s=505b472be9d7b8f63eb38e0cc5fa9509" alt="Announcement bar settings panel in the theme editor" width="1920" height="1080" data-path="images/theme-editor-announcement-bar.webp" />
</Frame>

The Announcement bar panel controls the colours of the slim bar at the very top of the storefront — used for promotions, shipping notices, or short messages. This panel sets the styling only; the bar's text and visibility are set in the Announcement bar content block on the page. Found under **Cards** in the theme editor.

## Colors

| Setting    | Default   | Description                              |
| ---------- | --------- | ---------------------------------------- |
| Background | `#111826` | Background fill of the announcement bar. |
| Text       | `#FFFFFF` | Text colour of the announcement message. |

## CSS variables

<CodeGroup>
  ```css CSS variables theme={null}
  :root {
    --storefront-announcement-bar-background-color: #111826;
    --storefront-announcement-bar-text-color: #FFFFFF;
  }
  ```
</CodeGroup>

## Related

<CardGroup cols={2}>
  <Card title="Home page" icon="house" href="/docs/sales-channels/online-store/theme-editor/pages/home">
    Set the announcement bar text and visibility.
  </Card>

  <Card title="Colors" icon="palette" href="/docs/sales-channels/online-store/theme-editor/settings/colors">
    Define the storefront colour palette.
  </Card>
</CardGroup>