Magento 2 Popup

Home > Magento Extension User Guides > Magento 2 Popup

 

Magento 2 Popup enables generating and showcasing popups with the important action to retain visitors' attention.

 

Table of Content

  1. Extension Installation
  2. Configuration
  3. Manage Popups
  4. Popup in Frontend

 

  1. Extension Installation
  • Extract the zip folder and upload our extension to root of your Magento 2 directory via FTP.
  • Login to your SSH and run below commands step by step:
    • php bin/magento setup:upgrade
    • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
    • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy–f
    • php bin/magento cache:flush
  • tha's it.

 

  1. Configuration
    For configuring the extension, login to Magento 2, move to Marketing > Configuration > Popup where you can find various settings to enable the extension.
  • Popup: Enable the Popup extension.


 

  1. Manage Popups
    Immediately after enabling the extension, move to Marketing > Manage Popups from where you can create new popups as per your requirement.
     
  • Popup Grid
    Already created and saved popups get enlisted here with the details such as name, display rule, display pages, store view, customer group, and others. Also, immediately after someone views the popup from the frontend, the count is updated here under the “Popup Views” option. Click “Add New Popup” to create a new popup.


  

  • Add New Popup
    On click of "Add New Popup" button, you can make popup settings.
    • Name: Enter the name of the popup to easily recognize it.
    • Status: Enable or disable the popup from here.
    • Store View: Select the store view in which you want to show this popup.
    • Customer Groups: Select the customer groups to which you want to show this popup.
    • Start Date: Define the start date to start displaying the popup.
    • End Date: Define the end date to stop displaying the popup.
    • Priority: Set priority of this popup. It helps to show the popup based on the priority when more than one popup satisfies the conditions for a page display.


  

  • Popup Display Settings
    Configure various settings for the popup display.
    • Display Rule: Select one of the popup display rules.
      • After customers spend X seconds on page: The popup is displayed when the users spend specified X seconds on the page.
      • After customers scroll page by X percent: The popup is displayed when the users scroll the page to X percentage.
      • Immediately when customers visit page: The popup is displayed immediately after the page is loaded.
    • X seconds/X Percentage: Enter the value of x in seconds or percentage based on the display rule selection.
    • Popup Display On: Select the pages where you want to show the popup.
    • Auto Close After: Enter the time in seconds after which you want to auto close the popup. Set 0 to disable the auto-close of the popup.


  

  • Content Settings
    The popup content block is fully customizable. Add content to show in the popup. You can add advertisements, newsletter subscription form, offer, promotions or any HTML code to show in the popup.
    • Add Content: Add any type of content to show in the popup using the WYSIWYG editor.
    • Add Custom CSS: Add custom CSS related to the popup content if required.


 

  1. Popup in Frontend
    On the scheduled start date, specified page and based on the display rule, the saved popup shows in the frontend based on the priority. As the popups are responsive, they can be seen from the tablet and mobile devices as well. For example, we have displayed coupon code block along with the social media connection buttons. You can display any type of content to grab the visitors’ attention and convert them to perform a specific action as per your requirements.


  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Updated:

Other Articles

and 238 more ...