Banner block

The Banner block is a message strip shown inside the cart, useful for promotions, shipping messages, or urgency prompts such as a free-shipping notice, a sale announcement, or a “cart reserved” prompt. It can include a live countdown timer.

​

Behavior

• The countdown only runs when all three conditions are met: the timer is enabled, the text contains the {{timer}} token, and the duration is greater than zero. Otherwise the banner shows as static text.
• The timer counts down in MM:SS and is remembered for the shopper’s tab (it survives navigation within your store during the session), so it doesn’t restart on every page.
• When the timer reaches 00:00, the entire banner disappears, so shoppers never see a zeroed-out clock.
• In the editor preview the timer loops and the banner never hides, so you can keep styling it.

​

Settings

​

Placement and limits

• Region: any (top, body, or bottom).
• Maximum: 3 per cart state — the filled cart and the empty cart each get their own allowance.
• State: both filled and empty cart.
• Added to new carts by default. Not locked, so you can remove or hide it.

​

Custom template

function CustomTemplate(props) {
  // The built-in banner removes itself at 00:00; a custom template must do the same.
  if (props.shouldUseTimer && props.isTimerExpiredAndShouldHide) return null;

  return (
    <div className="cart-external-banner" style={{ padding: '10px', textAlign: 'center' }}>
      <span dangerouslySetInnerHTML={{ __html: props.text }} />
    </div>
  );
}

​

Design

​

Text

​

Style