Skip to content

Popup builder

Summary:

In this article, you’ll learn how to create and customize popups using Growmatik’s popup builder and set them to be displayed on your website. By using Growmatik automation, you can display popups for specific events or to certain users.


Creating a new popup:

  1. From the left sidebar, go to Workshop > Popups and then click on the Create Popup button.
    create a new popup on pop builder page
  2. All templates are categorized into different contexts and topics. Select a template to start with, then, give it a name and press Customize. This will open the popup builder environment to start creating popups.

Adding a new element:

  1. Inside the popup builder, hover over the popup area, then click on the icon.
  2. Select an element, and it will be added in the popup container.
    The elements are:
    • Image
    • Text
    • Social
    • Button
    • Video
    • Coupon
    • Form
    • Spacer

    how to add a new element on popup builder page

Editing an element:

To edit an element, hover your mouse over the element you want to edit. Once the element is highlighted, click on the element to select it. Some icons will appear on top of the element. Select the icon to open the settings window. Here, you can make your changes and view the outcome at the same time.

Editing an element - Growmatik popup builder

Duplicating an element:

To make a copy of an existing element, click on the element you want to duplicate in order to select it. Then click on the icon.


Removing an element:

To remove an element, click on the element you want to remove in order to select it. Then click the icon.


Edit the popup container

To customize the popup container, click on the icon on top of the popup container to open the Box Options
Various options for customization include:

  • Popup width
  • Popup corner radius
  • Popup background color
  • Popup border color
  • Popup background image
  • Popup side image (only for side image layouts)
how to edit popup container - Growmatik popup builder

Note: When popup layout is set to Side Image (Left) or Side Image (Right), the options related to the side image appear in the Box Options.


Customizing the overlay background color:

To change the overlay color, click on an empty area outside the popup container, then click on the icon and pick a different color.

customizing the overlay background color - Growmatik popup builder

Desktop/Mobile view:

By clicking on the desktop/mobile toggle, you can see how your popup will appear on a desktop and mobile right inside the builder.


Previewing the popup:

It’s possible to preview the popup to see how it looks live on your website. Click the Preview button to open a preview of the popup on your website in a new tab.

preview the popup - Growmatik popup builder

Changing the popup format:

You can choose the place where your popups will be displayed on your website by selecting another Format option in the popup builder. 
The options are:

  • Center
  • Bottom left
  • Bottom right
changingthe popup format - Growmatik popup builder

Note: In the Bottom left and Bottom right options, no overlay color will be displayed for the live popup.


Changing the popup layout:

The Growmatik popup builder offers three layout options for the side image of the popups. 
The options are:

  • None
  • Side image (right)
  • Side image (left)

Here are examples of each option:

changing the popup layout - Growmatik popup builder
changing the popup layout - Growmatik popup builder
changing the popup layout - Growmatik popup builder

Note: In order to assign/change the side image for the Side image (left) and Side image (right) layouts, open the popup container settings. It’s also possible to show/hide the side image on mobile.

changing the popup layout - Growmatik popup builder

Saving a popup:

To save your customizations, you need to click on the Save & Exit button in the popup builder.

saving a popup - Growmatik popup builder

Editing or removing a popup template:

To edit or remove a popup, from the left sidebar, go to Workshop > Popups, then hover over your desired popup and click on the icon on the top left of the popup’s thumbnail. You’ll find the options to Remove or Edit the popup. 

edit or remove a popup template - Growmatik popup builder

Renaming a popup template:

To change the name of your created popup, edit the popup you have created, then click on the Rename link and assign a new name.


Automating a popup:

In order to show a popup live on your website, you need to assign it to a rule.

  1. From the left sidebar, go to Workshop > Popups and find the popup you want to create a rule for.
  2. Click on the icon, then Automate and select an audience type.
  3. Add a condition.
  4. Click on the Create Rule button.

Note: It’s also possible to create a popup rule right from the Automate page. Learn more.

Note: It isn’t possible to create multiple rules with one popup as each popup can only be connected to one single rule.


Locating a popup rule in the Automate page:

By looking at your popup thumbnails in the Popups page, you can find out which ones are attached to an automation rule. Any popup that has the icon on its thumbnail is linked to an automation rule.

To locate the popup that is assigned to a rule in the Automate page:

  1. In the popups page, hover over your popup thumbnail, click on the icon and select Locate in Automation.
  2. You’ll be taken to the Automate page, where the rule associated with your popup is highlighted.