# Announcement bar

The **Announcement bar** displays rotating announcements at the top of every page. Let customers know about current promotions, new products, or other need-to-know updates with links to more info.

* Add up to 3 announcements with links
* Display announcements as **rotating slideshow** or **scrolling text**
* Change announcement bar **colors**
* Enable **sticky bar** to keep announcments visible

<div align="right" data-full-width="false"><figure><img src="/files/0KviPEfwIyuq6h3JTHJE" alt=""><figcaption></figcaption></figure></div>

## Set up announcement bar

***

* Show announcements on **all pages** or **homepage only**
* Enable **sticky bar** to keep visible when scrolling
* Change the **text size** of announcements

&#x20;

`Click Announcement bar section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show on homepage only</mark></td><td>Choose to show announcement bar only on the home page or on all pages.</td><td><mark style="background-color:yellow;">Default: Enabled</mark></td></tr><tr><td><mark style="color:blue;">Enable sticky announcement bar</mark></td><td>When enabled, the bar remains visible at the top of the screen when scrolling down the page.</td><td><strong>Never</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Desktop</strong><br><strong>Mobile</strong><br><strong>Both</strong></td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Adjust the size of the section text from small to large.</td><td><strong>Small</strong><br><strong>Medium</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Large</strong></td></tr></tbody></table>

## Change color scheme

***

Select a set of colors to apply to the bar background and text. You can add and define different color schemes in Theme settings > Colors. [Learn more](/eclipse/sections/overview/section-styles.md#section-colors).

## Choose rotation style

***

The announcements have two rotation styles. The **Slideshow** style rotates announcements vertically. The **Scrolling text** style scrolls announcement text across the screen continuously.

&#x20;

`Click Announcement bar section to find settings`

<table><thead><tr><th width="170">Setting</th><th width="389">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Style</mark></td><td>Display announcements as rotating slides or as a scrolling ticker.</td><td><strong>Slideshow</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Scrolling text</strong></td></tr></tbody></table>

### Customize slideshow style

***

&#x20;

`Click Announcement bar section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Auto-rotate announcements</mark></td><td>When unchecked, visitors can click to view the next announcements.</td><td></td></tr><tr><td><mark style="color:blue;">Change every</mark></td><td>Display each message between 4 to 15 seconds before rotating.</td><td><p><strong>4 - 15 sec</strong></p><p><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 4</mark></p></td></tr></tbody></table>

&#x20;

### Change scroll duration and direction

***

&#x20;

`Click Announcement bar section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Scroll duration</mark></td><td>Set the number of seconds it takes for announcements to scroll from beginning to end.</td><td><p><strong>5 - 45 sec</strong></p><p><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 10</mark></p></td></tr><tr><td><mark style="color:blue;">Scroll direction</mark></td><td>Choose to scroll content towards the left or right.</td><td><strong>Left</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Right</strong></td></tr></tbody></table>

## Add announcements

***

Add up to 3 announcements with rich text and alternate text for mobile screens.

Click the arrow next to the **Header** section, then click **(+) Add Announcement**. Click an announcement block to add text.

&#x20;

`Click Announcement block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text</mark></td><td>Enter a text as a storewide message. We recommend between 4 and 8 words.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: "Free worldwide shipping..."</mark></td></tr><tr><td><mark style="color:blue;">Text on mobile</mark></td><td>Enter alternate text to display on mobile.</td><td></td></tr></tbody></table>


---

# Agent Instructions: 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:

```
GET https://help.fluorescent.co/eclipse/header/announcement-bar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.