> For the complete documentation index, see [llms.txt](https://sitesbyseth.gitbook.io/sitesbyseth-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sitesbyseth.gitbook.io/sitesbyseth-docs/reign/sections/announcement-countdown.md). # Announcement Bar & Countdown Timers Reign's urgency toolkit. Both live as blocks inside the **Header promo** strip (above the header, sitewide) and are also available as standalone sections you can drop anywhere on a page: **Announcement bar**, **Countdown timer bar**, and **Countdown timer**. ## Announcement bar Up to 6 messages, shown as a continuous marquee ticker or a static slider. The standalone section adds one setting of its own — **Color scheme** — and hosts the same block. ### Mode & style | Setting | What it does | Default | | ------------------------------ | ------------------------------------------------------------------------------------------------- | ----------------- | | Display mode | **Continuous ticker** (endless marquee) or **Static sliding** (one message at a time with arrows) | Ticker | | Bar style | **Full width** or **Pill** (a floating rounded capsule) | Full width | | Pill max width / border radius | Only for pill style | 800px / 25px | | Background / Text | Colors | #121212 / #FFFFFF | ### Typography & spacing Font (default Assistant), size 10–30px (14), weight Light/Regular/Medium/Bold (Regular), letter spacing 0–5px (1), text transform None/Uppercase/Capitalize (Uppercase), padding top/bottom (12), message spacing (30). ### Separator **Separator character** (default "◆" — swap for ★, •, /, your brand mark) and its spacing (15px). ### Ticker settings Scroll direction (left-to-right default), scroll speed 10–100s (30 — *higher = slower*, it's the loop duration), and **Pause on hover** (on; only applies to mouse users). ### Static mode settings Slide duration (1s), **Auto rotate messages** (on), rotation interval 3–15s (5). Navigation arrows are customizable: previous/next icon characters (← →), icon size (20), color, opacity (60%), and side offset (20px). ### Messages 1–6 Each has an **Enable** toggle, **Text**, and optional **Link**. Messages 1–3 are on by default with placeholder shipping/new-arrivals copy — replace them. ## Countdown timer bar A full-width bar with promo text + a live countdown. Works two ways: | Timer mode | What happens | | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Fixed end date/time** (default) | Counts down to a specific date/time — for drops and sale ends. Set **End date** (`YYYY-MM-DD`, e.g. `2026-12-31`) and **End time** (`HH:MM`, 24-hour). | | **Per-user duration timer** | An evergreen timer that starts when *each visitor* first sees the bar — set **Duration hours** (0–48) and **minutes** (0–59, default 30). **After expiry**: *Hide, then show again next day* or *Hide permanently for that user*. State is stored in the visitor's browser. | When the timer hits zero it shows the **Expired message** ("OFFER ENDED") — or disappears if **Hide bar when expired** is on. ### Layout & sizing Desktop layout (horizontal/stacked), mobile layout (stacked default), stacked gaps, container max width (1200), and four padding sliders (desktop/mobile top+bottom). ### Content & display * **Promotional text** — toggle, text ("PROMOTE YOUR CURRENT OFFER" — change this!), optional link, alignment (left/center) * **Show timer** toggle, plus gap controls between timer units and between number/label ### Colors & typography Background (#000000) and separate colors for promo text, timer numbers, labels, and separators. Full desktop typography control (promo size/weight/spacing, number size 16–60px, label size, separator size) and a separate mobile typography group. ## Countdown timer (page section) The same countdown block wrapped as a normal page section for landing pages: adds **Full width**, **Color scheme**, and padding top/bottom settings. Add it via **⊕ Add section → Countdown timer**. ⚠️ **Time zone note:** the fixed end date/time counts down in each visitor's local time context based on the date/time you enter — set it to your drop time and sanity-check the preview before announcing. 💡 **Pro tip:** For a "48-hour restock" style promo where everyone should see the same deadline, use **Fixed** mode. Use **Per-user** mode for evergreen "your cart reservation expires in 30:00" pressure — it quietly resets next day so returning visitors see it again. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://sitesbyseth.gitbook.io/sitesbyseth-docs/reign/sections/announcement-countdown.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.