> 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.md).

# Overlay group

The **Overlay group** holds the panels and popups that open on top of your store instead of taking the shopper to a new page: the cart drawer, the search overlay, quickview, and the marketing popups. They are global, so once configured they are available from every page of the store. Used well they keep shoppers in the flow of browsing, because adding to cart, searching, or checking a product no longer costs a page load.

Read this group when you are deciding how much of the shopping experience should happen without leaving the current page, and which popups your store should show.

### 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 the section you want to edit.
   {% endhint %}

*Result:* the settings for that overlay open on the right. Some overlays only render in the preview once you trigger them, for example by clicking the cart or search icon.

### Sections in this group <a href="#sections-in-this-group" id="sections-in-this-group"></a>

| Section                                                                            | What it does                                                                                                                              | Opens when                                                                         |
| ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| [Search](/velare/customize-your-pages/overlay-group/search.md)                     | A search overlay with live results and product recommendations                                                                            | A shopper clicks the search icon in the header                                     |
| [Quickview](/velare/customize-your-pages/overlay-group/quickview.md)               | A product popup with media, variant picker, and buy buttons                                                                               | A shopper opens quickview from a product card                                      |
| [Cart drawer](/velare/customize-your-pages/overlay-group/cart-drawer.md)           | A side panel showing cart contents, with optional free shipping message, cart note, shipping estimate, gift wrap, and discount code field | A shopper adds to cart or clicks the cart icon, with the drawer cart type selected |
| [Newsletter popup](/velare/customize-your-pages/overlay-group/newsletter-popup.md) | An email signup popup with a banner image and optional collection selector                                                                | See the page for the display rules                                                 |
| [Discount popup](/velare/customize-your-pages/overlay-group/discount-popup.md)     | A promotional popup built around a banner and a promo button                                                                              | See the page for the display rules                                                 |
| [Offers popup](/velare/customize-your-pages/overlay-group/offers-popup.md)         | A popup of promotional banners, built from image with text blocks                                                                         | A shopper clicks the offer icon in the header                                      |
| [Before you leave](/velare/customize-your-pages/overlay-group/before-you-leave.md) | An exit-intent popup with a discount code and recommended products                                                                        | A shopper is about to leave, after the delay you set                               |

### Suggested reading order <a href="#suggested-reading-order" id="suggested-reading-order"></a>

1. Start with [Cart drawer](/velare/customize-your-pages/overlay-group/cart-drawer.md) and [Search](/velare/customize-your-pages/overlay-group/search.md). They are part of everyday shopping, not campaigns.
2. Then [Quickview](/velare/customize-your-pages/overlay-group/quickview.md), which affects how product cards behave across collection pages.
3. Read the four popup pages last, and set up only the ones you actually need. Showing several popups to the same visitor is what makes a store feel noisy.

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

* [Header](/velare/set-up-your-store/header-group/header.md): the icons that open the cart drawer, search, and offers popup
* [Mobile navigation bar](/velare/set-up-your-store/mobile-navigation-bar.md): a separate global section that gives mobile shoppers the same shortcuts
* [Header group](/velare/set-up-your-store/header-group.md) and [Footer group](/velare/set-up-your-store/footer-group.md): the other global groups


---

# 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.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.