Set Up The Pop-ups App


💡 The Version 2 of the Pop-up app is now released! The Pop-up app now has more features than before. See below for the new features.

The Pop-ups app can serve multiple purposes. It can grab your visitors' attention, increase visitor retention when they try to leave your page, or offer incentives through discounts. It can even be used as a promotion tool for specific products or as a newsletter subscriptions email capture system!

The Pop-ups app is a versatile tool, which can definitely boost your store's conversions with a bit of careful planning and marketing strategies, so make sure to leverage the most of the app by setting everything up correctly:

Please keep in mind that having multiple pop-ups enabled on your store will result in them displaying, by rotation, when their conditions are met.

For example, having 3 different pop-ups that trigger every 5 page views will mean that one pop-up is activated, then after 5 page views, the next one, and so on.

Once all pop-ups are triggered, they will not be displayed again until the cool-off period passes (which can be adjusted in the app's settings).

The Pop-up app is found under your Apps list, inside the Marketing category:

Here's how to set up pop-ups in your store.

1. Creating a new Pop-up

You start by creating a new pop-up by clicking the Create pop-up button:

  1. Choose a Pop-up type.

When creating a new Pop-up, you can choose between 3 Pop-up types:

    1. Email capture without discount
      • Ask visitors to subscribe to your email list, without offering any discount.
    1. Email capture with discount
      • Ask visitors to subscribe to your email list in exchange for a discount code.
    1. Announcement
      • Inform your visitors about your latest arrivals or seasonal sales.

Once you are ready with your choice, simply click the Set up pop-up button to start customizing it.

  1. Customize your Pop-up.

Regardless of the Pop-up type you chose, the following settings can be customized, which are divided into 6 sections (with only 5 sections if the Announcement Pop-up Type is Chosen):

Status section

  • Status - Determine if this Pop-up is Active on the store. If you only want to design the Pop-up but don't want to activate it yet, you can set this to Inactive.
  • Internal Name - Since you can create multiple Pop-ups, you can easily distinguish between them by providing them an internal name.

Media section

  • Upload an Image or logo
    • If you would like to upload an image to appear on the Pop-up, you can select first the available image positions: Background, Left, or Right:
Note that on mobile, the image will be repositioned on top of the text to ensure proper readability on small screens. The background option will not be affected.

    • Once you select your desired image position, you can upload your desired image to use.
    • You can also have your store logo appear on the Pop-up by enabling the Show logo option.

Design Settings

  • You can customize the Pop-up here further by changing the colors (background color, text color, button color), the button style, and the Primary button text.
  • You can also enable a visible Dismiss button by enabling the related option. To ensure that all visitors can visually see a button that they can click to close the Pop-up (the Pop-up can still be closed by clicking outside of the Pop-up)
  • GDPR Compliance Settings - clicking the link here will bring you to the overall Settings of the Pop-up app. You can scroll down below for the specific contents of that section.

Main Popup Content

This is where you can edit and customize the main text content of the Pop-up. The sections that are customizable are dependent on the Pop-up type you chose:

For Email capture without discount and Email capture with discount Pop-up types:

  • Heading
  • Heading text size (in pixels)
  • Body
  • Body text size (in pixels)
  • Email field placeholder (the text that you would like to be displayed in the email field when no email is being entered yet)
  • Alignment

For Announcement Pop-up type:

  • Heading
  • Heading text size (in pixels)
  • Body
  • Body text size (in pixels)
  • Alignment

Trigger

  • The next section is the Trigger section, which allows you to choose how the Pop-up would appear on your store:
    • Trigger Type
      • On Page Load with Delay - Pop-up will automatically appear after X seconds, that you can define
      • On Exit Intent - Pop-up will only be displayed if the visitor intents to leave the store (by moving the mouse pointer outside the browser or quickly scrolling upward on the store on a mobile device)

Success Pop-up Content (For Email capture without discount and Email capture with discount Pop-up types only)

Email capture without discount

Email capture with discount

  • You can then customize the resulting Pop-up design that appears after a visitor enters a valid email address, like the Heading text, Body, and Discount code (for Email capture with discount Pop-up type).

💡 Discount codes defined inside your Pop-up should be created on your Shopify store first via Shopify admin > Discounts.

In addition, Shopify discount codes can now be combined with automatic Vitals discount codes on order, using Shopify's Discount Combinations feature. More information about this and its requirements can be found here: Combine Shopify Discounts with Vitals Discounts in an Order

  1. Save the Pop-up

Once you are done with your customizations, click the Save button that appears on the upper-right side

And you are done!


Additional settings for Pop-ups

Now your pop-up is fully configured. You can fine-tune different global settings for your pop-ups by going to the Settings tab of the app:

Some of the global Pop-up settings that you can change here are:

Privacy Consent

  • Request consent from European customers and Collect email marketing consent options
    • In accordance with GDPR policies, customers visiting from EU needs to accept your store's Privacy Policy and the provision of their consent first before entering their email address successfully to your Pop-ups.

Display Settings

  • Show pop-ups every X page views - Display pop-ups after the number of page views entered here. This helps to avoid making the Pop-up being too spammy, only making it show again to the same visitor after X number of pages are visited on your store.
  • Display the same pop-up again after X hours - Since you can activate multiple Pop-ups, and the Pop-up app will cycle each of them, this setting ensures that the same Pop-up will be seen by the same visitor only after the hours you placed here (default is 24)
  • Display on cart page - Disable this option if you do not want the Pop-up to appear when the visitor goes to the cart page (to increase likelihood of successful conversion, since there will be no po-up that will interrupt)
  • Enable bot filter (CAPTCHA) - If enabled, user behavior will be validated with a CAPTCHA solution to ensure lead validity.

Translations

  • You can set basic translations here according to your store's default language.


Deactivating a Pop-up

If you would like to temporarily deactivate a Pop-up and use it for later, you can select the desired Pop-up in the list through its checkbox and select the Hide option in the menu (3-dots) that appears:

Deleting a Pop-up

To permanently delete a Pop-up, simply select the desired Pop-up to be deleted on the list through its checkbox, and then select Delete in the menu (3 dots) that appears:

App not appearing on your store? The Vitals app might not yet be enabled on your Shopify Theme via the App Embeds section. For more information, you may go here: Enabling the Vitals app via App Embed

Frequently Asked Questions (FAQs)

Does your Pop-up app have animations?

Our Pop-up app does not have integrated animations at the moment. However, we already have this on our suggestions list, and we'll definitely post an update on our Product Roadmap when we have updates about this feature.

Is this resource helpful? Thanks for the feedback There was a problem submitting your feedback. Please try again later.