> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/overlay-group/before-you-leave.md).

# Before you leave

The **Before You Leave** popup appears after a configurable delay to re-engage customers before they leave. Add promotional content, share a discount code, and recommend products from a collection of your choice.

Set the delay using **Show time after (seconds)**. Unlike this popup, the [**Newsletter popup**](/velare/customize-your-pages/overlay-group/newsletter-popup.md) collects email addresses, the [**Discount popup**](/velare/customize-your-pages/overlay-group/discount-popup.md) highlights a specific promotion, and the [**Offers popup**](/velare/customize-your-pages/overlay-group/offers-popup.md) opens only when a shopper clicks the offer icon in the header.

<figure><img src="/files/3baHActGYcYf3K42vvbD" alt=""><figcaption></figcaption></figure>

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, open the **Overlay** group.
3. Click **Before you leave**.
4. Set **Show time after (seconds)**, upload the banner, then fill in the content and pick the recommended products collection.
   {% endhint %}

*Result:* the popup preview opens in the editor with your discount code and recommended products.

### General settings <a href="#general-settings" id="general-settings"></a>

<figure><img src="/files/x2S5o2Hgu6hQBDaBnocB" alt=""><figcaption></figcaption></figure>

| Setting                       | Description                                                                                                                                              |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show time after (seconds)** | The delay before the popup appears. Enter the number of seconds shoppers can browse before it is shown.                                                  |
| **Banner image**              | The picture shown beside the offer, sharpest at ***380px x 423px***. Pick something that reads at a glance, since the shopper is already on the way out. |

#### Content settings <a href="#content-settings" id="content-settings"></a>

<figure><img src="/files/DEwkRVf2Rfk5ycETSFzO" alt=""><figcaption></figcaption></figure>

| Setting           | Description                                                                                                                                                              |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Subheading**    | A short line above the headline, good for the hook that stops a leaving shopper, for example *Wait, one more thing*.                                                     |
| **Heading**       | The largest line in the popup and the reason someone stays. Put the offer here, not a greeting.                                                                          |
| **Description**   | A sentence under the headline explaining the terms, such as what the code applies to or when it expires.                                                                 |
| **Discount code** | The code shoppers copy from the popup and paste at checkout. Create a matching discount in **Shopify admin > Discounts** first, otherwise they get an error at checkout. |

#### Recommended products <a href="#recommended-products" id="recommended-products"></a>

<figure><img src="/files/9Nm1msKjlhh9n5zHpSTs" alt=""><figcaption></figcaption></figure>

| Setting        | Description                                                                                                                                |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| **Heading**    | The line above the row of products, for example *You might still like these*.                                                              |
| **Collection** | The collection those products are pulled from. Pick one that suits a shopper about to leave, such as bestsellers or items already on sale. |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* Shoppers who are leaving see the discount code and a set of products they can still click into.
* The code shown here is only text in the popup. It works at checkout only if a discount with the same code exists in your Shopify admin.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Overlay group](/velare/customize-your-pages/overlay-group.md): the other panels and popups
* [Newsletter popup](/velare/customize-your-pages/overlay-group/newsletter-popup.md) and [Discount popup](/velare/customize-your-pages/overlay-group/discount-popup.md): the other two automatic popups
* [Offers popup](/velare/customize-your-pages/overlay-group/offers-popup.md): the popup shoppers open themselves


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/overlay-group/before-you-leave.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.