Hype Discounts

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

  1. Open the campaign's Blocks page and select the Storewide tab.
  2. Click Add campaign block and choose Announcement Bar.
  3. Write the message, pick an icon, and save.
  4. 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.

SettingOptionsDefault
Background StyleSolid Color (Default), Magic Gradient, Electric Horizon, Neon Sunset, Tropical Burst, Cyber Fusion, Vibrant Dawn, Laser Pulse, Digital Candy, Future GlowSolid Color
Background ColorUsed only when Background Style is Solid Color#000
Text Color#fff
Text Size8px to 28px, in steps of 214px
Font WeightRegular, BoldRegular
Block PaddingVertical padding, in pixels8
Show Close ButtonOn
Sticky on ScrollKeeps the bar at the top as the shopper scrollsOff
Custom CSSExtra styles for the barempty
Custom JavaScriptExtra script for the barempty

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 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.