# 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="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FTs8ZjQd0NcX0gT4eSwdg%2Fannouncement-bar.png?alt=media&#x26;token=023f6238-75bb-4763-9645-08792ac1ed80" 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](https://help.fluorescent.co/eclipse/sections/overview/section-styles#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>