> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/set-up-your-store/header-group/announcement-bar.md).

# Announcement bar

The **Announcement bar** is the narrow strip that sits above the header on every page of your store. Use it for short messages that every visitor should see: a running promotion, a free shipping threshold, delivery cut-off dates, or a holiday notice. You can rotate several messages as a carousel or scroll them as a marquee, and you can limit the bar to the homepage or hide it on mobile when space is tight.

<figure><img src="/files/rRQvFxERwiWojSih6yvI" alt=""><figcaption></figcaption></figure>

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, open the **Header** group.
3. Click **Announcement bar**.
4. To change a message, click one of the **Text** blocks nested under the section.
   {% endhint %}

*Result:* the announcement bar settings open on the right and the preview jumps to the top of the page.

## 1. Section settings <a href="#section-settings" id="section-settings"></a>

### General settings <a href="#general-settings" id="general-settings"></a>

<figure><img src="/files/NSL1i5A8rpLSNzYHFuw6" alt=""><figcaption></figcaption></figure>

<table data-search="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>How far the strip and its message reach across the screen.</p><ul><li><strong>Stretch width</strong>: runs the whole browser width whatever screen the visitor is on.</li><li><strong>Fixed width</strong>: lines the message up with the rest of your page content, using the width set in <strong>Theme settings > Layout</strong>. Pick this when you want the bar to feel part of the page rather than a separate band.</li><li><strong>Full width</strong>: fills the screen edge to edge and resizes with it.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>The background and text colors of the strip, taken from the schemes in <strong>Theme settings > Colors</strong>. Pick one that contrasts with the header, otherwise the two bands blur into each other and the message is missed.</td></tr><tr><td><strong>Show color scheme on inner pages</strong></td><td>Lets the strip use a second set of colors everywhere except the homepage, so a bold campaign band on the homepage can turn quiet once shoppers are browsing products.</td></tr><tr><td><strong>Inner page color scheme</strong></td><td>The colors used on those inner pages. Only applies when <strong>Show color scheme on inner pages</strong> is turned on.</td></tr><tr><td><strong>Show close button</strong></td><td>Lets shoppers dismiss the message. Once closed, it stays hidden across pages and future visits. Leave it off for notices that must stay visible, such as a delivery cut-off date.</td></tr><tr><td><strong>Show only on homepage</strong></td><td>Keeps the message on the homepage and hides it everywhere else, so shoppers deep in a product or checkout flow are not pulled back into a campaign.</td></tr><tr><td><strong>Enable on mobile</strong></td><td>Keeps the message visible on phones. Turn it off when it runs to two lines, since it pushes your logo and hero image down a small screen.</td></tr><tr><td><strong>Type</strong></td><td><p>How several messages share the strip when you have more than one Text block.</p><ul><li><strong>Carousel</strong>: the messages take turns, one at a time. Use it when each message deserves a moment on its own.</li><li><strong>Marquee</strong>: the messages scroll sideways without stopping. Use it when constant movement is what you want to catch the eye.</li></ul></td></tr></tbody></table>

### Carousel settings <a href="#carousel-settings" id="carousel-settings"></a>

<figure><img src="/files/VpCeWSUtrU2X96pAaPsu" alt=""><figcaption></figcaption></figure>

| Setting                 | Description                                                                                                                                             |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show navigation**     | Adds arrows shoppers can click to move to the next or previous message themselves, instead of waiting for the rotation.                                 |
| **Auto-change slide**   | Rotates the messages on their own. Leave it off when a message needs time to read, or when you would rather shoppers step through them with the arrows. |
| **Change slides every** | How many seconds each message stays on screen before the next one takes over. Only applies when **Auto-change slide** is on.                            |

### Marquee settings

<figure><img src="/files/2mtWFrWHvK04a2GmzD2D" alt=""><figcaption></figcaption></figure>

| Setting                 | Description                                                                                                    |
| ----------------------- | -------------------------------------------------------------------------------------------------------------- |
| **Speed**               | Controls how fast the marquee content scrolls across the screen. Higher values make the animation move faster. |
| **Space between items** | Sets the horizontal spacing between marquee items, helping improve readability and visual balance.             |

### Content settings <a href="#content-settings" id="content-settings"></a>

<figure><img src="/files/Cy9V2y5t5edJgGjcdt86" alt=""><figcaption></figcaption></figure>

| Setting       | Description                                                                                                                                                                           |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Uppercase** | Sets the message in capital letters, which reads louder in a thin strip. Long sentences get harder to scan in capitals, so keep the wording short if you turn this on.                |
| **Size**      | How large the message appears: **Small**, **Medium**, or **Large**. Use **Large** when the strip carries your main promotion, **Small** for a standing notice such as delivery times. |

### Section padding <a href="#section-padding" id="section-padding"></a>

<figure><img src="/files/P82y1g6q5WeWtieT9dMc" alt=""><figcaption></figcaption></figure>

| Setting    | Description                                                                                                            |
| ---------- | ---------------------------------------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the message inside the strip. Increase it when the text sits too tight against the top of the screen. |
| **Bottom** | Adds space below the message, which is what separates the strip from the header underneath it.                         |

## 2. Block settings <a href="#block-settings" id="block-settings"></a>

### Text <a href="#text" id="text"></a>

Each **Text** block is one announcement. Add a block for every message you want in the rotation, and remove blocks you no longer need.

<figure><img src="/files/J5KUQ24oU8bIJgx0F3pO" alt=""><figcaption></figcaption></figure>

| Setting  | Description                                                                                                               |
| -------- | ------------------------------------------------------------------------------------------------------------------------- |
| **Text** | The message shoppers read in the strip. Keep it to one line, such as a free shipping threshold or the last day of a sale. |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* The bar appears above the header on every page, unless **Show only on homepage** is on.
* With **Type** set to **Carousel**, each Text block becomes one slide; with **Marquee**, the messages scroll continuously.
* If a shopper closes the bar with the close button, the page content shifts up by the height of the bar.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Header group](/velare/set-up-your-store/header-group.md): how this section sits together with the header
* [Header](/velare/set-up-your-store/header-group/header.md): logo, menu, and icons directly below the announcement bar
* [Colors](/velare/set-up-your-store/colors.md): where the color schemes are defined
* [Layout](/velare/set-up-your-store/layout.md): the page content width used by **Fixed width**


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/set-up-your-store/header-group/announcement-bar.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.