# Pop-up

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FfyV5iTrbF1s92OAQXH3e%2FFox-BG%20Light%20(16).jpg?alt=media&#x26;token=e8841f29-0f4e-4269-aae7-0805abd32c20" alt=""><figcaption></figcaption></figure>

The **Popup** section lets you display eye-catching promotions, newsletter sign-ups, or important messages when visitors land on your store.

{% hint style="info" %}
Form submissions are saved to the **Customers** section of your Shopify admin.
{% endhint %}

## How to enable a pop-up

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**)
2. On the left-sidebar, locate **Popup**&#x20;
3. Click **Enable**
4. **Save.**
   {% endhint %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FQgrZA1gGm1vCAAeAvSaV%2Fimage.png?alt=media&#x26;token=e3276144-8d8d-4b70-9c1c-7c4956d28ab0" alt=""><figcaption></figcaption></figure>

## How to customize the popup

### Section settings

| Setting                    | What it does                                                                                                                                                                                                                                                             |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Enable                     | Toggle the popup on or off.                                                                                                                                                                                                                                              |
| Show on home page only     | Limit display to the homepage.                                                                                                                                                                                                                                           |
| Show for visitors only     | Show only to customers who aren’t logged in.                                                                                                                                                                                                                             |
| Trigger open automatically | <p>Decide when it appears:</p><ul><li>Open immediately after page loaded</li><li>Delay 5 seconds after page loaded</li><li>Customers scrolling down</li><li>Customer is leaving the website.</li></ul><p>On mobile, the popup shows immediately when the page loads.</p> |
| Repeat open automatically  | Choose how often to repeat.                                                                                                                                                                                                                                              |
| Text alignment             | Left or center align content.                                                                                                                                                                                                                                            |
| Container width            | Adjust the popup’s container width.                                                                                                                                                                                                                                      |
| Teaser button              | <p>Add a small button customers can click to open the popup manually. </p><p>Set the <strong>Button label</strong> (e.g. “Newsletter”) and customize the <strong>Teaser popup color</strong>.</p>                                                                        |

### Block settings

In your pop-up, you can add:

* **Heading and Text**: Fill in your heading and text for the pop-up. You can only change the text size of the heading.
* **Image**: Select an image shown in your pop-up can image position (Top/Left)
* **Button**: Edit your button label
* **Discount code**: Fill in the discount code you want to offer your visitors and the apply button label. To know more about discounts and discount codes, see [Discounts](https://help.shopify.com/en/manual/discounts).
* **Social links**: Showcase your store's social links. The social icons shown will be based on your **Theme settings** > **Social media** > [**Social accounts**](https://docs.foxecom.com/zest-theme/theme-settings/social-media#social-accounts).

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FSRCDeMjzO9LmXPHOA6gh%2Fimage.png?alt=media&#x26;token=1044bcbf-566a-4cc9-9e21-3537b8c51ac2" alt=""><figcaption></figcaption></figure>


---

# 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/zest-theme/pages-global-sections/pop-up.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.
