# Alert Banner

## What is an Alert Banner?

**Alert Banners** are used to display important updates, promotions, shipping information, or any other message you want to highlight during checkout. 

<figure><img src="https://3290803092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrQAMmskYzr7YduJvnmdP%2Fuploads%2FY7D56HULIqiHLhLHHimA%2FScreenshot%202024-09-12%20at%2011.12.51%20AM.png?alt=media&#x26;token=cdbaac30-0cb8-42da-af48-9eb9f93370e3" alt=""><figcaption><p>Example of a Warning alert.</p></figcaption></figure>

***

## Types of Alert Banners

There are four types of Alerts:

1. Info Alert
2. Success Alert
3. Warning Alert
4. Critical Alert

{% tabs %}
{% tab title="Info Alert" %}

#### Suggestion:

Use this alert type to share helpful, non-urgent information that guides customers during the checkout process, such as shipping promotions or policies.

<figure><img src="https://3290803092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrQAMmskYzr7YduJvnmdP%2Fuploads%2FX2dbiHokthZMJpMH8ELl%2FScreenshot%202025-01-07%20at%201.20.11%20PM.png?alt=media&#x26;token=e9ffb8e8-09d9-4409-a199-41425715ee4d" alt=""><figcaption><p>Example of an Info alert.</p></figcaption></figure>
{% endtab %}

{% tab title="Success Alert" %}

#### Suggestion:

Use this alert type to confirm details such as eligibility for discounts or free shipping. Success alerts help reassure customers and build confidence at checkout.

<figure><img src="https://3290803092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrQAMmskYzr7YduJvnmdP%2Fuploads%2FZ2CxEpq3yjDMe6Yv4w7j%2FScreenshot%202025-01-07%20at%201.07.52%20PM.png?alt=media&#x26;token=a3a62441-5b22-4a8f-be4b-b7759e0fc85c" alt=""><figcaption><p>Example of a Success alert.</p></figcaption></figure>
{% endtab %}

{% tab title="Warning Alert" %}

#### Suggestion:

Use this alert type to warn customers about potential issues or encourage them to act quickly, such as low stock or expiring offers. Warnings are a great way of driving urgency or creating scarcity.

<figure><img src="https://3290803092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrQAMmskYzr7YduJvnmdP%2Fuploads%2FJ54V59xO6HoWsWQnlgvj%2FScreenshot%202025-01-07%20at%202.11.32%20PM.png?alt=media&#x26;token=d62ade75-7913-4d68-91c7-cda87614b338" alt=""><figcaption><p>Example of a Warning alert.</p></figcaption></figure>
{% endtab %}

{% tab title="Critical Alert" %}

#### Suggestion:

Use this alert type to highlight urgent issues that require immediate customer action, such as completing their order. Critical alerts are a valuable way to prevent abandoned checkouts and decrease customer errors.

<figure><img src="https://3290803092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrQAMmskYzr7YduJvnmdP%2Fuploads%2FTIszhQ077LgvngmHfx9s%2FScreenshot%202025-01-07%20at%201.28.57%20PM.png?alt=media&#x26;token=f3a1de6e-049f-4f45-acd6-f76f8426a46a" alt=""><figcaption><p>Example of a Critical alert.</p></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## Configuring Alert Banners

Follow the instructions below to setup an **Alert Banner:**

1. From the dashboard, go to **Extensions** tab.
2. In the Extensions page, scroll down and find the extension you'd like to set up and click **Add to Checkout.**
3. Open the **Settings** window, and adjust the content and styling of the Alert Banner.\
   ![](https://3290803092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrQAMmskYzr7YduJvnmdP%2Fuploads%2FM3FcTCcwmdTf8RsIQUPV%2FScreenshot%202024-11-26%20at%201.02.09%20PM.png?alt=media\&token=0bd2c48a-6f97-47d5-a505-88cff6579425)
4. Enter a custom name (optional).\
   ![](https://3290803092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrQAMmskYzr7YduJvnmdP%2Fuploads%2FWGGe9DsMiqMhawN9dlqs%2FScreenshot%202024-11-26%20at%201.02.43%20PM.png?alt=media\&token=e5f879e3-b5d3-4de3-8806-efe46b0e74e1)
5. Click the **`+`** icon to copy the Handle to your clipboard.\
   ![](https://3290803092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrQAMmskYzr7YduJvnmdP%2Fuploads%2FDN8l7Chd8IjlskJyPcP9%2FScreenshot%202024-11-26%20at%201.02.43%20PM.png?alt=media\&token=0dc20ff8-6b5f-4567-8b59-31c29d9d1599)
6. Hit **`Save`** to to ensure your settings and saved.
7. Open your Checkout Editor and [install your extension](https://docs.platter.com/get-started/quick-start-guide#installing-an-extension).