# Popup

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FIyAwBkn8eL8w0Lp69W9U%2FHyper%20docs%20screenshot%20do%20not%20delete%20(64).jpg?alt=media&#x26;token=6c5cdaa7-541d-4a08-9dad-3c7fa2e95f51" alt=""><figcaption></figcaption></figure>

## What is a pop-up?

A pop-up is an overlay that stops on-site visitors and displays an informational or promotional message to grab their attention.&#x20;

A pop-up can be a great way to grow your email list, get more newsletter sign-ups, and boost sales.&#x20;

## How to enable a Popup for your Shopify store

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

1. In the theme editor (Customize), locate **Overlay group** > **Popup**.
2. Make necessary changes.
3. **Save**.
   {% endhint %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F66TKirKsmXxon8qaD6Fs%2Fimage.png?alt=media&#x26;token=f737091f-eb15-4e6f-a028-3cc419ee2716" alt=""><figcaption></figcaption></figure>

## How to edit your Popup

### Section settings

* **Enable**: Add a pop-up on your storefront.
* **Show on home page only**: Show the pop-up on your home page only.
* **Show for visitors only**: Show the popup for visitors only. The users who log into their accounts on your website will not see the popup.
* **Trigger open automatically**: Set when the popup is displayed:
  * right after the page loaded;
  * 5 seconds after the page is loaded;
  * when customer is scrolling down.
* **Repeat open automatically:** Control how often it appears to visitors.
* **Text alignment**: Set how the pop-up content is aligned.

{% tabs %}
{% tab title="Left" %}

<figure><img src="https://content.gitbook.com/content/AJrvmfqcj9TMoPkl3bNc/blobs/htBoNtzoR3kewEuqWcN0/image.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Center" %}

<figure><img src="https://content.gitbook.com/content/AJrvmfqcj9TMoPkl3bNc/blobs/0o08kRvreSn4y6YI9OeX/image.png" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Container width**: Set the width of your pop-up.

#### Teaser button

Enable the teaser button if you want your visitors to open the pop-up **manually any time they want.**

You can change the button label and its colors.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FRG4arlMsrHyPkdIOXnDm%2Fimage.png?alt=media&#x26;token=0ee425fe-c4db-4295-90b3-94bbeb230e95" alt=""><figcaption></figcaption></figure>

### Block settings

In your pop-up, you can select the following:

* **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 image position (Top/ Left).

{% tabs %}
{% tab title="Top" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FEdr05QpfaSZhWhmWOkNY%2Fimage.png?alt=media&#x26;token=4b63a69c-3e07-40e8-8a58-ede105947943" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Left" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FgNkcdcGi4bfKSbNyjW2w%2Fimage.png?alt=media&#x26;token=3cf94e15-11ee-4178-a51d-28739eef1084" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Button**: Add a button that links to your desired page.
* **Newsletter form**: Add a newsletter form to your popup.&#x20;
* **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 icons that you have set in Theme settings > [Social media](https://docs.foxecom.com/hyper-theme/theme-settings/social-media).

***

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FkUIzEsJKOeRiz891zyf5%2Flivechat883x471%20(1).png?alt=media&#x26;token=90cbed2c-e791-49c8-9f43-49a08bed6f1f" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>