Skip to main content
All CollectionsFormsPop-ups
How to create a pop-up?
How to create a pop-up?

This article tells you how to set up and activate a pop-up on your webshop.

Melina avatar
Written by Melina
Updated over 8 months ago

With a pop-up, you attract the attention of webshop visitors. Bring in new newsletter subscribers (in exchange for a discount), put a product in the spotlight or offer a download. In this article you will learn how to activate a pop-up on your webshop.

Note: before you can create a pop-up, you need to enable the pop-up module. In this article you will learn how to activate the module.

Create a pop-up

Go to Pop-ups via Forms.

Two pop-ups are already waiting for you: the standard form success and the standard form error. These are steps after your pop-up. By default, the form success shows when the form was filled in successfully. The form error shows by default when a form cannot be processed. You are free to customise the layout of these pop-ups.

Create a new pop-up using the New pop-up button. The settings of the pop-up will appear:

Pop-up settings

What you enter here is the following:

Name: You start with the name of your pop-up. I enter 'newsletter subscription' here.

Included URLs: Here you fill in which pages you want your pop-up to appear on. Enter an * (asterix/star) here if you want to show the pop-up all over your website.

Do you have multiple languages/storeviews? With this option, the pop-up will show on every page, including different languages. Do you want to show the pop-up only on the Dutch language, for example? Then exclude the other languages (see the heading below, under "Include and exclude URLs").

Excluded URLs: This is where you fill in which pages you specifically don't want your pop-up to show on. Leave this box blank if you do not want to exclude any URLs.

Pop-up type: Here you specify when your customer sees the pop-up on your web shop. You have the following options:

  • Immediately

  • Show when you want to leave the web shop. The pop-up shows as soon as the visitor moves the mouse towards the cross of the website.

  • Display after scrolling.

  • Display when inactive. The pop-up displays as soon as the visitor has become inactive, i.e. when no movement of the mouse can be detected.

  • Show after some time has passed. For this option, you can also enter how much time should elapse.

  • Show when the visitor hesitates. The pop-up shows when the visitor leaves the website, without clicking away (e.g. by moving to another screen or tab).

  • Manually. With this option, you create your own button on your website to show the pop-up. To do this, you need the following code:

    <a href='#' class='reloadify_popup_trigger'>Click here</a>

Success pop-up: This pop-up is shown when the newsletter subscription has been successful. Once your customer has clicked 'confirm', for example, another pop-up will appear, which is then the success pop-up. This also lets your customer know that the subscription has been processed properly.

Profile tags: When a customer signs up through a pop-up, it is possible to give the customer a tag. This is useful if you later want to set a trigger for the target group that registered via the pop-up, or to track how successful the pop-up is. I enter 'pop-up visitor' here.

Newsletter: Finally, it is possible to subscribe your customer directly to the newsletter by checking the box.

Cookies store whether a visitor has seen, clicked away or completed the pop-up. It is not possible to exclude a pop-up for specific visitors.

Include and exclude URLs

It is possible to show your pop-up only on specific URLs, or to exclude specific URLs. How do you set this up?

In the box, enter the URL where you want to show the pop-up in this case. In the URL, "http://", "https://" and "www." are ignored. So you don't need to fill in this part of your URL.

You can use an asterisk (*) for wildcard matching. This works as follows:

For example: I want to show a pop-up on the page www.myonlineshop.com/blog. In the "Included URLs" box, I enter the following: *blog.

Note that *match*text does not match https://match-example-text.com.

The settings are in place! Time to get to work on the design of the pop-up.

Did this answer your question?