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

Explore FoxEcom Affiliate Program perks now ✨

--- # 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/foxkit-app/sales-boosting/pop-up.md?ask= ``` 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.