> 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/offers-popup.md).

# Offers popup

The **Offers popup** collects your current promotions in one window that shoppers open themselves, by clicking the offer icon in the header. Each offer is an image with text block, so you can show a featured collection, a seasonal campaign, or a bundle deal side by side with a heading and a button. Because nothing pops up on its own, it is the least intrusive way to keep several offers visible across the whole store.

Use it when you have more than one promotion running and do not want to interrupt shoppers with an automatic popup. The automatic ones are [Newsletter popup](/velare/customize-your-pages/overlay-group/newsletter-popup.md), [Discount popup](/velare/customize-your-pages/overlay-group/discount-popup.md), and [Before you leave](/velare/customize-your-pages/overlay-group/before-you-leave.md).

<figure><img src="/files/PR3mi2nHKmhEpCfLxVEo" 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. Open the **Header** section and turn on **Show offer** so the offer icon appears.
3. In the left sidebar, open the **Overlay** group and click **Offers popup**.
4. Set the layout options, then add one [Image with text](/velare/customize-your-pages/overlay-group/offers-popup/theme-block-image-with-text.md) block per offer.
   {% endhint %}

*Result:* clicking the offer icon in the header opens the popup with your offers.

### Section settings <a href="#section-settings" id="section-settings"></a>

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

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

| Setting                 | Description                                                                                                                                                                                                                                                                                                        |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Column gap**          | How far apart two offers sit from each other. Widen it when the offers start to blur into one block, tighten it to keep more of them in view.                                                                                                                                                                      |
| **Image ratio**         | The shape every offer picture is cropped to. The same ratio applies to all of them, so photos of different sizes still line up evenly.                                                                                                                                                                             |
| **Content alignment**   | <p>Where the text sits under each offer picture.</p><ul><li><strong>Left</strong>: easiest to read when the offers carry a full sentence or more.</li><li><strong>Center</strong>: suits short offers of one or two lines.</li><li><strong>Right</strong>: for a layout that already runs right aligned.</li></ul> |
| **Heading offer popup** | The line at the top of the window, above the offers. Use it to frame what is on show, for example *This week's deals*.                                                                                                                                                                                             |

{% hint style="info" %}
**Note:** if you want to disable this section, first hide or remove the section, then turn off the **"Show offer"** setting in the header. See [Header](/velare/set-up-your-store/header-group/header.md).
{% endhint %}

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

* An offer icon appears in the header on every page, and the popup only opens when a shopper clicks it.
* The popup content is whatever image with text blocks you added, laid out with the gap, ratio, and alignment set above.
* Leaving the section in place while turning off **Show offer** hides the entry point, so shoppers have no way to open it.

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

* [Theme block - Image with text](/velare/customize-your-pages/overlay-group/offers-popup/theme-block-image-with-text.md): the block that makes up each offer
* [Overlay group](/velare/customize-your-pages/overlay-group.md): the other panels and popups
* [Header](/velare/set-up-your-store/header-group/header.md): the **Show offer** setting that displays the icon


---

# 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/offers-popup.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.