FoxKit All-in-one Sales Boost
Try FoxKit freeResourcesOther solutions
  • What is FoxKit?
  • How to set up FoxKit features
  • Account & Billing
    • Trial & Plan Subscription
    • FoxKit free trial
    • FoxKit pricing plans
    • How to use discount code
  • Analytics
  • Changelog
  • Refund Policy
  • Upsells
    • Back-in-stock alerts
    • Free shipping goal
    • In-cart upsell
    • Volume discounts
  • CROSS-SELLS
    • Pre-purchase offers
    • Product bundles
    • Related products
  • Sales-boosting
    • Countdown
      • Cart countdown
      • Countdown timer
      • Stock scarcity
    • Lucky wheel
    • Mega menu
    • Pop-up
    • Pre-orders
    • Sales notifications
    • Size chart
    • Variant group images
  • Manage
    • Subscribers
    • Settings
    • Translation
  • FAQ
    • Features
    • How are Back-in-stock subscriptions and Subscribers list different?
    • Quickly create FoxKit offers and promotions in your Shopify Admin
    • Translate my FoxKit features
    • Set up Shopify Automation when customers subscribe for Pop-up
Powered by GitBook
On this page
  • General
  • Status & Popup type
  • Data collection
  • Design & Content
  • Pop-up template
  • Main content
  • Fields
  • Success content
  • Colors
  • Display settings
  • Trigger
  • Display frequency
  • Display condition
  • Teaser button
  1. Sales-boosting

Pop-up

In this article, you'll learn how to create website pop-ups to collect emails, promote sales, and cross-sell products, etc.

PreviousMega menuNextPre-orders

Last updated 4 months ago

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:

  • Additional integrations like Klaviyo, Mailchimp, Omnisend, or SendGrid can be added through the integration menu.

Design & Content

Pop-up template

Merchants determine which design will suit their store. There are 5 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.

Enter a URL in the Banner link field (available when the Pop-up template is Banner only Pop-up template) to make the banner clickable.

  • Use the checkbox to decide whether the link opens in a new tab:

    • Checked: Opens the link in a new browser tab.

    • Unchecked: Opens the link in the same tab.

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

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

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

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.

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.

This setting is available for the as Collect leads or Subscribe to get discount.

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 .

Easily search and select from a list of available codes using the module discount codes picker.

✅
Shopify customers list
FoxKit subscribers list
Shopify Discounts
Shopify Discount
Popup type
No image
Image top
Image left
Image left padded
Banner only (Available for the Announcement Pop-up type only)
Discount codes picker
✨
Install FoxTransfer Chrome Extension FREE here
Explore FoxEcom Affiliate Program perks now