Appearance
Announcement Bar
A slim strip across the top of every page for short, timely messages — a sale, free shipping, an event.
When it shows — pick one:
- Always on — visible all the time.
- Scheduled — appears between a start and end date, then hides itself.
- Countdown — counts down to a moment, then hides.
Rotate messages — add several and they fade from one to the next.
Closeable — shoppers can dismiss it with ×; it stays closed for about a week.
Try it
Pick a preset to see its style, then change the settings and watch the preview update. Use the screen-size buttons and the light/dark toggle in the preview header to check how the bar looks on phones and in dark mode.
←Announcement bar
A slim bar at the top of every page for short announcements.
←Message
One line of text — with optional badges and a countdown.
Makes the whole bar clickable.
Countdown
Start badge
End badge
Schedule
When the block starts showing. Leave blank to start now.
When the block stops showing. Leave blank to never expire.
Storefront preview
SHIPFree, carbon-neutral delivery on every order over €50READ
How it works
The bar sits above the header and shows one or more short messages. Each message can be scheduled to a date range or carry a live countdown, and the bar fades between messages on a timer. Anything too long to fit scrolls sideways, so the bar always stays a single line.
Composition
Every message is one horizontal row, on every screen size, never wrapping:
[ start badge (optional) ] [ message text + optional countdown ] [ end badge (optional) ]If the message has a link, the whole row becomes one tap target — there's no separate button.
Messages
A message is one line of text with optional start and end badges, an optional link, and an opt-in Show countdown. Tick it to reveal the countdown's target date, time, and timezone plus an "after" suffix; the message text becomes the lead-in.
When a countdown reaches zero, its message is skipped; if every message has expired, the bar hides itself. Per-visit "reserve in 10 minutes" timers aren't offered — they pressure shoppers without a real deadline.
There's only one block type, so clicking + Add drops in a message with no picker to choose from.
Section settings
| Setting | What it does |
|---|---|
| Color scheme | Colors the whole bar, badges included — one scheme, so text-on-background stays legible. |
| Display | Rotate through all (fade between messages) or Show first message only. |
| Time per message | How long each message shows (3–12 seconds). Only when Display is "Rotate through all". |
| Scroll speed | How fast a long message scrolls (Slow / Medium / Fast). |
Per-message settings
Fields appear in this order: message, countdown, badges, then schedule.
| Setting | What it does |
|---|---|
| Message text | The line of text. Long text scrolls; it's also the lead-in when a countdown is on. |
| Link | Where the bar points when clicked (makes the whole bar clickable). |
| Show countdown | Append a live countdown after the text, and reveal the target fields below. |
| Target date / time / timezone | When the countdown hits zero. The timezone offset you pick is used as-is — no daylight-saving guesswork. |
| After text | Words after the digits (e.g. "left", "— book your slot"). |
| Start badge | An icon (from the full Lucide set) plus a short label like "NEW" or "LIMITED", before the message. |
| End badge | A trailing arrow, chevron, dot, or sparkle, plus an optional label. |
| Start / End date | Optional schedule — leave the start blank to begin now, the end blank to never expire. |
Scheduling
Set a start and/or end date to show a message only during a window. The year is the switch: leave it blank for no schedule; set it and the month, day, and time fields appear. Leave both years blank and the message is always on.
Dates are compared as timestamps in your store's timezone, so a window behaves correctly across daylight-saving changes. An impossible date like February 30 keeps the message visible rather than hiding it by accident.
A message uses either a countdown or a schedule, never both — turning the countdown on hides the schedule fields.
Presets
The bar shares the same markup and settings across all five presets; the type and badge change to match the active preset:
| Preset | Style |
|---|---|
| Uisce | Italic serif message; a "waterline" underline badge — editorial. |
| Gaoth | Playful asymmetric badge corners with an accent hover underline. |
| Talamh | A soft "garden tag" badge with a clipped corner; earthy tint. |
| Tine | Monospace, uppercase, sharp "spec stamp" badge — industrial. |
| Neart | An outlined badge with a leading accent dot — clinical, premium. |
Responsive & accessibility
- One line, always — the bar never wraps to a second row, phone to desktop.
- Long messages scroll — text that doesn't fit scrolls smoothly; the badges stay put at the edges.
- Rotation waits its turn — an overflowing message finishes one scroll pass before the bar advances, so nothing is cut off mid-word.
- Pause on hover or focus — rotation pauses while a shopper is reading.
- Respects reduced motion — no scrolling or fading when the shopper asks for reduced motion. Countdown digits still tick (that's information, not decoration).
- Closeable — a 44 px close button; once dismissed it stays closed for about a week, or until the campaign ends.
- Readable focus — a clear outline that holds up on any color scheme.
- Right-to-left ready — flows correctly in Arabic, Hebrew, Persian, and Urdu.
- Screen readers — the link announces the full badge-and-message text, and the countdown is exposed as a live time element.
Tips
- Lead with a short badge, then one concrete promise — a booking window, dispatch time, seasonal guide, trade approval, or batch proof.
- Use the end badge for affordance (an arrow or chevron that says "clickable"), not branding.
- Turn on Show countdown only for real, dated events — a sale ending, a restock, a launch. Skip per-visit timers.
- Pick a color scheme with a deep, on-brand background; avoid one that blends into the page.
- Set an End date on campaign messages so the bar clears itself when the campaign is over.