Popup builder
Summary
In this article, you’ll learn how to create and customize popups using Growmatik’s popup builder and set them up to display on your website. By using Growmatik automations, you can display popups for specific events or to certain users.
We’ll cover the following topics:
- Creating a new popup
- Adding a new element
- Editing an element
- Duplicating an element
- Removing an element
- Customizing the popup container
- Desktop/Mobile view
- Previewing the popup
- Changing the popup position
- Changing the popup layout
- Customizing the overlay background color
- Saving a popup
- Editing or removing a popup template
- Renaming a popup template
- Automating a popup
- Locating a popup rule in the Automate page
Creating a new popup
1. From the left sidebar, go to Workshop > Popups and then click on the Create Popup button.
2. All templates are categorized into different contexts and topics. Select a template to start with, then give it a name and click on Customize. This will open the popup builder environment to start creating popups.
Note: When you create and personalize a template, Growmatik will save it as a new template in the My Templates section. This lets you use these templates again later.
Adding a new element
1. Inside the popup builder, hover over the popup area, click on where you want to add the element and select the 
icon.
2. Select an element, and it will be added to the popup container.
The elements are:
- Image
- Text
- Social
- Button
- Video
- Coupon
- Form
- Spacer
Editing an element
To edit an element, click on the element you want to edit. Once the element is highlighted, some icons will appear above the element. Select the 
icon to open the settings window. Here, you can make your changes and view the outcome at the same time.
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.
Customizing the popup container
To customize the popup container, click on the Popup settings button on the left top of the screen to open the settings window.
Various options for customization include:
- Popup position
- Popup layout
- Popup width
- Popup corner radius
- Popup background color
- Popup border color
- Popup background image
- Popup side image (only for side image layouts)
- Popup overlay color
Note: When popup layout is set to Side Image (Left) or Side Image (Right), the options related to the side image appear in the Popup setting.
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.
Changing the popup position
You can choose the place where your popups will be displayed on your website in the popup builder. Just click on the Popup settings button and then select one of the Position options.
The options are:
- Center
- Bottom left
- Bottom right
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’s visual 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:
Note: In order to assign/change the side image for the Side image (left) and Side image (right) layouts, first click on the Popup settings button, select the Side images option and click on the Replace image button. It’s also possible to show/hide the side image on mobile.
Customizing the overlay background color
To change the overlay color, click on the Popup settings button, select the Overlay option and then click on the 
icon to choose a different color.
Saving a popup
To save your customizations, you need to click on the Save & Exit button in the popup builder.
Editing or removing a popup template
To edit or remove a popup, go to Workshop > Popups on the left sidebar and then click on the 
icon on the bottom right of the popup thumbnail. You’ll find the options to Remove the email template. To edit the template just click on the 
icon there.
Renaming a popup template
To change the name of your created popup, edit the popup you have created, then click on the 
icon at the left top of the builder 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.
- From the left sidebar, go to Workshop > Popups and find the popup you want to create a rule for.
- Click on the
icon, then Automate and choose 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 on Growmatik automations article.
Note: It isn’t possible to associate a popup template with multiple rules as each popup template 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:
- In the popups page, hover over your popup thumbnail, click on the icon.
- Select Locate in Automation:
You’ll be taken to the Automate page, where the rule associated with your popup is highlighted.
