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