# Pop-up {% embed url="" %} 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. 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 %}

Install XFlow Back In Stock Automation FREE

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

### Data collection Decide where the data will be collected: * [Shopify customers list](https://help.shopify.com/en/manual/customers/manage-customers) * [FoxKit subscribers list](https://docs.foxecom.com/foxkit-app/manage/subscribers) * Additional integrations like **Klaviyo**, **Mailchimp**, **Omnisend**, or **SendGrid** can be added through the integration menu.

## Design ### Pop-up template Merchants determine which design will suit their store. There are **4 templates** in total.

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

{% endtab %} {% tab title="Image top" %}

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

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

{% 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.

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.

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

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

### 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.** ![](https://1222926902-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2gqo9glygWoTkEqRV1dN%2Fuploads%2FrgzDGE61K6gxIdqjOB9z%2Fimage.png?alt=media\&token=9a00acf8-a094-443f-87ea-bd82cee93208) {% endhint %} * The popup includes an "Enter your email" field by default. * Use the **Add more field** button to include additional fields.

* Choose the type of field you want to add. Options include: * **First Name** * **Last Name** * **Phone** * **Birthday** * **Agree to Terms Checkbox**

* 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. * If this field is essential for form submission, check the **Required field** box.

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

{% 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").

* 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.

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

* 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.

{% 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. * *For example:* "Congratulations! You have got this coupon." ## 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.

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

{% hint style="info" %} **Note**: We'll stop automatically showing this popup to customers who have already converted. {% endhint %} ### Display condition Determine where the pop-up appears: * 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. * 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.

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

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.