---
description: Add a slideout message to your Offers and other Experiences
---

# Offer Messages

### Overview

Offer Messages are promotional call-outs that appear as overlays to highlight special offers and drive engagement. They capture customer attention at key moments in the shopping journey. They can be added to an Offer Experience or Offer Test.

<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2F3aRkHGaOfdYcVjAgrXF6%2FOffer%20message%20-%20pop%20up%20message.png?alt=media&#x26;token=b103f521-dae9-4823-ac6c-83a16dcdc6f4" alt=""><figcaption></figcaption></figure>

### Key Features

* **Visibility:** Offer messages are only visible on the homepage
* **2 Display Styles**: Choose from Pop up and Slide out presentation formats
* **Smooth Animations**: Slide out messages feature elegant entrance animations
* **Flexible Placement**: Position in top-left or top-right corners for optimal visibility
* **Advanced Text Customization**: Full control over titles and descriptions

### Message Styles

**Pop Up**\
Standard promotional overlay for high-priority announcements and urgent offers.

<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2FmOk3NWQFXRJQICq7iFF7%2FFrame%202147226290.png?alt=media&#x26;token=b73ca9a5-2047-4826-8751-9c61ff92bf74" alt=""><figcaption></figcaption></figure>

**Slide Out**\
Smooth animated entrance for subtle promotional messaging without disrupting site flow.



<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2F5kN2rVuO53L5lydqTWNM%2FFrame%202910.png?alt=media&#x26;token=acaa1a41-52b8-4373-8022-4a8644810cf0" alt=""><figcaption></figcaption></figure>

### Configuration

#### Content Setup

* **Title**: Primary headline that captures attention
* **Description**: Supporting text explaining offer details

**Default Template:**

```
Header: "Special offer"
Body: "Get [discount/offer details] when you [action]. Limited time."
```

#### Styling Options

* **Appearance**: Corner radius, color themes, typography
* **Placement**: Top-left or top-right positioning

<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2FHlfp1JeTqmiuArtfXQ0R%2FQuantity%20button%20config3.png?alt=media&#x26;token=5785f43b-ab62-438d-9a59-a33e04d7f268" alt=""><figcaption></figcaption></figure>

### Example Use Cases

**Limited-Time Promotions** Pop up with "48-hour flash sale - 30% off everything!" for maximum urgency

**Free Shipping Threshold** Slide out with "Free shipping on orders over $75!" for ongoing awareness

**Welcome Offers** Pop up for new visitors: "Welcome! Get 15% off your first order"

### How It Works

1. Configure discount value
2. Add which products this Offer should apply to (or leave empty to apply to all products)
3. Add Offer message component to your offer
4. Configure Offer message content
5. Choose style (Pop up or Slide out)
6. Set styling and placement preferences
7. Preview and test



<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2FgBaYKgqLgGpAT4eRz8cd%2FOffer%20message%20-%20pop%20up%20message2.png?alt=media&#x26;token=05d54fa7-13d7-4ae4-8e6a-bc74c1476ea2" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
### Tips

* **Clear Value Props**: Immediately communicate what customers receive
* **Action Language**: Use "Save," "Get," "Unlock" in your messaging
* **Target Relevant Audiences**: Use device type, visitor type, and traffic source targeting for better relevance
* **Mobile Optimization**: Ensure messages are easily dismissible on mobile devices
{% endhint %}

### Troubleshooting

**Message Not Appearing**: Check offer status and targeting criteria (device type, visitor type, traffic source, countries)

Last updated: 7/29/25
