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

# Customize the banner

> Adjust the appearance and behavior of the Promotions UI banner to match your brand

Open a promotion and go to the **Customize banner** tab to control how the discount banner looks and behaves on your site.

## Appearance

* **Country message** — the text displayed to visitors. Use `{discount}` as a placeholder for the discount percentage and `{country}` for the visitor's country name.
  Example: *"You qualify for a {discount}% discount in {country}."*

* **Background color** — the banner's background color. Accepts any hex value.

* **Background transparency** — opacity of the background, from 0 (fully transparent) to 100 (fully opaque).

* **Font color** — the main text color.

* **Highlight font color** — the color used for emphasized text (e.g. the discount percentage).

* **Font size** — text size in pixels.

* **Border radius** — corner rounding of the banner container, in pixels.

## Behavior

* **Placement** — choose whether the banner appears at the **top** or **bottom** of the viewport.

* **Close icon** — when enabled, a close button lets visitors dismiss the banner.

* **Unstyled mode** — when enabled, all styling controls are disabled and the banner renders without any Kelviq styles. Use this if you want to apply your own CSS from scratch.

  <Note>
    Enabling unstyled mode will override all appearance settings above. You will need to style the banner entirely with your own CSS.
  </Note>

## Save changes

Click **Update banner** to apply your changes. The banner updates in real time for new visitors.