Pop-up

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

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

Visibility & pop-up 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.

Discount code needs to match 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.

  • Announcement: A pop-up with news and a call-to-action button.

Content settings

Add needed text in the provided space.

Data collection

Decide where the data will be collected:

  • Shopify customers list

  • FoxKit subscribers list

Design

Pick a template

Merchants determine which design will suit their store. There are 4 templates in total.

Color & image

Pick out the desired color for text, button, background, teaser, etc. Add an image when choosing between any template 2, 3, or 4.

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

    • Condition: Show the pop-up on the specific pages that meet all the rules or any rules 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.

Display frequency

You can set the display frequency of the pop-up.

Teaser button settings

The teaser button appears when the pop-up is not displayed to encourage the users to subscribe later.

You can set it to always show the teaser button or only after the popup has opened and the customer clicks the 'X' close button.

The position of the button can be set to Left or Right.

Last updated