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

# Announcement bar

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

The **Announcement Bar** section allows you to display important store updates, promotional messages, shipping information, countdown offers, navigation links, and social media icons at the top of your store.

You can add multiple **Announcement** blocks to display different messages. When **Auto rotation** is enabled, the announcement messages automatically rotate.

## How to add a Announcement bar section

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

1. Open **Online Store → Themes → Customize**.
2. In the **Header** group, select **Announcement bar**.
3. Configure the announcement bar settings, including **auto rotation, countdown timer, button, secondary menu, social media icons, and color scheme**.
4. Click **Add Announcement** to add one or more announcement messages.
5. Enter the **Text** for each announcement.
6. Select a **Link** to redirect customers when they click the announcement.
7. Add additional **Announcement** blocks as needed.
8. Click **Save** to apply your changes.
   {% endhint %}

## Section settings overview

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Auto rotation</td><td>Enable this toggle to automatically rotate through multiple announcement bar messages if more than one is added.</td></tr><tr><td>Countdown</td><td><p><strong>Enable countdown timer</strong><br>Enable this option to display a countdown timer in the Announcement Bar.</p><p></p><p><strong>Timer position</strong></p><p> Select the position of the countdown timer within the announcement bar:<br>• <strong>Start</strong> – display it before the announcement content<br>• <strong>Next</strong> – display it after the announcement content.<br><br><strong>End date</strong><br>Enter the future date when the countdown timer should end. Use the required date format: <strong>YYYY/MM/DD</strong>. Example: <code>2026/12/26</code>.</p></td></tr><tr><td>Button</td><td><p><strong>Label</strong> </p><p>Enter the text you want to display as a button or link in the Announcement Bar.</p><p></p><p><strong>Link</strong> </p><p>Select or enter the URL where customers will be redirected when they click the button.</p></td></tr><tr><td>Secondary menu</td><td><p><strong>Menu</strong> </p><p>Select a menu to display as a secondary navigation menu in the Announcement Bar. Select any existing menu from your store’s navigation settings. </p><p></p><p><strong>Text style</strong> </p><p>Choose how the secondary menu text should be displayed:<br>• <strong>Capitalize</strong> – Capitalizes the first letter of each word<br>• <strong>Uppercase</strong> – Converts the entire text to uppercase</p></td></tr><tr><td>Show social media icons</td><td><p>Enable this option to display social media icons in the Announcement Bar.</p><p>The displayed icons are based on the social media links configured in your theme settings. </p><p></p><p><em><strong>Note</strong>: This settings only visible when secondary menu is not selected.</em></p></td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li><li>Scheme 7</li></ul></td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="/files/rZqwvLiv4sEThH3fU8ZE" alt=""><figcaption></figcaption></figure></div>

## Section settings

<div data-with-frame="true"><figure><img src="/files/GgbKvWLd3B0qSPL7cn71" alt=""><figcaption><p><strong>Countdown timer — Enabled</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/bd0wKbd7q0TGPqRM253z" alt=""><figcaption><p><strong>Countdown timer — Disabled</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/komPx4fuYZqHZ7HwPOxM" alt=""><figcaption><p><strong>Timer position- Start</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/SVrG8n7NiVWbCLm481CM" alt=""><figcaption><p><strong>Timer position- Next</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/6J6GTicNwXvPumBeIAI9" alt=""><figcaption><p><strong>Add button label and link to the announcement bar.</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/o4wHCzRdQjp7VNE9XVnG" alt=""><figcaption><p><strong>Show social media icons —  Enabled</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/RuvAIL9HcLNVhspDm1ir" alt=""><figcaption><p><strong>Show social media icons - Disabled</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/pB4K7oXezIDmJa0n489a" alt=""><figcaption><p><strong>Secondary menu</strong></p></figcaption></figure></div>

## Add an announcement&#x20;

Click **Add Announcement** to add multiple announcement messages to the Announcement Bar.

Each Announcement block can be used to display promotional or informational messages such as:

* Free shipping offers
* Limited-time promotions
* Sale announcements
* Shipping information
* New product launches

When multiple Announcement blocks are added, customers can navigate between the messages. If **Auto rotation** is enabled, the announcements rotate automatically.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td>Enter the announcement message you want to display in the Announcement Bar. For example, <strong>Free shipping on orders over $49</strong>.</td></tr><tr><td>Link</td><td>Select or enter a link for the announcement. When customers click the announcement message, they will be redirected to the selected page, product, collection, or other destination.</td></tr></tbody></table>

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