# Announcement bar

How to add a one-line bar above the header with announcements, links and a countdown to a real deadline.

The Announcement bar is a section for the Header group. It holds short announcements, each with an optional link, and at most one countdown to a date and time you set. It's one line at every screen width and scrolls away with the page, while the header can stay at the top (see [Sticky header](header.md#sticky-header)).

## Add the bar

In the theme editor, go to the Header group in the sidebar and choose **Add section › Announcement bar**. It can only be added to the Header group, once. Drag it above the Header section to put it at the very top of the page.

A new bar comes with one Announcement block. Add up to four blocks in total, one of them a Countdown.

On screens too narrow for everything, the bar stays on one line: shoppers swipe it sideways, and an ellipsis (…) at the edge shows there's more. With the keyboard, each link and the Pause button scrolls fully into view as it's reached. Put the most important block first.

## Announcements

| Setting | What it does |
| --- | --- |
| "Text" | The announcement, such as "Free returns this week" |
| "Link" | Optional. Makes the text a link. |

An announcement with no text isn't shown.

## Countdown

The Countdown shows your label, then the time left as `T-02:14:22:07` (days, hours, minutes and seconds), then a Pause button.

| Setting | What it does |
| --- | --- |
| "Label" | Text before the clock, such as "Sale ends in". Linked when you set "Link". |
| "End date" | The deadline's date, written as `2026-11-27` |
| "End time" | The deadline's time, 24-hour, written as `23:59` |
| "Time zone" | "Store time zone" (the default), or a fixed offset from UTC-12:00 to UTC+14:00 |
| "Link" | Optional. Makes the label a link, such as to the sale collection. Needs a label: with "Label" empty, the countdown isn't linked. |
| "After the deadline" | "Hide the countdown" (the default) or "Show a message" |
| "Message after the deadline" | Shown in place of the countdown once the deadline passes, when "After the deadline" is "Show a message" |

A countdown with a missing or badly written date or time, such as `27/11/2026` or `24:00`, isn't shown to shoppers. In the theme editor it shows a note instead. A time like `9:05` is read as 09:05.

> **Warning:** Only count down to a real deadline. The Theme Store requirements ban "fictitious countdown timers", and a countdown that restarts, is extended to keep up urgency, or differs between shoppers misleads them. Techno's countdown ends at the same moment for every shopper and never restarts, but only you can make sure the deadline is real.

### Time zones

"Store time zone" uses the time zone in your store settings, including its daylight saving time on the deadline's date. For example, in Sydney 2026-11-27 23:59 is UTC+11:00 and 2027-06-30 23:59 is UTC+10:00. Choose a fixed offset instead when the deadline is set in another place's time.

The time left comes from each shopper's device clock. A shopper whose clock is wrong sees the wrong time left, but the deadline itself never moves.

### After the deadline

Once the deadline passes, the countdown hides, or shows your message, both for shoppers who open the page afterwards and for those who have it open at that moment. When the countdown was the bar's only block, the whole bar disappears. In the theme editor, a past deadline shows a note.

### Pause and screen readers

The Pause button stops the clock from changing on screen, and Resume carries on with the right time left. The countdown still ends on time while paused.

Screen readers hear the label and the deadline itself, such as "Ends 2026-11-27 at 23:59 (UTC+11:00)", once. The ticking clock isn't read out.

Visitors who've asked their device to reduce motion see days, hours and minutes only, updated once a minute.

### Without JavaScript

The bar shows the label and the deadline as text, "Ends 2026-11-27 at 23:59 (UTC+11:00)", with no clock or Pause button. The links still work.

## Recipes

### A sale countdown

* Header group › Add section › Announcement bar
* Add block: Countdown › "Label": Sale ends in, "End date": the last day of your sale, "End time": 23:59, "Link": your sale collection
* "After the deadline": Show a message › "Message after the deadline": This sale has ended

### A launch note with a link

* Announcement › "Text": New arrivals every Friday, "Link": your new arrivals collection

## See also

* [Header & navigation](header.md): the header, its status strip and the sticky header
* [Motion, effects & voice](../core-concepts/motion-and-voice.md): reduced motion