User Guide of Magento 2 Custom Popups Extension

At the backend, go to FME EXTENSIONS > Configurations. Here you can find the extension configurations.

General Configurations

• Extension Enable: Choose ‘Yes’ or ‘No’ to Enable or Disable the Extension

How to Manage Custom Popups?

At the back end, go to FME Extensions > Manage Popup. Here you will find all the previously created custom popups in a grid. You can Edit any one or click on the Add New Popup button to proceed.

Here you will have to provide the following information:

General Form

• Popup Enable: Option to Enable or Disable the popup on the frontend
• Popup Name: Enter a name/title for the popup
• Priority: Enter priority for the popup. High value has highest priority
• Store View: Choose the store views on which you want to enable the popup
• Trigger Popup on Event: Option to set a trigger event for displaying the popup:
  • Once the Page is Loaded
  • X Seconds After the Page is Loaded
  • Once the Page is Scrolled By X%
  • Once Cursor is Moved Outside the Page
• X value in Event: Enter the time here (in seconds) for the popup to appear
• Popup Effects: Choose from the following popup effects:
  • Fade Zoom
  • Fade Slide
  • Newspaper
  • Horizontal Move
  • Move From Top
  • 3D Unfold
  • Zoom Out
• Position: Choose the popup position on the screen:
  • Top Left
  • Top Center
  • Top Right
  • Middle Left
  • Middle Center
  • Middle Right
  • Bottom Left
  • Bottom Center
  • Bottom Right

Show on CMS Pages

• Pages: Select the CMS pages on which you want to display the popup

Show on Checkout Page (s)

• Checkout: Option to Show or Hide the popup on the checkout page
• Shopping Cart: Option to Show or Hide the popup on the shopping cart page

Popup Conent

• Popup Design: Enter the content of the popup in the WYSIWYG editor. For advanced design personalization, you can also write custom CSS to design the popup (Note: To change the default popup style, use class .white-popup)

Conditions

Conditions for the visibility of the pop-up on the front-end. Conditions (don't add conditions if the rule is applied to all products)

Frontend