Announcement Bars

What are Announcement Bars?

An announcement bar is a slim horizontal strip placed above or below the header, or pinned to the lower edge of the viewport, that carries one short message across all pages of a storefront. Typical content includes free shipping thresholds, discount codes, delivery cut-off times, sale countdowns, and service notices such as extended lead times. Unlike an overlay the bar occupies layout space instead of covering content, which makes it the least intrusive format for a message that should stay visible throughout a session.

Definition

Variants differ in behaviour rather than in purpose: a static bar, a rotating bar that cycles several messages, a sticky bar that remains in view while scrolling, and a dismissible bar that disappears for the rest of the session. The format is closely related to promotional overlays but shares no consent obligation, since it usually carries no data collection. Its limits are attention and space. Rotation shortens reading time, a sticky bar reduces usable viewport height on small screens, and a countdown must reflect a genuine deadline, because misleading urgency can be treated as an unfair commercial practice.

Why it matters

In a composable storefront the bar is a global slot in the layout that is filled from a headless CMS, so message, colours, link target, and validity window can change without a frontend release. Since the strip renders above the main content, it enters the critical path: reserving its height in the layout prevents Cumulative Layout Shift, and server rendering avoids a visible jump. Personalised variants, for example a threshold in local currency or a locale specific delivery note, are best resolved at the edge from the request context so that the page can still be cached per segment rather than per user.

Use cases

On category and product pages a threshold bar states how much basket value separates the shopper from free shipping, updated from the live cart total. During a sale window a countdown bar communicates the end of the promotion across the entire catalogue. Service notices about delivery delays, holiday cut-off dates, or a store closure reduce inbound support contacts. On international storefronts the bar carries duty and customs information for the selected country. In the checkout a reduced bar can retain the return policy while removing navigation that would distract from completion.

Explore Dynamic Content · Trust Signals.

Frontend Insights