Announcement bar
Updated Oct 1, 20262 min read
On this page (6)
The announcement bar is a full-width message pinned to the top of every page, shown while a Hype campaign is active. It is available for every discount type and it is the only block, besides the toast, that does not need an App block ID.
Turn it on
- Open the campaign's Blocks page and select the Storewide tab.
- Click Add campaign block and choose Announcement Bar.
- Write the message, pick an icon, and save.
- Go to Online Store → Themes → Customize → App embeds and enable Hype: Announcement Bar. The Hype: Discounts embed must be enabled too.
The bar is inserted at the very top of the page body when the campaign loads, so it sits above your theme's own header content.
Settings in the Hype admin
- Message — the text of the bar. You can insert
{{discount_code}}; see Variables you can use in block text. - Icon — pick a filled or outlined icon, an emoji, or none.
- Show once when first applied — off by default. When on, the bar shows only once per shopper for that campaign; the browser remembers it in local storage, so clearing site data makes it show again.
Settings in the theme editor
Open App embeds → Hype: Announcement Bar to style it.
| Setting | Options | Default |
|---|---|---|
| Background Style | Solid Color (Default), Magic Gradient, Electric Horizon, Neon Sunset, Tropical Burst, Cyber Fusion, Vibrant Dawn, Laser Pulse, Digital Candy, Future Glow | Solid Color |
| Background Color | Used only when Background Style is Solid Color | #000 |
| Text Color | #fff | |
| Text Size | 8px to 28px, in steps of 2 | 14px |
| Font Weight | Regular, Bold | Regular |
| Block Padding | Vertical padding, in pixels | 8 |
| Show Close Button | On | |
| Sticky on Scroll | Keeps the bar at the top as the shopper scrolls | Off |
| Custom CSS | Extra styles for the bar | empty |
| Custom JavaScript | Extra script for the bar | empty |
Previewing it
While you are in the Shopify theme editor, the bar renders with placeholder content — the message Shop More, Enjoy More: Discounts and Free Gifts and a confetti icon — so you can style it without an active campaign. That preview is theme editor only. On the live storefront the bar appears only when a campaign that has an announcement bar block is actually active for that shopper.
When it does not appear
- The Hype: Discounts embed or the Hype: Announcement Bar embed is off.
- The campaign is not active, or the shopper's market is not targeted by the campaign.
- Show once when first applied is on and this browser has already seen the bar for this campaign.
- You changed the campaign in the last few minutes. Hype caches campaign data for up to 10 minutes; see Clearing the cache.
If more than one active campaign has an announcement bar, only one bar is rendered per campaign, and campaigns are handled in the order Hype returns them.
Related
Was this article helpful?
Related articles
Still stuck?
Ask a follow-up and we'll see it came from “Announcement bar”.
Opens chat with your question and a link to this article.