# Pop-up

{% embed url="<https://youtu.be/JfGoqHvXCME>" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FP34fVfC4fhXzpDNPfpQv%2Fimage.png?alt=media&#x26;token=56fa3cd7-ddae-4330-b854-34b578f51ca4" 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 set up a pop-up

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

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FN8ClubSZg3HW7AWltYHw%2Fimage.png?alt=media&#x26;token=4b487a48-b66e-483a-b2c6-a010a728d4b1" alt=""><figcaption></figcaption></figure>

## Configure your pop-up

### General 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://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FJPxt0fNeDpBsmS4UN8Yt%2Fimage.png?alt=media&#x26;token=9440c758-b70a-4ca7-b703-b834b2a1a69c" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Center" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FbyEOYdkM3rP426ff19L2%2Fimage.png?alt=media&#x26;token=17c75dc0-4602-446f-b003-97f31a9426da" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FKZspMoxPTLnIckhgF9BL%2Fimage.png?alt=media&#x26;token=b5b21b11-5f64-466b-b843-8866aad5c057" alt=""><figcaption></figcaption></figure>

### 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://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FjWlmVztveed2xeTPahfa%2Fimage.png?alt=media&#x26;token=9de7febf-a6f3-4293-bbb4-4d0d55d07aca" 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).
* **Button**: Add a button that links to your desired page.
* **Newsletter form**: Add a newsletter form to your popup. There are 2 designs that you can choose from:

{% tabs %}
{% tab title="Design 1" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F7kPBwRgfWpPzM4UvXUWa%2Fimage.png?alt=media&#x26;token=f840490e-6763-4361-b35e-f2a6535e6101" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Design 2" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FCgon2WGw4Ka3EKBxumZe%2Fimage.png?alt=media&#x26;token=a58308dd-987b-4403-952b-5bdb1bf6f6d2" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **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/sleek-theme/theme-settings/social-media).