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.

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

Content and Design of Magento 2 Popup

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.

Was this article helpful to you? Yes No

How can we help?