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


---

# 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/sleek-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.