Skip to Content
Header & footerAnnouncement bar

Announcement bar

A thin colored strip at the very top of every page. Great for:

  • Free shipping thresholds
  • Sale codes
  • Short marketing messages
  • Country-specific notes

Add the announcement bar

Open the theme editor

Click Header in the left panel

The header lives at the top of the section list.

Add block → Announcement

Under the header’s blocks, click Add block and pick Announcement.

Type your message

Keep it short — the bar is thin and messages that wrap look messy on mobile.

Good: “Free shipping over $75” Bad: “Get free shipping on all orders over $75 for a limited time this week”

If you want the whole bar to be clickable, add a Link URL — click to a collection, sale page, or a specific product.

Save

Multiple announcements (rotating)

Add multiple Announcement blocks. Citera rotates them automatically with a gentle fade transition, 5 seconds each.

Auto-play respects motion preferences. Shoppers with “reduce motion” enabled at the OS level see all messages statically — the rotation is disabled for them.

Color the bar

Click the announcement bar (or the Header section)

Find Color scheme

Pick a scheme that stands out from the rest of the header. Common patterns:

  • Inverse (dark bar on a light site) — highest attention
  • Accent 1 (brand color) — strong brand presence
  • Same scheme as the header — subtle, integrated feel

Save

Hide on mobile

Sometimes the announcement bar takes valuable space on small screens.

Click the announcement block

Find Show on mobile toggle

Turn it off to hide the bar on phones only.