MENU
HomePopups and Forms

Popups

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.

We’ll cover the following topics:

Creating a new popup

1. From the left sidebar, click on Popups and Forms

2. Click on New Popup / Form button

3. From the new page that opens, choose a starting point. Here are the options:

  • Pre-designed template: Growmatik is shipped with a variety of pre-made popup templates that you can use to speed up your creation process. Use filters to find the right template and click on the thumbnail for an enlarged preview. If you are happy with your selection, click on Use This Template to import it to the editor.
  • My Templates: If you have already created a popup template, you can find it here to use as a starting point.
  • Start From Scratch: Using this option, you can create a popup completely from the ground up. If you select this option, you will be asked whether to create an Embedded Form or Popup. Embedded forms can only be embedded into a particular page of your website while popups can be displayed in multiple locations using advanced conditions.

Adding a new element

1. Click on the plus icon located in the content area.

2. From the menu that opens, choose an element and click on it to add to the page.

Editing an element

Select the element you want to edit to reveal its options on the left panel. Use these options to change the appearance of the selected element or modify its functions.

Duplicating an element 

To make a copy of an element, select it first. Then from the box that appears to the right of the element, click on duplicate icon.

Removing an element

Select the element you want to remove and click on the trash icon that appears to the right of the selected element.

Re-ordering elements

You can change the order of elements by selecting an element. While the element is selected press and hold down the mouse button and drag the element up or down. Release the mouse button when you are happy.

Image

Use an image element to insert an image into your popup. You can either upload an image to your media library or select a free stock image provided by the Unsplash website.

Text

Use the text element to add text to your popup. Once you inserted the text element, you can change its formatting and typography from the left side panel. You can also make your text more personalized using the dynamic keywords feature. To access this feature, select a text in your email and click on Dynamic keywords button. From the menu that opens, choose among a variety of keywords to insert as part of the text. Note that the dynamic keyword you have selected will be inserted into where your text cursor or caret is located.

Social

Use social element to insert social icons into your popup. You can choose how the icons are aligned in your email along with options to customize their appearance including an option to use your own custom color for icons.

Button

Use button element to add call-to-action buttons to your popup. There is an extensive set of options to customize the appearance of buttons.

Video

Use video element to include video items in your popup. Currently, only YouTube videos are supported.

Coupon

Use coupon element to generate and add a discount coupon to your popup. Growmatik allows you to create unique coupons that are generated for each recipient as well as universal coupons which are same for everyone. This powerful element is capable of generating highly targeted and advanced coupons suitable for different scenarios and marketing campaigns.

Form

Use form element to insert a form on your popup. By default, there is one email input but you can add more fields by clicking on New Field button. You can then map each field to an attribute using Map to option. You can even map any field to custom attributes.

Additionally, you can change the appearance of your form using the options under the Appearance section.

Spacer

Use the spacer element to add a blank vertical space between elements. By enabling the divider option, you can add a visible divider line instead of a blank space.

Products

Use products element to add a list of products to your popup. You can use filter drop-down menu to selectively display products based on a variety of conditions including user behavior and shopping history. This way you can make sure that recipient will see a more personalized and relevant list of products. It’s recommended to incorporate Fallback filter just in case there is no personalized list of products. For example, if you choose Repeat orders from the filter menu and the recipient doesn’t have any repeat orders with your store, they would see an empty list of products unless you set a Fallback filter. Make sure to choose a more universal filter as fallback such as All products or category.

Moreover, there are options to customize the number of columns and appearance of product items.

Blogs

Similar to products element, you can use blogs element to display a list of blog posts. The content menu also helps curate a more personalized list of blogs with options such as recent, related, popular, etc.

Countdown Timer

Use countdown timer to add a visual countdown to your popup. This is helpful when you want to create a sense of urgency among your website visitors. You can either start counting down toward a particular due date or set a duration. Also, you have the option to decide what happens when the countdown ends.

Use logo element to add your brand logo to your popup. You can set your brand logo in Workshop > Brand Styles and use it across email and popup campaigns. Alternatively, you can set a different logo to individual email by clicking on Replace button. However, this only applies to the existing email. To replace the logo universally, go to Workshop > Brand Styles.

General settings

In addition to individual elements, you can change the general appearance of popups as well. To change the general settings, click on an empty area in the page. It could be anywhere outside the popup box. The panel containing general settings will appear on the left side of the screen. Here are the options available in general settings:

Position

Decide where on the visitor’s screen you want your popup to be displayed. Center, bottom left or bottom right.

Layout

You can either use a default layout or use a side image on the right or left side.

Width

Change the width of the popup.

