# Pop-up
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**.
**Steps:**
1\. Go to **FoxKit** > **FoxKit power** > Choose **Pop-up.**
2\. Make necessary changes.
3\. **Save.**
## 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.
*No image* 
*Image top* 
*Image left* 
*Image left padded* 
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.
This setting is available for the [Popup type](#status-and-popup-type) as **Collect leads** or **Subscribe** **to get discount.**
* 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:*
 
You can change the order of these fields by using a simple **drag-and-drop** feature.
* 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").
✅ If you don’t have a discount code yet, click the **Create discount** link to generate one in your store system.
The Discount code must match an available discount code in your [Shopify Discounts](https://help.shopify.com/en/manual/discounts).
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.**
* 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.
**Note**: We'll stop automatically showing this popup to customers who have already converted.
### 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.