Pop-up
In this article, you'll learn how to create website pop-ups to collect emails, promote sales, and cross-sell products, etc.
Last updated
In this article, you'll learn how to create website pop-ups to collect emails, promote sales, and cross-sell products, etc.
Last updated
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.
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.
Decide where the data will be collected:
Additional integrations like Klaviyo, Mailchimp, Omnisend, or SendGrid can be added through the integration menu.
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.
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.")
Customize your popup forms with additional fields to capture more detailed information from your audience.
This setting is available for the 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.
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").
The Discount code must match an available discount code in your Shopify Discounts.
Easily search and select from a list of available Shopify Discount 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."
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.
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.
You can set the display frequency of the pop-up.
Note: We'll stop automatically showing this popup to customers who have already converted.
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.
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.
If you don’t have a discount code yet, click the Create discount link to generate one in your store system.