Corner radius

In case you want a popup with rounded corners you can adjust this setting.

Background color and image

Change the popup background color or set a background image.

Border color and width

Set a border around the popup

Link color

Change the color of any hyperlinked texts included in popup content.

Underline links

Enable or disable the underline formatting of any hyperlinked texts included in popup content.

Success step

The success step is content that is displayed after the successful form submission. It usually conveys a message informing the visitor that the form has been submitted successfully. You can customize the content and appearance of the success step from the upper tab in the popup editor.

Please note that the success tab is disabled until you add a form element to your popup. In other words, the success step is always associated with the form element.

Once you selected the success tab, you will see the default success message shown in the popup. You can change the content or add new elements to this step. However, you can not add the form element to this step as there can be only one success message associated with a form in any given popup.

Use this option to check how your popup actually looks on your website.

To enable the preview, click on the options button at the top. From the menu that opens, choose Preview. Your existing popup will be displayed on your website in a new tab.

Save and change template

Change template

At any point, you can import a new popup template to your existing popup by clicking on Options and then selecting Change template button. Please be noted that changing a template will remove your current progress and replace it with the template you have chosen.

Save Template

Additionally, you can save your existing popup as a template so that you can reuse it on your future popups which can help you save some time. To save a popup as a template click on Options and choose Save as Template.

On the right side of the popup editor, you will find a panel that contains the display settings associated with the popup. Display settings allow you to modify the popup behavior and conditions.

Audience

The audience setting determines the specific group of website visitors who will be targeted with the popup. It can be based on various criteria such as demographics, interests, location, or previous user behavior, allowing for personalized targeting and messaging.

Non-logged-in users: The popup will be displayed only to those who are signed out of your website. This includes new visitors and customers/subscribers who are not logged in yet.

Logged-in users: The popup will be displayed only to those who have an account with your website and are currently logged in.

Custom filter: Using this options you can create a more targeted audience based on shopping history, demographic data, Email activity, etc.

Location

This setting defines the specific location or locations within the website where the popup will be shown. It could be a specific page or a particular section. By default, all popups will be displayed on your entire website. However, you can select a more specific section of your website such as product pages, posts and pages or custom URL. You can also combine these sections by using Add Location button.

Display Triggers

Display triggers are user behaviors or actions that act as a trigger for the popup to appear. These triggers can include actions like scrolling a certain percentage of the page, spending a certain amount of time on the website, or attempting to exit the page, providing opportunities to engage users at the right moment.

Frequency

The display frequency setting determines how often the marketing popup will be shown to a particular website visitor. It can be set to display only once per session, on every visit, or on a customized frequency, striking a balance between visibility and avoiding excessive interruption or annoyance.

Device

The device visibility setting allows you to specify which devices the marketing popup will be displayed on. It can be configured to appear on desktop computers, mobile devices, etc. ensuring optimal display and user experience across different device types.

Scheduling

This setting allows you to set specific timeframes during which the marketing popup will be active and visible. By default, all popups will be displayed immediately after you publish them. Scheduling a popup is useful in time-based promotions and campaigns.

Save and Publish

Once you are happy with your popup content and design you can save it as a draft or publish it on your website.

Save as draft: To save your popup as a draft click on Save and Close button on the top bar.

Publish: Click on Publish button on the top bar to launch your popup to your website so your visitors can see the popup based on the conditions you have set.

Manage popups

Once you save or publish popups you will be forwarded to the popups and forms page. This page is also accessible from the main navigation on the left. Here, you can see the list of all popups and forms you have created so far. You can also manage your popups using the options menu button on the right side of each popup. Using the options menu, you can edit, publish, disable, duplicate, view sign-ups, and remove a popup.

Disable a popup

To disable a popup click on the options menu icon on the right and click on Disable. Once you disable a popup it will be unpublished and saved as a draft. Disabled popups won’t be displayed to your website visitors until you publish them again.

View sign-up

Using this options you can view the complete list of people who have successfully submitted any sign-up form inside your popup. To view sign-ups, click on the options menu icon and select View Sign-ups.

Reports

To view the analytics and performance data associated with a popup click on the report button next to the options menu.

On this page, you can find the following useful information associated with a popup:

Views: The total number of times the popup is displayed to the website audience, indicating the reach and visibility of the popup.

Sign-up rate: The sign-up rate represents the percentage of website visitors who interact with the popup by providing their information, indicating the effectiveness of the popup in converting visitors into potential leads or customers.

Revenue: This metric quantifies the amount of income generated as a direct result of the popup’s impact, reflecting its contribution to the overall revenue of the business.

Was this article helpful?YesNo