# Announcement bar

> A slim bar above the header for the news shoppers should not miss. Messages take turns or scroll as a ticker, and any of them can count down to a date.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/announcement-bar/

## At a glance

- **In the editor:** Announcement bar
- **Where it goes:** The Header group, on every page
- **In the presets:** Poster: Header group; Petal: Header group
- **Settings:** 12
- **Blocks:** Message
- **App blocks:** No

## When to use it

Use the announcement bar for the one or two things every visitor should know before they browse: free delivery over an amount, a returns promise, a sale that ends on Sunday, a new shop opening. Keep each message short enough to read at a glance – around 40 characters reads well on a phone.

## Set it up

1. In the theme editor, open the **Header** group at the top of the section list. If your preset has no announcement bar, choose **Add section › Announcement bar**.
2. Add a **Message** block for each message. Write the **Text**, and add a **Link** if the message should lead somewhere.
3. Choose a **Style**: *Messages take turns* shows one message at a time; *Scrolling ticker* runs them all in a continuous line.
4. Pick an **Icon** for each message if you like – a truck for delivery, a return arrow, a gift, a tag, a clock, a shield or a chat bubble.

## Messages that take turns

Each message stays for **Time per message** (2–12 seconds) and then gives way to the next one. Give messages with a link a little more time, so shoppers can read them and click.

### Countdowns

A message can count down to a moment: enter a date and time in **Count down to**, written as `2026-12-24 18:00`, in your store's time zone. The time left appears after the text – *Free express delivery until Christmas · 2 d 4 h* – and the message hides itself once the time is up, so a finished offer never lingers. Countdowns work with *Messages take turns*.

## Scrolling ticker

The ticker runs every message in one line that loops. **Ticker loop duration** sets how long one full loop takes – longer is calmer. With **Pause ticker on hover**, the line stops while the pointer is on it, so links stay easy to click.

## Layout and visibility

- **Text on the right:** a short note shown on desktop next to the messages, such as a phone number or *Free returns*. Available with *Messages take turns*.
- **Text size** and **Show bottom line** fine-tune how the bar sits against the header.
- **Show a close button** lets shoppers dismiss the bar. It stays closed for them until you change the messages – then everyone sees the new ones.
- **Accessible name** is what screen readers announce for the bar, for example *Store news*.
- **Hide on mobile** and **Hide on desktop** show the bar on one kind of screen only. *Mobile* means below the width where the header switches to the mobile menu.

> **Tip:** One message is often enough
>
> A single, well-chosen message outperforms five that rotate past unread. Use the countdown only for real deadlines – shoppers learn quickly when a timer resets every day.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Announcement bar** (12 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Style** | Messages take turns · Scrolling ticker | Messages take turns |
| **Time per message** | 2–12s (step 1) | 6s |
| **Text on the right** – Shown on desktop next to the messages. | Rich text (one line) | Sample text |
| **Ticker loop duration** | 10–80s (step 2) | 40s |
| **Pause ticker on hover** | Checkbox | On |
| **Text size** | 11–18px (step 1) | 14px |
| **Show bottom line** | Checkbox | On |
| **Show a close button** – A closed bar stays hidden for the shopper until you change its messages. | Checkbox | Off |
| **Color scheme** | Color scheme | Scheme 1 |
| **Accessible name** | Text | Sample text |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |

## Block settings

**Block: Message** (4 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Text** | Rich text (one line) | Sample text |
| **Link** | Link | – |
| **Count down to** – Date and time in the store's time zone, as YYYY-MM-DD HH:MM. Shows the time left after the text and hides itself at the end. Only with Messages take turns. | Text | – |
| **Icon** | None · Truck · Return · Gift · Tag · Clock · Shield · Chat | None |

## Related

- [Header](https://themelab.page/tally/docs/sections/header.md): Logo, menu, search, account and cart in three layouts, with a full-width shop panel, a transparent mode and a mobile drawer.
- [Countdown](https://themelab.page/tally/docs/sections/countdown.md): A live timer to the end of a sale or a launch, with a button, that changes to your own text when time is up.
- [Marquee](https://themelab.page/tally/docs/sections/marquee.md): A band of large text and small images that glides across the screen, separated by dots, sparkles, slashes or hearts.