Custom Pop-ups

Creating your pop-ups has never been easier!

Wioleta Jednaka avatar
Written by Wioleta Jednaka
Updated over a week ago

Pop-ups have a complicated reputation, and we get it – a lot of websites use them in a disrupting and annoying way.

Creating an effective strategy for using pop-ups is one thing, but then you need to actually create them. If you're not used to it, that can be a challenging task, but no worries – our Custom Pop-up builder makes this process as easy and enjoyable as possible!

In this article, we'll go over the Pop-up creation process. To learn more about everything our powerful Pop-up editor can do, click here.

If you prefer, you can watch our tutorial. Have a look 👇

How to set up a Custom Pop-up

To get started, log into your Mission Control and go to ONSITE > CUSTOM POP-UP.

Press the + button to create your new Custom Pop-up. This will create a widget with default information. Click on it to edit.

A few important things about the Custom Pop-up creation process:

  • There are no limits to how many pop-ups you can create.

  • All pop-ups are automatically responsive, but you will be able to choose if you want to show it only on desktop, only on mobile, or both (see Step 3).

  • Your work will be autosaved every 60 seconds, but make sure to click the SAVE button before leaving the page.

Step 1: Goal

The first thing you need to do is choose the purpose of your Custom Pop-up.

  • Building a subscriber base – choose this option if you want to display a pop-up with a form that will collect your visitors emails and other personal information such as name, gender or birthday.

  • Increasing sales – choose this option if you want to display a pop-up focusing on promotional images and text (maybe even throwing in a discount coupon).

  • Recommending other products – this is an advanced option available only to clients that use the Marketing Machine. With it, it's possible to display personalized product recommendations to each visitor inside the pop-up. If you wish to activate this option, please contact our Support team.

Each goal comes with different sets of templates. After selecting a goal, you will see a different set of templates to choose from.

NOTE: Setting the goal is only a way for us to suggest more effective templates for inexperienced users. You are welcome to go through all templates and choose the one you prefer, regardless of your pop-up strategy.

Once you have chosen your template, click on the Design tab.

Step 2: Design

Now for the fun part! You will create your pop-up with our easy-to-use pop-up builder.

To learn everything you can do with the Custom Pop-up editor, click here.

Once you're happy with your design, click on the Display tab.

Step 3: Display

All Custom Pop-ups are responsive by default, but you might want to show your pop-up on specific devices depending on your strategy. You choose between:

  • Both (desktop and mobile)

  • Only desktop

  • Only mobile

Once you make your decision, you will be able to choose the position in which your pop-up will appear on the screen.

Positions for pop-ups on desktop:

  • Top left

  • Top right

  • Bottom left

  • Bottom right

  • Center

Positions for pop-ups on mobile:

  • Top

  • Bottom

  • Center

Once you've chosen the devices and positions, move on to the last step: Settings.

Step 4: Settings

Almost there! Now we will determine the rules that govern when and where your pop-up will be displayed.

First, you need to determine the trigger – the condition or action which will cause your pop-up to be displayed.

  • Immediately (Your pop-up will be displayed immediately without any delay)

  • Delay (Your pop-up will be displayed with the selected delay)

    • You must input the delay time, in seconds, in the text box that will appear below.

  • Inactivity (Your pop-up will be displayed after the selected time of inactivity)

    • You must inactivity time, in seconds, in the text box that will appear below.

  • Hover (Your pop-up will be displayed when the user hovers the cursor over the selected element)

    • Please note that this trigger will not be available if you choose "both" or "mobile" in Step 3.

    • You must input the CSS selector in the text box that will appear below.

  • Scroll (Your pop-up will be displayed after the user scrolls to 50% of the page)

  • Exit (Your popup will be displayed once the user moves the cursor to the top of the screen)

    • Please note that this trigger will not be available if you choose "both" or "mobile" in Step 3.

  • Click (Your pop-up will be displayed once the user clicks on the selected element)

    • You must input the CSS selector in the text box that will appear below.

  • Newsletter Subscription (Your pop-up will be displayed after the user subscribes to your newsletter)

    • This is a great option to create a "thank you" pop-up.

  • Refer a friend program (Your pop-up will be displayed when a user visits your website using a referral link sent by a customer that participates in the Refer-a-friend Program.

    • This is necessary in order to collect the new customer's email in a GDPR-compliant way.

Now it's time to set up the location – that is, in which pages of your website you want the pop-up to be displayed.

  • On every page (all pages of your website)

  • On the main page (only the homepage)

  • On product pages (only product pages)

  • Based on URL

    • URL is...

    • URL is not...

    • URL does not contain...

    • URL contains...

    • Regex

Please note that you can combine the URL conditions to fit your needs. For example, you might want to add the pop-up only to all pages in your checkout process, except for the last one (after the purchase).

Next, select the schedule – when your pop-up will appear.

  • Display now (start immediately and keep it active indefinitely)

  • Display time (select a date to start and to finish displaying your pop-up)

Don't forget to select the subscription status of the user you want the pop up to display to. Select the option you are interested in from the drop-down list:

If you want to distinguish from where your customers sign up when you have more on-site elements, customize the tag that will be assigned to the user when they sign up for the newsletter

You might also want to set up a limit to how many times your pop-up will appear to each user. You can choose one of several options between always (no limits) to one every 31 days.

Finally, give your pop-up a name. This will help you identify it later on when you want to manage all of your pop-ups or check its performance on the Onsite Report.

Save, Preview, or Publish

All ready? On the final step, you will see three buttons: Save, Preview, and Publish.

If you have any unsaved changes, you will only be able to click the SAVE button.

Once you do this, the SAVE button will be greyed out and the other two buttons will be available.

By clicking the PREVIEW button, you will be able to see a preview of your pop-up in your store. A new button called GO TO STORE will be generated, and by clicking it you will be taken to a view of your store with the newly created pop-up.

Once you're happy with the preview, simply click the PUBLISH button and voilà – your new Custom Pop-up is up and running :)

Keep up the great work!

Need more help?

If you have any further questions about how to create Custom Pop-ups, please do not hesitate to contact us at

Did this answer your question?