All Collections
Forms
Pop-ups
How to design a pop-up?
How to design 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

The form in a pop-up

Specifications can be specified for each field of the form. This allows you to customize the fields. To edit a field, select the form and choose edit under Form elements for the corresponding field.

You can make a field mandatory, enter a placeholder or lock it.

Note that the fields in the pop-up are linked to your database in Reloadify. So use the first name field purely for the customer's first name!

Do you want to request different data in the pop-up, for example the customer's favorite animal? Then use the Tags field. In this article you can read back on how to do profile enrichment based on tags.

The format of the pop-up.

The location and maximum size of the pop-up are fixed. Apart from that, you can format the entire pop-up to your liking.

You have the following options:

  • Label options. In this menu, you format the labels of the fields.

  • Field options. In this menu you set up input fields.

  • Button options. In this menu you style the button of the form.

Are you using the pop-up to recruit new newsletter subscribers? The pop-up recognizes existing subscribers and shows that the profile is already subscribed. This prevents existing customers from receiving unnecessary discounts.

Tip: It is recommended to hide the image in the pop-up on mobile, considering 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:

Did this answer your question?