Magento 2 Sale Motivation Extensions

  1. Home
  2. Docs
  3. Magento 2 Sale Motivation Extensions
  4. Magento 2 Pop Up
  5. User Guide

User Guide

1. Overview

Pop-up for Magento 2 extension helps you create the eye-catching pop-up that is highly flexible and customizable for many purposes, such as promotion, notification, guideline, or newsletter. You decide where to display the pop-up, set display animation, and apply for customer groups or store views.

2. How Does It Work?

2.1 General Configuration

Enable functions of Magento 2 Popup extension

Please go to Stores ⇒ Configuration ⇒ BSSCommerce ⇒ Pop-up General Configuration.

In Enable, choose Yes to enable the extension, or No to disable it.

2.2 Manage Pop-up Grid

Go to Marketing ⇒ BSSCommerce ⇒ Pop-up ⇒ Manage Pop-up.

Manage Magento 2 Popup in the informative grid

Manage Pop-up grid shows all pop-up you have created with full information, including Pop-up Name, Enable, Display Rule, Displayed Pages, Content, Store Views, Customer Groups, Start Date and End Date. The Manage Pop-up grid works just like standard grid in Magento 2 default with features such as mass action (delete, enable, disable), filter and column display.

2.3 How to Create New Pop-up

Please click on the Create New Pop-up button located on the top right of the grid. You will be redirected to the New Pop-up Page, which has 3 tabs:

  • General
  • Display Rule
  • Content and Design

There are 4 buttons to support creating a new pop-up:

  • Back
  • Reset
  • Save and Continue
  • Save Pop-up

2.3.1 General

General Information of Magento 2 Popup

In Enable, choose Yes to enable the new pop-up.

In Name, enter the pop-up’s name.

In Store Views, select which store views to display the pop-up.

In Customer Groups, choose the customer groups to view pop-up.

In Start Date, select a date in the calendar view to begin showing the pop-up.

In End Date, select a date in the calendar view to stop displaying the pop-up.

In Priority, enter a number to decide the priority of the pop-up when multiple pop-ups are created on a page.

2.3.2 Display Rule

Display Rule of Magento 2 Popup

In Display Rule, choose one of the four following conditions to set conditions for displaying the pop-up:

  • After customers spend X seconds on the page.
  • After customers scroll page by X percent.
  • After customers view X pages.
  • Immediately when customers visit the page.
  • Exit Intent

In X equals, enter a number to decide the value of X.

In Display Animation, choose one of the six following options to set display effects for the pop-up:

  • Zoom
  • Horizontal Move
  • Move from Top
  • 3D Unfold
  • Zoom-out
  • None

In Position, select the position to display the pop-up on the page.

  • Top Left
  • Top Center
  • Top Right
  • Middle Left
  • Middle Center
  • Middle Right

In Auto Close Pop-up After, enter the amount of time (seconds) for the pop-up to automatically close. Ex: 10. Enter “0” to disable auto close of Pop-up

In Display Frequency, determine the frequency of pop-up display by selecting one of the following options:

  • When all conditions are satisfied: the pop-up appears if the above rules are executed.
  • Only once: the pop-up only appears once.
  • Only once per session: the pop-up appears once in a session. If you choose this option, you need to set Cookie Expires.

For example, if you choose Display Frequency as “Only once per session” and set the 2 minutes for the Cookie Expires, the pop-up is displayed when the conditions are satisfied, then it won’t be shown in the next 2 minutes (until the session ends or the cookie expires).

In Layout Updates:

In Display on, select pages to show the pop-up, including the following types of pages:

  • Category Pages
  • Product Pages
  • Generic Pages

When you choose each type of page, you can select all pages or specific pages depending on your demand.

For example:

+ Category page:

category layout

+ Product page:

product layout

+ All pages:

all page layout

(you can exclude specific pages from displaying a popup when you select the option as All pages)

Furthermore, it is easy to add more layout updates to show popup in more pages by clicking the button.

2.3.3. Content and Design

Content and Design


In Content, use the WYSIWYG editor to create content for the pop-up.

Content Editor for Magento 2 Popup

You can use this tool to insert widget, image or video for the pop-up’s content.

In Pop-up CSS, use CSS to change the design of the pop-up. If leaving blank, the default pop-up will be applied.

Or, you can use our default template to quickly render your pop up.


There are 5 templates to choose from:

  • Contact Form
  • Age Verification
  • Newsletter
  • Hot deals (product listing)
  • Social sharing

After choosing your template, click on the Load Template button to make the template appear in the Content edit interface.

loading template

In the Content edit, you can make any modification if needed.

popup css

In Popup CSS, you can enter CSS code to change the popup design. If leave blank, the default design will be used.

Note: After any change to the pop-up configuration, either  Save, Delete, Mass delete, Mass active, is made, a cache notification will appear.

page cache

You then must go to SYSTEM -> Tools -> Cache Management ->Flush Magento Cache for those changes to be applied to the front end.

Was this article helpful to you? Yes No 1

How can we help?