How to use the Popup element


This article will help you understand the role that pop-ups play in your Online store and how to use the Popup element in GemPages.


What is a Pop-up?

To put it simply, a pop-up is a window that appears while visitors are browning a site. The main use of the technology is to generate more leads and overall serve advertising purposes.

In GemPages, the Popup element can be added on any page and is fully customizable: From displaying a Newsletter signup form, attracting viewers with a time-limited discount to informing them of upcoming sales promotions.


Add the Popup element to your page

Step 1: In the GemPages Dashboard, select a page and enter the Editor.

Step 2: Search for the Popup element and drag out one onto your page. A new window will appear for you to custom the element.



As a separate window, the Popup element will not be on your current page. However, you can access it anytime via the sticky button on the right border of the Editor.


By default, the Popup element is blank so you can nest other elements inside it. In the example below of a Newsletter pop-up, you will to drag&drop a Newsletter element into the Popup.



Configure the Setting tab

When you select the element, its configurations will be displayed in the left sidebar. Here are what you can do with the Settings tab.



Name: This field allows you to edit and name your pop-up.


Trigger: Select one of the 6 options from the drop-down menu to set the exact time for the pop-up to appear.

  • None (The pop-up will not appear at all on the live page).
  • Show on page load.
  • Show after a certain period of time.
  • Show when the user scrolls to a percentage of the way down the content.
  • Show when user is about to exit the page (exit intent).
  • Show when user reaches the bottom of the page.


Display Frequency: Use the slider or manually input the frequency for the pop-up to show up in days (30 maximum).
This feature works based on website cookies. 


Reset Cookie: Hitting this button will reset your cookies and start the Display frequency all over again.




The Padding slider helps you adjust the padding of the content inside the pop-up.

Increase this slider if you have more content to show.



Close button

This setting allows you to design the close button (i.e. the "X" icon) of the pop-up.

Inside or Outside tab: Choose the place to set your Close button.


More settings: Click on this to expand additional settings for the Close button:

  • Background: Set a background color.
  • Color: Set a color for the “X” icon.
  • Round: Adjust the roundness for the button in percentages.
  • Button size: Adjust the size of the button in pixels.
  • Icon size: Adjust the size of the "X" icon in pixels.



You can set the pop-up to full screen here by toggling on the Full Screen switch.
When you do, there will be 2 more settings to adjust: The Width and the Height of the pop-up.



Overlay darkens the page content when the pop-up appears to draw in more attention.

When turned on, you have the option to set the overlay color and its transparency. You can also turn on or off the feature that allows visitors to click the overlay to close the pop-up.



You can select from 09 options to position the Popup element:

  • Center Center.
  • Top Left.
  • Top Right.
  • Bottom Left.
  • Bottom Right.
  • Top Center.
  • Bottom Center.
  • Center Left.
  • Center Right.



The Popup element has 07 entrance effects you can choose from:

  • None: No effect at all.
  • Fade.
  • Zoom.
  • Zoom-out.
  • Horizontal Move.
  • Vertical Move.
  • 3D Unfold.



Extra Class

For the tech-savvies out there, you can even further customize the element by adding extra classes in this field, then point to it later in your CSS file.


Configure the Design tab

Just like every other GemPages element, Popup has its own Design tab where you can fine-tune the appearance of the element before saving and publishing your page.


Check out our articles on ther elements to master GemPages, and if you need any additional assistance along the way, our GemPages Support Team is always here to help. Please reach our team via email or live chat.


Was this helpful?