2 Ways To Create Magento 2 Popup For Both Beginners & Professional

by Trang Tran

Many different forms of advertising effectively promote businesses these days. And Magento2 popup is currently one of many businesses’ most popular advertising methods. So what are the benefits of the popup? How do you create magento 2 popup for beginners and professional to bring efficiency to the company? 

If you also have these questions, let’s learn about the Magento2 popup in this article.

Benefits of Popup for Magento

A Magento 2 popup is an online advertisement that unexpectedly displays when you visit a website, usually in the shape of a little window. This advertising method has several advantages, including:

  • Capture customers’ attention: Popups effectively grab consumers’ attention because they automatically appear when they visit a website. To get rid of a popup, you usually have to close it or click away from it. To make this selection, the user must first decide whether or not they are interested in the offer. What exactly does this imply? They will most likely read the popup for a few seconds. That’s how you get people’s attention!
  • Can aid in increasing conversion rates: Most Magento2 popups promote a specific product, service, or even a discount. For example, the graphic above features our client, Sapporo, advertising their Meal Deal Specials. The odds of receiving more Meal Deal Specials conversions increase because this offer is readily available when someone reaches the site.
  • Able to customize: The great thing about popup advertising is that you can personalize it like any other add-ons to your website’s pages. It enables you to provide anything that your company needs. 
  • Assists in promoting your brand: Popups are a terrific location to put your most acceptable content and display your brand because they are adjustable and the first thing a user will see.

>>> See more about 7+ Benefits Of Magento 2 Popup Widget That Boost Your Conversion

How To Create Magento 2 Popup

Use Magento 2 modal widget

You may make modal popups for forms in Magento 2. Follow the instructions below to create magento 2 popup.

Step 1: Create content for the popup

On your website, create a container and assign it an ID. We will need the ID in the following steps.

Create Magento 2 Popup

Step 2: Use Magento 2 modal widget

Both jQuery and jQuery UI are now required in this step. You have to add the following code to your JS script:

Create Magento 2 Popup

Step 3: Set options for the modal widget

Before we launch the modal, let’s set the options for it. In your JS, create an options variable:

Create Magento 2 Popup

Step 4: Initialize the modal widget.

Now we need to initialize the modal, then bind the display content and settings that we have created:


When the button is pressed, create an event to display the popup:


Step 5: Finish

After doing all the above steps, our complete code should look like the below:

Create Magento 2 Popup


Typically, developers would go through the lengthy process of manually building the popup and then struggle to make it work with various themes. This is due to their ignorance of Magento 2’s default modal widget functionality. Using the modal widget to create popups is a time saver! Get the job done in a few lines of code and avoid the time-consuming and error-prone effort of producing Magento2 popups.

The modal widget is an excellent solution to create Magento 2 popup because it saves time and is compatible with all Magento themes.


Regardless of how simple the code is, you still need coding knowledge to implement it. 

Moreover, there are some limitations, such as:

  • Selecting targeted customer groups is not available 
  • Can not modify popup based on store view
  • Lack of rules, effects and positions
  • Limit the number of popups on the website
  • So on. 

Fortunately, we have the solution for you. The second method is ideal for both beginners and professionals. 

Leverage third-party extension

Popup extension is a popular topic for any e-commerce company, and you can simply locate one on numerous websites. Furthermore, the popup is the most popular among online retailers, with many e-commerce significant campaigns.

By leveraging third-party extensions such as BSS Commerce’s Magento 2 Popup, you can generate as many website popups as possible. Furthermore, depending on your marketing goal, you can choose several highly-converting Magento Popup themes and personalize them to be your own without any restrictions.


In addition, it’s critical to define your target client group to maximize sales margins through marketing activities. This extension could be handy. With the Magento2 popup plugin, you can select which consumer groups should receive campaign information and create a popup for them to interact with.

You may also choose from various store views to display your website popup in the way you want.

Popup module in Magento has a lot of functions. Among the benefits listed above, the extension has certain unique features, such as setting up display rules after analyzing customer behavior, customizing website popup flexibly, etc. 


  • Not required coding knowledge.
  • Break through all Magento default limitations
  • Setting up a popup schedule can save time for admins and store owners.
  • It’s worth noting that popup animation draws a lot of attention from customers.
  • Work nicely with a wide range of products and categories
  • Responsive for all devices


You need to have a certain amount of money to pay for the extension. Some of the modules are currently paying a monthly fee. However, with the Magento2 popup, you only need to pay an affordable price one time. 


>> Some helpful articles that you should read:

Pro Tips to Capture Customers’ Attention with Magento2 Popup

Create a clearly Magento popup strategy

Make a straightforward Magento popup strategy. The aims and positioning statements should be clear. It should also incorporate core principles into all content and guarantee that each piece of material it contains contributes to the growth of your brand.

Use a brand book


For your Magento2 popup, you should utilize a brand book to maintain and guarantee uniform visual standards for logos, typefaces, colors, image sizing, etc.

So how to create a prominent popup. You need to pay attention to the following points:

  • Short and quality message: Popup only appears for a short time. So what you want to convey to your customers needs to be quick and concise so that they can remember it right away without thinking much.
  • Color: Today’s design style prioritizes minimalism, contrast and synchronization. Pay attention to following trends and understand your audience’s psychology to choose impressive popup colors.
  • Font: There should only be a maximum of 2 fonts in a popup. Let’s coordinate harmoniously to create the best visual effect.
  • Featured Image: Featured image is always the point to attract customers when you want to provide services. Please take note of this.

Timing can be everything

Your popup could appear at various stages during your customer’s visit to your site. Customers may accomplish a specific action or be about to leave your site in a short period. Thus timing is crucial.

Choose the right message


It is critical to select the appropriate message. Do you know what I mean? Many clients are accustomed to quickly closing popup boxes, so you just have a split second to get their attention by sending the correct message.

Specifically, consider the unique CTA, a “Submit” button. This button is to select when the customer has been impressed by your service/product.

This will be the last point to attract customers. Help customers decide whether to choose your services or not. Therefore, you need to design beautiful, easy-to-interact CTA buttons.

Besides, ask customers to leave information for long-term contact and access. The best way to create a clear and concise CTA is to create something unique and novel. Stimulate customer curiosity. Surely no one can ignore a business that knows how to make exciting values ​​for its customers.


I hope that the article” 2 Ways To Create Magento 2 Popup For Both Beginners & Professional” can help you deal with your issue.

In general, popup is one of the best Magento 2 extension, it has several benefits and is also easy to set up. With the two ways above, we believe that you can effortlessly create one whether you have coding experience. If you can get over your first concern, you’ll soon discover that it’s both financially and in terms of client retention extremely lucrative and that the work is well worth it.

Next Reading Suggestions

© 2019 BSS Commerce owned by THANH CONG INTER ., JSC. All Rights Reserved.
Business registration certificate no. 0106064469 issued by Hanoi Department of Planning and Investment on 19 December 2019.
Legal Representative: Mr. Nguyen Quang Trung.