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

# Announcement bar

A thin bar at the very top of every page for short, high-priority messages like promotions, free-shipping offers, discount codes, or a countdown to a sale.

![Announcement bar overview](/files/9Va1plMtD5VUq8FKiOad)

***

## Display Mode

The **Layout** setting controls how messages are shown.

{% tabs %}
{% tab title="Slider" %}
![Announcement bar in slider mode](/files/0kZS5ZqqeV2atVV7kzZW)

Shows one message at a time and rotates between them. Set how long each message stays on screen, whether the rotation pauses while the cursor is over the bar, whether the previous/next arrows are always visible or only on hover, and which arrow icon to use.
{% endtab %}

{% tab title="Scrolling" %}
![Announcement bar in scrolling mode](/files/M0bLzNEIRvUl3mpMrv0R)

Runs all messages together in a moving line that never stops. Set the scroll speed, the direction it moves, and the spacing between messages (separately for desktop and mobile).
{% endtab %}
{% endtabs %}

***

## Background

Choose whether the bar has a plain background or a background image (you can set a separate image for mobile). With an image you can turn on an overlay color to keep the text readable.

***

## Bottom Separator

Turn on **Bottom separator** to add a line under the bar, separating it from the header below.

***

## Color

The **Color scheme** sets the text, icon, and background colors for the bar. Pick a scheme that stands out against your background.

***

## Padding

Set the top and bottom padding to control the bar's height. Turn on **Custom for mobile** to use different values on smaller screens.

***

## Announcement Blocks

Add one or more blocks inside the bar. Each block is a message. In slider mode each block is a slide; in scrolling mode they all move together.

### Text

A simple line of text for a policy, tagline, or any short message.

* **Text** — The message to show.
* **Font** — The font used for the text.
* **Font size** — The text size.
* **Letter spacing** — The spacing between letters.
* **Text color** — The text color.

### Discount code

Shows a promo code with a one-click copy button.

* **Text** — An optional message shown next to the code.
* **Coupon code** — The code shoppers copy; can be made bold and given a background.
* **Button** — An optional button with its own label, link, style, and icon.
* **Gap** — The spacing between elements, set separately for desktop and mobile.

### Free shipping progress

Shows the free-shipping message (how much more to spend), updating whenever the cart changes. The threshold is set in [Theme settings → Cart](/helix/theme-settings/cart.md); see [Free shipping bar](/helix/features/free-shipping-bar.md) for the full setup.

* **Alignment** — The horizontal alignment of the message.
* **Text size** — The message size.
* **Text color** — The message color.
* **Padding** — The top and bottom spacing, with a custom option for mobile.

### Countdown timer

Counts down to a fixed date or on a repeating schedule.

* **Text** — An optional message shown next to the timer.
* **Timer type** — Count down to a fixed end date, or run on a repeating schedule.
* **Timer style** — The look of the timer, with an optional background and corner radius.
* **Timer text** — The font, size, letter spacing, and color of the countdown digits.
* **Button** — An optional button with its own label, link, style, and icon.
* **Gap** — The spacing between elements, set separately for desktop and mobile.
* **Hide when finished** — Hides the block once a fixed-date timer runs out.