> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/megamog-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/megamog-theme/sales-boosting/pop-up.md).

# Pop-up

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

A **pop-up** is an overlay that stops on-site visitors and displays an informational or promotional message to grab their attention. You can create an exit-intent pop-up, a discount pop-up, or a special offer pop-up with a coupon.&#x20;

A pop-up can be a great way to grow your email list, get more newsletter sign-ups, boost sales, and reduce cart abandonment.

This article helps you create your store's pop-up using **FoxKit**.

{% tabs %}
{% tab title="Collect leads" %}
![](https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FkxWH8IRdTxcdLqmRnp6V%2FScreen%20Shot%202021-10-30%20at%2017.25.26.png?alt=media\&token=c3ccd752-9599-4eac-9ced-bc91cd94ed60)
{% endtab %}

{% tab title="Give a discount code" %}
![](https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FPWVxUDQDNNixI8gsGY0A%2FScreen%20Shot%202021-11-16%20at%2020.12.00.png?alt=media\&token=bf2e6495-8b38-4033-8935-76e11681f8f7)
{% endtab %}

{% tab title="Subscribe to get discount" %}
![](https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F4dajOVyQ1pZgUWyBNkMd%2FScreen%20Shot%202021-11-16%20at%2020.14.22.png?alt=media\&token=bd0ac06f-3f8d-4d6c-8310-ab24f997fc02)
{% endtab %}

{% tab title="Announcement" %}
![](https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FC574CBoz9OqegwMX27lM%2FScreen%20Shot%202021-11-16%20at%2020.19.35.png?alt=media\&token=147e09b0-d2da-43e6-b005-8dede275ee0f)
{% endtab %}
{% endtabs %}

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

1\. Go to **FoxKit** > **FoxKit power** > Choose **Pop-up.**

2\. Make necessary changes.

3\. **Save.**
{% endhint %}

<figure><img src="/files/FWbzBePW6CWTNRAQqEf2" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_foxkit_pop_up&#x26;utm_campaign=anchor-text&#x26;utm_term=install_xflow_back_in_stock_automation_free">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>

## General

### Status & Popup type

Check the box to set the wheel **Active** and show it on mobile if needed. Choose which type of pop-up to display (shown at the top of the article).

* **Collect leads**: A pop-up with a subscribe form to collect your customer's email.
* **Give a discount code**: A pop-up with a discount code to offer a promotion.
* **Subscribe to get discount**: A pop-up with a subscribe form to collect customer' email and offer your customer a discount code after they have subscribed.
* **Announcement**: A pop-up with news and a call-to-action button.

<figure><img src="/files/R73HGEU3uOj21tkXkx8b" alt=""><figcaption></figcaption></figure>

### Data collection

Decide where the data will be collected:

* [Shopify customers list](https://help.shopify.com/en/manual/customers/manage-customers)
* [FoxKit subscribers list](/megamog-theme/manage/subscribers.md)
* Additional integrations like **Klaviyo**, **Mailchimp**, **Omnisend**, or **SendGrid** can be added through the integration menu.

<figure><img src="/files/aRRCHK0pI9aEM0ECctaf" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/frWRlNe3aTrPN9ZvW0bP" alt=""><figcaption></figcaption></figure>

## Design

### Pop-up template

Merchants determine which design will suit their store. There are **4 templates** in total.

<figure><img src="/files/V22pGOTvfErVsnCgSVrV" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="No image" %}

<div><figure><img src="/files/uc8qd2CqhMMg24HSEwhO" alt=""><figcaption><p>No image</p></figcaption></figure> <figure><img src="/files/IH7nRDc1L2YJA6fhOW7x" alt=""><figcaption></figcaption></figure></div>
{% endtab %}

{% tab title="Image top" %}

<div><figure><img src="/files/9l9hVOBPMSVPJa2nhYTz" alt=""><figcaption><p>Image top</p></figcaption></figure> <figure><img src="/files/tV5SDyoPs38OpxmBIVLE" alt=""><figcaption></figcaption></figure></div>
{% endtab %}

{% tab title="Image left" %}

<div><figure><img src="/files/8ZWv3ZiUY7dmZ5tNZiuz" alt=""><figcaption><p>Image left</p></figcaption></figure> <figure><img src="/files/WmKbEhCwcSesWtLc0v5g" alt=""><figcaption></figcaption></figure></div>
{% endtab %}

