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 Display on Page, select one or multiple pages to show the pop-up.

  • Home Page
  • Category Page
  • Product Page
  • Cart Page
  • Checkout Page
  • All Other Pages

In Exclude Categories, enter IDs of categories to be excluded from the Display Rule. Example: 3,4,5.

In Exclude Products, enter IDs of Products to be excluded from the Display Rule. Example: 3,4,5.

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.

Display Frequency of Magento 2 Popup

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).

  • 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?