> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Banner block

> The Aftersell Cart Banner block: a message banner shown inside the drawer, with an optional countdown timer.

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

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-banner-block-reservation-countdown.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=8aff1b333a8ebe9005d2d70bc7f9a2cd" alt="Banner block in the Aftersell cart drawer showing a reservation countdown message" width="1366" height="106" data-path="images/aftersell/cart-banner-block-reservation-countdown.png" />
</Frame>

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

| Setting                   | What it controls                                                                                                                         | Default                                        |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| **Text**                  | The rich-text message. Include the `{{timer}}` token to show a countdown.                                                                | `Your cart is reserved for {{timer}} minutes!` |
| **Countdown timer**       | Turns the countdown on or off.                                                                                                           | On                                             |
| **Minutes** / **Seconds** | How long the countdown runs. Two number fields, shown once **Countdown timer** is on and displayed as `MM:SS` where `{{timer}}` appears. | 10 minutes                                     |

The text is translatable.

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

Supports a [custom template](/aftersell/cart/custom-templates) from its Code tab, which replaces this block's built-in markup with your JSX. These are the props it receives.

| Prop                          | Type      | What it's for                                                                                                                 |
| ----------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `text`                        | `string`  | The banner message as sanitized HTML, with the `{{timer}}` token **already replaced** by the live countdown.                  |
| `shouldUseTimer`              | `boolean` | `true` when the countdown is running for this banner.                                                                         |
| `isTimerExpiredAndShouldHide` | `boolean` | `true` once the countdown has reached zero.                                                                                   |
| `isLoading`                   | `boolean` | Always `false` here: the block renders its built-in skeleton during load and only calls your template once the cart is ready. |

There's no separate `timer` prop. The countdown is interpolated into `text` for you, so rendering `text` is enough.

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
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>
  );
}
```

<Warning>
  That early return matters. Without it your banner keeps rendering after the timer expires, and because the token is already substituted, shoppers see a frozen `00:00`.
</Warning>

## Design

Style this block with its **Design** section in the settings panel. These are per-block overrides that layer on top of your global design and fall back to it when blank.

### Text

The **Text** section in Design lets you control the typography of the banner message. Bold and text color are set in the Rich Text Editor above (in the Settings tab), not here.

| Setting            | What it controls                 | Default             |
| ------------------ | -------------------------------- | ------------------- |
| **Font**           | Font family for the banner text. | Inherits from theme |
| **Size**           | Font size.                       | `14px`              |
| **Line height**    | Line height multiplier.          | `1.4`               |
| **Letter spacing** | Tracking between characters.     | Normal              |

### Style

| Setting              | What it controls                                                    | Default     |
| -------------------- | ------------------------------------------------------------------- | ----------- |
| **Background color** | The banner's background fill.                                       | `#000000`   |
| **Text color**       | Fallback text color (overridden by the Rich Text Editor).           | `#ffffff`   |
| **Border**           | Whether the banner has a border — **None** (0px) or **Show** (1px). | None        |
| **Border color**     | Color of the border when **Show** is selected.                      | Transparent |

What are design settings? Learn more here: [Design settings](/aftersell/cart/design-settings).