Announcement bar

Share short, high-priority messages at the top of the storefront.

The Announcement bar keeps shipping messages, launches, and time-sensitive notices visible above the header without taking over the page.

Guide status.

The setting labels, options, block fields, and limits below come from the current Strata schema. Capture of the final Theme Editor and storefront states is still pending an accepted browser fixture.

Add or open this feature

In Shopify, open Online Store > Themes > Customize and select the Header group. Open Announcement bar. Strata allows one Announcement bar in the header group.

The current Header group order is Announcement bar, then Header. Keep the bar first when you want the message to sit above navigation.

Motion and controls

Animation mode

Choose how multiple announcements are presented:

Slide moves between messages horizontally.
Fade changes the active message with a fade.
Marquee moves the announcement content continuously across the bar.

With more than one non-empty Announcement block, Slide and Fade rotate between messages and provide previous/next controls. Marquee uses the continuous moving presentation. A visitor can pause an automatically moving bar when the pause control is available, and the bar also pauses while it is hovered or focused.

Marquee duration

Controls the time used by one Marquee cycle. The available range is 10–40 s, in 2 s steps. Use a longer duration when your message is longer or when visitors need more time to read it.

This control is relevant to Marquee. For a rotating Slide or Fade bar, use Change interval instead.

Change interval

Controls how long a Slide or Fade message remains active before the next message is shown. The available range is 3–12 s, in 1 s steps.

Use a shorter interval only for very short notices. For shipping or promotion details, give visitors enough time to read the complete message.

Colors

Background color

Sets the surface color of the bar. Choose a color that separates the notice from the header while keeping text readable.

Text color

Sets the color of the announcement text, links, and utility controls. Check the message in both its normal and active states after changing the background.

Blocks

Announcement

Add one block for each message you want to display. Each block has:

Text — the short message visitors should read.
Link — an optional destination for the message.

Reorder blocks to change their presentation order. Empty message blocks do not produce a visible announcement.

Visitor controls and state

Visitors can use the bar's pause control when it is rotating or moving, use previous/next controls for Slide and Fade when several messages are present, or close the bar. Closing the bar is remembered for the current browser session. This is useful for a temporary notice, but it means a visitor who closes the bar may not see later messages during that session.

Note

If your message must remain available after a visitor dismisses it, repeat the information in the page content, header navigation, or footer rather than relying on the Announcement bar alone.

Accessibility and motion

Keep each message short enough to understand without relying on animation. Strata exposes a pause action for automatic movement and respects the theme's reduced-motion setting. Final screenshots for paused, reduced-motion, and mobile states will be added after browser acceptance.

Common issues

Only one message appears: check that the other Announcement blocks contain text and are not empty.
The bar does not move: check Animation mode, then check whether the visitor has paused or dismissed it.
The notice is difficult to read: adjust Background color and Text color together, then preview keyboard focus and links.

Version note

This guide follows the current Strata Announcement bar schema. The exact visual timing and responsive presentation remain subject to accepted storefront review.