{% tab title="Image left padded" %}

<div><figure><img src="/files/AnFJGLL1iJbd21TpjG5P" alt=""><figcaption><p>Image left padded</p></figcaption></figure> <figure><img src="/files/tYi9MJUxv4yBDmgG8bkY" alt=""><figcaption></figcaption></figure></div>
{% endtab %}
{% endtabs %}

Customize the Pop-up **Container width on desktop**:

* Use the slider to increase or decrease the width (e.g., 550px).
* Note: Mobile width is automatically adjusted to ensure responsiveness.

<figure><img src="/files/3m0GSWByRGRM4BBUTM2E" alt=""><figcaption></figcaption></figure>

You can upload or replace the **Banner** image:

* Click **Replace** or drag and drop an image to upload.
* Ensure the image is visually engaging and fits your branding.

<figure><img src="/files/aLEkQ3f3fSwq3S21uPBi" alt=""><figcaption></figcaption></figure>

### Colors

Pick out the desired color for **Text**, **Button**, **Background**, **Teaser**, etc. to personalize your pop-ups' appearance to align with your brand's color scheme.

<figure><img src="/files/8hSEFgABuBcHBkfD0cjF" alt=""><figcaption></figcaption></figure>

## Content

### Pop-up content

* **Title:** Use the field titled "Title" to create a headline for your popup. This should be a concise, attention-grabbing message. (e.g., "Special gift for our subscribers")
* **Description:** Add supporting text in the "Description" field. Use this area to provide details about the offer or message. (e.g., "Enter your email to get 30% off for all products.")

<div><figure><img src="/files/6jSkM8nuD71xB4pgSyod" alt=""><figcaption></figcaption></figure> <figure><img src="/files/BAqC3cZG985cIjh2Wfgd" alt=""><figcaption></figcaption></figure></div>

### Fields

Customize your popup forms with additional fields to capture more detailed information from your audience.

