# Popup

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F8AWY0TE7AZJgeRSTz0p2%2FFox-BG%20Light%20(1).jpg?alt=media&#x26;token=ad422d59-f6c0-4e2d-8b31-7b2d4377ce29" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F3sqdyaY084s3hYJvu3kl%2Fimage.png?alt=media&#x26;token=211751c7-2733-40d1-888a-a49a10e91d04" alt=""><figcaption></figcaption></figure>

### Section settings

#### Enable the Popup

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FnnheNqJMtzZPONKoqC9i%2Fimage.png?alt=media&#x26;token=5d305001-4df4-4736-84de-0ecdf1b0089c" alt=""><figcaption></figcaption></figure>

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

#### Show on home page only

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FaNrdnYeMDRL6zmtEA8Oq%2Fimage.png?alt=media&#x26;token=fdd4e79d-e413-4739-a2d5-43fbe19a0175" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FQzAXkJHZiRNRSXNDXulx%2Fimage.png?alt=media&#x26;token=0e010b7d-95bd-421e-8117-52ff7cdec657" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FhPeEFdgyWXvP7VhLrJQh%2Fimage.png?alt=media&#x26;token=eda1d0dd-e26b-41bc-8002-13b82e4c733c" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FL0Rl6hbNOpcDq4Q6a8Iv%2Fimage.png?alt=media&#x26;token=6330dc28-3a84-4904-b073-7e770e2e6d3e" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FKl9c9Xuov8Wc83SVxb7J%2Fimage.png?alt=media&#x26;token=8bdd7e6d-47e2-4969-879f-c17cb2ac19af" 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](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#button)
  * [Divider](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#divider)
  * [Heading](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#text)
  * [Icon](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#icon)
  * [Image](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#image)
  * [Subheading](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#text)
  * [Text](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#text)
  * [Video](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#video)
* **Form:**
  * [Newsletter](https://docs.foxecom.com/pebble-theme/theme-blocks/forms#newsletter)
* **Layout:**
  * [Grid](https://docs.foxecom.com/pebble-theme/theme-blocks/layout#grid)
  * [Group](https://docs.foxecom.com/pebble-theme/theme-blocks/layout#group)
  * Spacer
* **Storytelling**
  * [Section header](https://docs.foxecom.com/pebble-theme/theme-blocks/storytelling#section-header)