Creating a pop-up

This article tells you how to design a pop-up.

Melina avatar
Written by Melina
Updated over a week ago

In this article, I will show you how to design a pop-up. Are you creating a pop-up for the first time? Make sure the pop-up module is set up and the initial settings of your pop-up are ready.

The design of the pop-up

You will find the following elements in the standard pop-up:

  • Image: The image you see is a default image. Uploading your own image into it is very easy. For the exact dimensions as shown in the example, you need an image of 250x400 pixels. Do you have a larger image? Then it is possible to scale the image within the pop-up.

  • Text at the top: This is a text box as you are used to from the e-mail editor. The colour of the text and font are customisable.

  • Form: This is the form with fields to fill in for the customer. In the form, you have a choice of the following fields:

    • First name

    • Surname

    • Email address

    • Date of birth

    • Gender

    • Phone number

    • Street

    • Postcode

    • City

    • Province

    • Country code

Specifications can be specified for each field. For example, you want the gender to consist of several choices and the date of birth to be filled in using dd-mm-yyyy.

I want to complete the 'gender' field. To do this, I go to the properties of the field on the right-hand side and press edit under 'gender'. You will now see the following screen in front of you:

What you see here is that you ask for your customer's gender in a dropdown menu. Your customers have the choice of male or female. When you click the 'required' option, the field is a mandatory field to fill in.

Would you like to change the text colour of the fields? That's possible too! Then go to label options:

As you can see, all texts can also be aligned here. You can do the same for the field itself and the button at the bottom. These can be completely styled in terms of colour, alignment and size. The size of the pop-up itself cannot be adjusted.

πŸ’‘ Good to know: has your customer already signed up for the newsletter? Then the pop-up will indicate that the e-mail address already exists in your customer database. This way, you avoid giving existing customers unnecessary discounts.

Does your customer already exist in the system, e.g. because they have placed an order? And does he or she register via the pop-up on your website? Then the existing profile is updated. When a customer is logged in, it is not possible to exclude the pop-up there. Cookies store whether a visitor has already seen, clicked away or completed the pop-up.

πŸ‘ Tip: It is recommended to hide the image in the pop-up on mobile, as customers have a smaller screen. You then deliberately choose to show only what is necessary, the registration fields. Remove elements on mobile or desktop can be found under block options:

You have now created a pop-up and defined a success page. What you are now going to do is create a trigger associated with the discount code.

Did this answer your question?