{% hint style="warning" %}
This setting is available for the [Popup type](#status-and-popup-type) as **Collect leads** or **Subscribe** **to get discount.**

![](/files/V4fHT9GGR80uBXdlWF9k)
{% endhint %}

* The popup includes an "Enter your email" field by default.
* Use the **Add more field** button to include additional fields.

<figure><img src="/files/6wk5kvElkY92oXEdPyfF" alt=""><figcaption></figcaption></figure>

* Choose the type of field you want to add. Options include:

  * **First Name**
  * **Last Name**
  * **Phone**
  * **Birthday**
  * **Agree to Terms Checkbox**

  <figure><img src="/files/A6TPio8jQk3ZehS0A3CM" alt=""><figcaption></figcaption></figure>
* Once you have added a new field to your pop-up, enter a descriptive **Field label** for the field (e.g., "First Name"). The character limit is displayed below the input box.&#x20;
* If this field is essential for form submission, check the **Required field** box.

<figure><img src="/files/jPEQo0UiLiw4NQFU3C5T" alt=""><figcaption></figcaption></figure>

* Click the **Add field** button to save and include this field in your popup form.

*For example:*

<div><figure><img src="/files/fbjUrT2eVR4oACGZ7a7g" alt=""><figcaption></figcaption></figure> <figure><img src="/files/wRPLQ5U6LtIlZyIMP4Wa" alt="" width="510"><figcaption></figcaption></figure></div>

{% hint style="info" %}
You can change the order of these fields by using a simple **drag-and-drop** feature.
{% endhint %}

* In the **Button label** field, customize the text on the call-to-action button (e.g., "Get my 30% off").

<div><figure><img src="/files/QSQpO93fqQ93Xy4jYWse" alt=""><figcaption></figcaption></figure> <figure><img src="/files/0RJiSDurp9tcZv84FV4o" alt="" width="505"><figcaption></figcaption></figure></div>

* Use the **Consent disclaimer** field to include a legal note, such as privacy policies and terms of service.
  * Use rich text formatting (bold, italic, links) to ensure the message is clear and professional.
  * Leave this field blank to hide.

<div><figure><img src="/files/62cL9kEAQsB8SaYz0wjq" alt=""><figcaption></figcaption></figure> <figure><img src="/files/VS5AuVYMPdoH5hQp3bCs" alt="" width="512"><figcaption></figcaption></figure></div>

### Success content

The **Success Content** in FoxKit popups allows you to deliver a customized message or reward (such as a coupon code) after a visitor engages with your popup.

<div><figure><img src="/files/SOCNK3J1VYQZcIhiMPrF" alt=""><figcaption></figcaption></figure> <figure><img src="/files/Sqf2m2Geap7Mys2bUyWD" alt="" width="508"><figcaption></figcaption></figure></div>

* Enter the discount code in the **Discount Code** field (e.g., "30\_OFF").

:white\_check\_mark: If you don’t have a discount code yet, click the **Create discount** link to generate one in your store system.

<figure><img src="/files/oPVeoFwHJKKd69acBqKd" alt=""><figcaption><p>Discount codes picker</p></figcaption></figure>

{% hint style="warning" %}
The Discount code must match an available discount code in your [Shopify Discounts](https://help.shopify.com/en/manual/discounts).
{% endhint %}

{% hint style="info" %}
Easily search and select from a list of available [Shopify Discount](https://help.shopify.com/en/manual/discounts) codes using the module **discount codes picker.**
{% endhint %}

* Change the **Copy button label** text if needed (default: "Copy"). This button allows users to easily copy the discount code.
* Write a custom thank-you message in the **Thank you message** field. Ensure the message is clear and aligns with your brand tone.&#x20;
  * *For example:* "Congratulations! You have got this coupon."&#x20;

## Display settings

### Trigger

Determine when the pop-up is displayed, it can be either:

* After the page is loaded;
* After a specific time (seconds);
* After the visitor scrolls down the page;
* When the visitor is about to leave the website (desktop view only);
* Not open the pop-up automatically.

<figure><img src="/files/d56hTVsvAvXZR3yWicRT" alt=""><figcaption></figcaption></figure>

### Display frequency

You can set the display frequency of the pop-up.

<figure><img src="/files/N8NDrqJ60WQ9CqegJs3G" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Note**: We'll stop automatically showing this popup to customers who have already converted.
{% endhint %}

### Display condition&#x20;

Determine where the pop-up appears:&#x20;

* on all pages:  Show the pop-up on every page
* on certain pages on your website:
  * **Home page only**: Show the pop-up on the home page only.
  * **Custom pages**: Show the pop-up on the specific pages that meet **All conditions** or **Any condition** you set.&#x20;
    * The condition can be set based on the **page type** or **page URL**. For page URL, don't forget the protocol "http\://", "https\://".
      * **Is equal to**: Add the page type or page URL you want the pop-up to appear on.
        * *For example*: 'Page type is equal to Product pages' to display the popup on all product pages of your website.
    * **Is not equal to** Add the page type or page URL you do not want the pop-up to appear on.
    * **Contains**: Add the page type or page path segment value to display the pop-up on URLs that contain that value.
      * *For example*: 'Page URL contains all' to display the pop-up on page URLs that have the word 'all'.
    * **Does not contain**: Add the page type or page path segment to exclude the pop-up on certain a page type or URLs that contain that value.

<figure><img src="/files/RjcT4q9wRsGOdDZj59WQ" alt=""><figcaption></figcaption></figure>

### Teaser button

The teaser button appears when the pop-up is not displayed to encourage the users to subscribe later.&#x20;

<figure><img src="/files/sQ967wASPZV6vqwu1ewm" alt=""><figcaption></figcaption></figure>

Check the **Show teaser button** option to enable it. Uncheck it to disable the teaser button completely.

You can control when the teaser button is visible:

* **Always**: The teaser button remains visible at all times.
* **If customers close the pop-up**: The teaser button appears only after the customer closes the pop-up.

Select the **Position** for the teaser button on the page:

* Middle left
* Middle right
* Bottom left
* Bottom right

Add a clear and concise **Title** to the teaser button (e.g., "Get a Discount"). This title appears inside or alongside the button to encourage user interaction.

<div data-full-width="false"><figure><img src="/files/jkhSO8a1h10VtA30rWGx" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=foxecom&#x26;utm_medium=help_center_foxkit_pop_up&#x26;utm_campaign=anchor_text&#x26;utm_term=explore_foxecom_affiliate_program_perks_now">Explore FoxEcom Affiliate Program perks now</a> <span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>