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.

#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
• FoxKit subscribers list
• 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.

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.

• 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:

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

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

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