Announcement bar

The Lapels announcement bar: a dark strip above the header reading Complimentary shipping and returns, with a back arrow, the counter 01 of 03, a forward arrow, a pause button and a dismiss cross ranged along its right end, and the cream header sitting directly beneath it.

The Announcement bar is the strip that sits above the Header on every page. It belongs to the Header group and can only be placed there.

What it does: Carries the short promises a shopper wants before they start browsing, such as shipping, returns, a cut-off time, or a pop-up date.

Lapels composes it as an index line, with the announcement at the start and the controls at the end. Where a single announcement stands on the strip, a hairline runs across whatever is left between them.

Add it

Open Online Store → Themes → Customize, expand the Header group in the sidebar, and click Add section. Pick Announcement bar, which is filed under Promotions. It arrives with three announcements you can edit, and takes up to 5 in total.

Each announcement is a block, and a block with no text is not an announcement: if every block is empty the whole strip renders nothing rather than leaving an empty band above your masthead.

Key settings (in the section’s settings):

Setting	What it does	Default
Color scheme	The ground and ink for the strip.	scheme-night
Style	How the announcements are presented. Rotate cycles through them one at a time. Scroll runs them in one continuous line. Static shows only the first.	Rotate
Height on desktop	Minimum height of the strip on desktop, 40–88 px in 2 px steps. The controls inside hold a minimum height of their own, so very low values stop having an effect.	56 px
Height on mobile	The same, for phones, 40–88 px. It is a separate value because a phone lets an announcement run to two lines.	76 px
Rotation speed	How long each announcement holds before the next one rises, 3–12 seconds. Only shown when Style is Rotate.	5 s
Show count	The “01 / 03” position marker, and the manual back and forward controls beside it. They are one control, because a counter with no arrows says nothing, and arrows with no counter say nothing either. Only shown when Style is Rotate.	On
Show pause button	A pause and play control for the moving announcements. Only shown when Style is not Static.	On
Allow visitors to dismiss	Adds a close control. The strip stays hidden for the rest of that visitor’s session.	On

Blocks: Announcement, up to 5.

Block setting	What it does	Default
Text	The announcement itself. Keep it to one line where you can.	”Complimentary shipping and returns, everywhere we ship”
Link	Optional. Adds a labeled link after the announcement.	None
Link label	The wording of that link. Only shown once Link is set.	”See details”

How the three styles differ

Rotate needs at least two announcements with text. With one, the strip simply shows it and nothing moves. The counter, the arrows and the pause button all stand down, because a control with nothing to drive is a dead control.
Scroll runs every announcement along one continuous line. The pause button applies. The counter and arrows do not.
Static shows the first announcement and nothing else. Neither the pause button nor the counter appears.

Rotation pauses while a visitor’s pointer rests on the strip, or while their keyboard focus is inside it, so an announcement cannot change out from under someone reading it.

Dismissal

With Allow visitors to dismiss on, a close control appears at the end of the strip. Closing it hides the bar for the rest of that browser session.

The dismissal is keyed to the announcements themselves, not just to the section. So a visitor who closed last week’s message still sees this week’s. Edit any announcement’s text and every existing dismissal is spent, and the strip comes back for everyone. Dismissals never persist while you are working in the theme editor, so you always see the bar you are editing.

Accessibility

The strip is a labeled region called “Store announcements”. Every control in it ships hidden, and is only revealed once there is something real for it to do. That covers pause, back, forward and close, so a shopper never meets a button that does nothing.

Announcements are not read out unprompted. A screen reader announces one only once the rotation has stopped, so a change means the visitor asked for it.

If a visitor has asked their system for reduced motion, nothing rotates or scrolls at all. Every announcement is simply on the page, and dismissal still works.

Closing the bar moves keyboard focus to the skip link, which is the next stop in the page, so the keyboard is never left standing on an element that has just been removed.

Related: Header · Navigation and menus · Footer · Lapels support replies within 12 hours.