Redeem Now
Read More
Read now
Menu Close
    Start a Project Request quote Reading list Switch to dark mode
    magento-hyperlocal-marketplace-guide

    Pop-up Builder for Magento 2

    Introduction

    The Pop-up Builder for Magento 2 module allows the store owner to create and send unlimited pop-up notifications for the e-commerce store. These pop-ups can be used for marketing purposes or to create awareness about new or popular products.

    The admin can create templates for creating different types of pop-ups and can select a particular template as per the popup requirement.

    This module also enables the admin to set the start and end date of the pop-up visibility to the customers.

    The admin can even select the display device, the page at which the pop-up will appear its position and a suitable entry and exit animation type for the pop-up.

    Moreover, the admin can even view the pop-up data and reports based on customer interaction.

    Watch the Video to Checkout The Popup Builder Module Workflow

    OgpV7NTCNqE

    Features – Pop Up in Magento 2

    • The admin can create multiple templates for creating the pop-ups.
    • The admin can add HTML and CSS for the pop-up template.
    • Simply edit and create a popup enter its heading, description and select its layout.
    • The admin can set the duration by selecting the start and end date for a pop-up.
    • The admin can select the popup position.
    • Select the pages for which the pop-up will work and when it will appear.
    • Further, the admin can enable how the pop up can be closed either by clicking outside the pop-up box or clicking the Esc button.
    • The admin can set the alignment of the pop-up element.
    • A report of the customer actions over pop-up with the number of clicks and views is recorded.
    • The pop-up data helps the admin to know about customer inputs on a specific pop-up.
    • The admin can select the pop-up animation entrance and exit.

    Module Installation – Pop Up in Magento 2

    Firstly, the customers will get a zip folder and they have to extract the contents of this zip folder on their system. And, the extracted folder has an src folder, in the src folder, you will find the app folder.

    Then, you will have to transfer this app folder into the Magento 2 root directory on the server as depicted below.

    After the successful installation of Magento 2 Popup, you have to run the command in the Magento 2 root directory.

    First command –

    Second Command –

    Third Command –

    Fourth Command –

    Cache Management

    Then, after running the commands, you have to flush the cache from the Magento admin panel. So, navigate through->System->Cache management as shown below.

    Multilingual Support – Pop Up in Magento 2

    Now, the admin will navigate to Stores->Configuration->General ->Locale Options. Here, you can select the locale as English. (Locale is the language into which the admin desires to translate his store content).

    Module Translation – Pop Up in Magento 2

    If you want to translate the module language from English to German. Then, follow the following path in the unzipped Magento 2 web security folder. src/app/code/Webkul/PopupBuilder/i18n.

    After that, you will receive a CSV file with the name “en_US.csv”. Now, rename that CSV on your region code and language code “de_DE.csv”. And then translate all right-side content in your language.
    After editing the CSV, save it and then you need to upload it where you have installed Magento 2 on the server.

    Consequently, the module will get translated into your desired Language.

    Module Configuration – Pop Up in Magento 2

    After the successful installation of the module, the admin can navigate to go to the POPUP > Popup for the module configuration.

    Here the admin can check the list of all the pre-existing added popups.

    Add New Popup – Information

    The admin can click on the Add New button to add a new popup. As a result, the below page will open up.

    Popup Name: The admin can define the newly added popup with a suitable name.

    Status: The admin is required to enable/disable a popup from here.

    Customer Group: The admin can select the customer group for whom the popup will be visible.

    Start Date: Enter the start date from when the popup will be active on the front end.

    End Date: Enter the End date from when the popup will be deactivated on the front end.

    Choose Layout: For the popup layout, the admin can select a template design from the dropdown menu.

    Pages

    The admin needs to select the Pages for which the popup will be visible. Currently, the admin can choose from the below options.

    • None: If selected None the popup will be visible on none of the pages of the front end.
    • All pages: The admin can select All pages so that the pop-up is visible on all the pages of the front end.
    • Specific Pages: The admin can also use this option to only enable the pop-up for a selective page for which the admin can enter the Specific Page URL of that page as shown in the below image.

    The Popup Position: The admin can select the popup position from the given options Top Left, Left, Bottom Left, Top centre, centre, Bottom centre, Top right, Right and Bottom Right.

    Popup Animation Entrance: The admin can also select a Popup animation entrance such as None, BounceIn, BounceInDown, BounceInLeft, BounceInRight, BounceInUp.

    Popup Animation Exit: The admin can also select a Popup animation exit such as None, BounceOut, BounceOutDown, BounceOutLeft, BounceOutRight, BounceOutUp.

    When Popup will appear? Moreover, the admin can also configure when the Popup will appear by selecting the following options from the drop-down: None, On Scroll X% from the top? On-Page Load, On Click Class Match and On Click Id Match. 

    Close Popup when clicking outside of the box: Further, the admin can Select Yes/No to enable the pop up to be closed by clicking outside of the box.

    Close Popup on Esc Button: Similarly, Select Yes/No to enable the pop up to be closed by clicking the Esc Button.

    Add New Popup – Popup Information – Layout 

    Under the Layout section, the admin can select the layout of the popup from the drop-down menu.

    The module helps the admin to choose from different types of the popup. Further, we will define each popup layout and Settings of the same. 

    Newsletter Popup

    Once, the admin selects the Newsletter popup below options will be visible for the popup settings.

    Settings Newsletter Popup

    Further, enter the inputs for the below settings under the Newsletter popup.

    Heading: The admin can enter a Heading for the Newsletter popup.

    Description: The admin can add a popup description that will be visible in the popup.

    Subscribe button: Moreover, the admin can add a subscribe button in the Newsletter Popup as well. Here, the admin needs to enter the Subscribe title.

    Close Label Button: The admin can enable/disable the close label button.

    Close Button: The admin can enable/disable the close button.

    Element Align: Lastly, the admin can also set the alignment of the popup element.

    Offer Popup/Image Popup

    Once, the admin selects the Offer Popup/Image Popup below options will be visible for the popup settings.

    Settings – Offer Popup/Image Popup

    As shown in the above image the admin can select the Close Button Color.

    Yes/No Popup

    Once, the admin selects the Yes/No Popup the below options will be visible for the popup settings.

    Settings – Yes/No Popup

    Heading: The admin can enter a Heading for the Yes/No popup.

    Description: The admin can add a popup description that will be visible in the popup.

    Background Image: The admin can upload an image that will be visible as the background of the respective popup.

    Yes Button: Here, the admin has two fields. Firstly enter the Yes Button URL, Secondly, provide a name for the Yes Button Title.

    Cancel Button: The admin can enable/disable the cancel button.

    Close Label Button: The admin can enable/disable the close label button.

    Element Align: Lastly, the admin can also set the alignment of the popup element.

    Follow us PopUp

    Once, the admin selects the Follow us Popup the below options will be visible for the popup settings.

    Settings – Follow us PopUp

    Heading: The admin can enter a Heading for the Follow us popup.

    Description: The admin can add a popup description that will be visible in the popup.

    Background Image: The admin can upload an image that will be visible as the background of the respective popup.

    Now, in the next sections, the admin simply needs to paste the URL of the mentioned social media platforms so as the user is redirected to the same page when clicked.

    The follow us popup includes these social media platforms follow button links –Facebook, Twitter, Instagram, Linked In & Youtube.

    Cancel Button: The admin can enable/disable the cancel button.

    Element Align: Lastly, the admin can also set the alignment of the popup element.

    Video Popup

    Once, the admin selects the Video Popup the below options will be visible for the popup settings.

    Settings – Video Popup

    Heading: The admin can enter a Heading for the Video popup.

    Description: The admin can add a popup description that will be visible in the popup.

    Video URL: The admin needs to enter the URL of the video for the video popup.

    Close Button: The admin can enable/disable the close button.

    Details Video Popup

    Once, the admin selects the Details Video Popup the below options will be visible for the popup settings.

    Settings – Details Video Popup

    Heading: The admin can enter a Heading for the Details Video popup.

    Description: The admin can add a popup description that will be visible in the popup.

    Video URL: The admin needs to enter the URL of the video for the video popup.

    Close Button: The admin can enable/disable the close button.

    Close Label Button: Here, there are two inputs required in the field. Firstly enter a URL in the  Close Button URL to which the user will be redirected if clicked and the Close Button Title.

    Cookies Popup

    Once, the admin selects the Cookies Popup the below options will be visible for the popup settings.

    Settings – Cookies Popup

    Heading: The admin can enter a Heading for the Cookies popup.

    Description: The admin can add a popup description that will be visible in the popup.

    Background Image: The admin can upload an image that will be visible as the background of the respective popup.

    Yes Button: Here, the admin has two fields. Firstly enter the Yes Button URL, Secondly, provide a name for the Yes Button Title.

    Close Label Button: Here, there are two inputs required in the field. Firstly enter a URL in the  Close Button URL to which the user will be redirected if clicked and the Close Button Title.

    Close Button: The admin can enable/disable the close button.

    Element Align: Lastly, the admin can also set the alignment of the popup element.

    Report – Popup Information

    The admin can go to the Popup Information > Report while editing or adding a new popup and can check the Report of the popup.

    The Report will help you analyze how effective your popups are whats is the rate of user interaction that fetches. As a result, helping in the conversion of more customers.

    Moreover, the admin can check the Views, Clicks, and Average Popup View Duration in seconds.

    Edit/Delete Popup

    The admin has the option to edit or delete an existing pop-up as well. For this go to the POPUP > Popup under the actions tab click select and then Edit or Delete the popup as required.

    If the admin selects to edit a popup as shown below.

    Further, on the Edit Popup page go to the Layout section under Popup information. after which, the admin can make the required changes and click Save. 

    As a result, the below success message will be displayed to the admin.

    The admin can go to the POPUP > Popup Template to visit the list of all the added templates.

    Add New Template – Pop Up in Magento 2

    The admin can simply click on the Add New button and give input for the below fields.

    Name: The admin can give a suitable name to the template design.

    Enabled: From here the admin can enable/disable the template.

    Description: Here, the admin can add the description of the template.

    HTML: The admin is required to enter the HTML content for the layout of the template.

    CSS: The admin is to required to enter the CSS content for the layout of the template.

    As a result, when the admin saves the template below success message will be visible.

    Note: The admin can even Edit/Delete a Popup by selecting the Edit/Delete button after clicking on the select button under the Action tab.

    As soon as the user opens the frontend page based on the configurations done by the admin the popup will be visible to the customers as shown in the below image.

    That’s all for the Magento 2 pop-up builder. If you still have any questions regarding the module please create a support ticket by clicking here or send an email to support@webkul.com

    Current Product Version - 5.0.0

    Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close

    Table of Content

    Hide Index