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
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 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:
- Display Rule
- Content and Design
There are 4 buttons to support creating a new pop-up:
- Save and Continue
- Save Pop-up
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
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:
- Horizontal Move
- Move from Top
- 3D Unfold
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.
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
In Content, use the WYSIWYG editor to create content for the pop-up.
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.