Hype Cart

Announcement bar

Updated Sep 10, 20263 min read

The Announcement bar is a colored band at the top of the drawer carrying one line of text, with an optional countdown that reserves the cart for a limited time. Every new cart has one, switched off.

To use it, expand Announcement bar in the module list, turn on its switch, and write your message.

Message

The bar's text lives in the Message field. The default is Your items are reserved for {timer}!.

{timer} is replaced live with the remaining time while a countdown is running. Click the {} button beside the field to insert it. With the countdown off, {timer} is dropped from the line rather than printed, so a message written for a timer still reads sensibly — but it will read better if you rewrite it.

You can emphasize part of the line with **bold** or *italic*.

The bar is hidden while the cart is empty, and stays hidden for the rest of the visit once a countdown has run out on Hide the banner or Clear the cart.

Countdown

Turn on Show a countdown to reserve the cart for a limited time.

  • Duration — between 1 and 720 minutes. The default is 10.
  • When time runs out — one of three actions:
    • Hide the banner — the bar disappears and nothing else happens. This is the default and the safe choice.
    • Restart the countdown — the clock starts over from the full duration.
    • Clear the cart — the shopper's cart is emptied.

Two things about the timing are worth knowing before you use Clear the cart:

  • The clock starts when the shopper's cart first has something in it, not when the page loads. An empty cart never burns the reservation.
  • The expiry is remembered in the shopper's browser, so the countdown survives page loads and keeps running across your store rather than restarting on every page.

Clear the cart discards a shopper's work without warning. Most stores should stay on Hide the banner.

In the editor preview the countdown is static: it shows a fixed time and never fires its action, so a preview can't wipe your demo cart.

Colors

The bar's colors are set on the module itself, separately from the drawer's design:

  • Gradient background — off by default. When on, Gradient start and Gradient end appear.
  • Text color and Countdown color.

Leave the color fields empty and the bar follows the drawer's own accent tint, so it matches whichever template the cart is on. Set them and the bar keeps those exact colors on every template.

If you turn Gradient background on, the default pair is a light green ramp (#E4FFC3 to #9BFBB3). Check the result against your text color — a pale gradient with pale text is a common mistake.

Placement

The announcement bar starts in the Top bar region. Drag it above or below the trust badges and progress bar to change the order, or into another region entirely. It renders wherever you put it.

Translation

Message carries a translate button when your store publishes more than one language, so the line (including {timer}) can differ per locale. See Translating your drawer.

Related articles

Still need help?

Start a chat and we'll pick it up right here.