# Popup

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

## What is a Popup? <a href="#what-is-a-pop-up" id="what-is-a-pop-up"></a>

A Popup is an overlay that stops on-site visitors and displays an informational or promotional message to grab their attention.

A Popup can be a great way to grow your email list, get more newsletter sign-ups, and boost sales.

## How to customize the Popup <a href="#how-to-customize-your-cart-drawer" id="how-to-customize-your-cart-drawer"></a>

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

1. In the theme editor (**Customize**), scroll down to the **Overlay group** area.
2. Select the **Popup** section.
3. Make necessary changes.
4. Click **Save**.
   {% endhint %}

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

### Section settings

#### Enable the Popup

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

Toggle this option to activate or deactivate the pop-up.

#### Show on home page only

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

When this option is enabled:

* The popup will appear **only on your store’s homepage**
* It will not appear on product, collection, or other pages

When disabled:

* The popup can appear across the entire website.

#### Show for visitors only

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

Enable this option to show the popup **only to users who are not logged in**.

Logged-in customers will not see it.

{% hint style="info" %}
Useful if your pop-up offers:

* A signup discount
* New visitor promotions
* Newsletter incentives
  {% endhint %}

#### Trigger open automatically

<figure><img src="/files/1Oc2kUySr06WAx7fDiWw" alt=""><figcaption></figcaption></figure>

This setting controls **when the popup appears**.

You can choose from:

* **Open immediately after page loaded**: The popup appears the moment the page finishes loading.
* **Delay 5 seconds after page loaded**: The popup will open **5 seconds** after the page loads.
* **Customers scrolling down**: The popup appears only **after the customer scrolls** down the page.

{% hint style="info" %}
**Note**: The last option works only on desktop. On mobile devices, the popup always displays after the page loads (Shopify limitation).
{% endhint %}

#### Time before popup appears again

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

This controls how often a returning visitor sees the popup.

Options include:

* **No repeat** – shows only once
* **Every 30 minutes**
* **Every 1 hour**
* **Every 6 hours**
* **Every 12 hours**
* **Every day**
* **Every 3 days**
* **Every week**
* **Every 2 weeks**
* **Every month**

This prevents the popup from appearing too frequently and creating a poor user experience.

### Block settings

#### Popup image

{% hint style="warning" %}
Popup image block only visible if certain conditions are met.
{% endhint %}

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

* **Image**: Upload the main image that will appear.
* **Image mobile:** Upload an optimized version of the image specifically for mobile devices.

#### Nested dynamic blocks

You can add multiple dynamic blocks within this section. Learn more about each block type here.

* **Basic**:
  * [Button](/pebble-theme/theme-blocks/basic.md#button)
  * [Divider](/pebble-theme/theme-blocks/basic.md#divider)
  * [Heading](/pebble-theme/theme-blocks/basic.md#text)
  * [Icon](/pebble-theme/theme-blocks/basic.md#icon)
  * [Image](/pebble-theme/theme-blocks/basic.md#image)
  * [Subheading](/pebble-theme/theme-blocks/basic.md#text)
  * [Text](/pebble-theme/theme-blocks/basic.md#text)
  * [Video](/pebble-theme/theme-blocks/basic.md#video)
* **Form:**
  * [Newsletter](/pebble-theme/theme-blocks/forms.md#newsletter)
* **Layout:**
  * [Grid](/pebble-theme/theme-blocks/layout.md#grid)
  * [Group](/pebble-theme/theme-blocks/layout.md#group)
  * Spacer
* **Storytelling**
  * [Section header](/pebble-theme/theme-blocks/storytelling.md#section-header)


---

# Agent Instructions: 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:

```
GET https://docs.foxecom.com/pebble-theme/global-sections/popup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.