# Announcement bar section

The **Announcement bar** is a top-of-page section used to highlight promotions, shipping offers, or important store updates. It supports multiple message types, layouts, and display targeting options.

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FQpj2qTKbiXnww9YvvXgn%2Fannouncement-bar%20.jpg?alt=media&#x26;token=e59dd17f-fba7-48bd-9ad5-12fa7419984a" alt=""><figcaption></figcaption></figure>

## Section settings

<table><thead><tr><th width="259.45562744140625">Settings</th><th width="155.68829345703125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Show border</td><td align="center"><code>checkbox</code></td><td>Adds a thin border around the announcement bar for visual separation.</td></tr><tr><td>Layout</td><td align="center"><code>select</code></td><td>Choose between <code>Slider</code> (rotating messages) or <code>Scrolling text</code> (Marquee) for continuous movement.</td></tr><tr><td>Autoplay speed (Slider)</td><td align="center"><code>range</code></td><td>Controls how long each message appears before sliding to the next.</td></tr><tr><td>Text alignment (Slider)</td><td align="center"><code>select</code></td><td>Aligns text <code>Left</code> or <code>Center</code> within the bar.</td></tr><tr><td>Show arrows (Slider)</td><td align="center"><code>checkbox</code></td><td>Adds navigation arrows to switch between messages manually.</td></tr><tr><td>Autoplay speed (Scrolling text) </td><td align="center"><code>range</code></td><td>Controls how fast the text scrolls across the screen.</td></tr><tr><td>Space between messages (Scrolling text)</td><td align="center"><code>range</code></td><td>Sets spacing between repeated messages in the scrolling animation.</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Adjusts announcement text size. Applies when content is set to Paragraph.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Applies a predefined theme color palette.</td></tr><tr><td>Border</td><td align="center"><code>color</code></td><td>Custom border color and transparency.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top / Bottom</td><td align="center"><code>range</code></td><td>Adjusts spacing above / below the announcement text.</td></tr></tbody></table>