Table of contents

How it worksStep-by-step: how to show a popup after Add to CartOptional enhancementsBenefitsBest practicesCommon use casesFAQsHow to get started

Get the industry’s most secure Magento hosting◦ 99.99% uptime
◦ Comprehensive security
◦ 24/7 support

Magento Guide → Cart → Add To Cart

Magento 2: How to show a popup after an Add to Cart button click

Adding a popup after someone clicks the Add to Cart button in Magento 2 can improve your store’s user experience and boost conversions. Instead of redirecting or just showing a message, a popup lets you provide instant feedback, suggest other products, or invite users to continue shopping—all without leaving the current page.

Let’s walk through how to build this feature step by step using Magento 2’s ajax:addToCart event.

Host Magento at full throttle.

Get secure, reliable Magento hosting so you can scale faster.

Magento hosting

How popup behavior works with Add to Cart in Magento 2

When a shopper clicks the Add to Cart button, Magento 2 usually sends the request using AJAX. That means the product gets added to the cart in the background without reloading the whole page. During this process, Magento fires a JavaScript event called ajax:addToCart.

That event is our key to showing a popup. We can listen for it in custom JavaScript, and when it happens, trigger a modal window or popup with whatever content we want—confirmation, upsells, checkout buttons, and more.

Step-by-step: how to show a popup after Add to Cart

Here’s a beginner-friendly walkthrough for creating a simple popup in Magento 2 using your own module.

1. Create a custom module

Magento modules are like plugins—they let you add features without modifying the core. To create one:

Navigate to app/code in your Magento directory.
Create a folder structure like this:
app/code/Vendor/PopupModule
Inside that folder, create registration.php:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_PopupModule',
    __DIR__
);

Create etc/module.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_PopupModule" setup_version="1.0.0"/>
</config>

Enable the module:
php bin/magento setup:upgrade
php bin/magento module:enable Vendor_PopupModule
php bin/magento setup:di:compile

2. Create a layout XML file for the popup

Next, define where and how your popup HTML will appear.

Create this file: view/frontend/layout/default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="after.body.start">
            <block class="Magento\Framework\View\Element\Template" name="popup.confirmation" template="Vendor_PopupModule::popup/confirmation.phtml"/>
        </referenceContainer>
    </body>
</page>

This adds your popup template to the page without affecting other layouts.

3. Create the popup template

Make this file:
view/frontend/templates/popup/confirmation.phtml

Here’s a basic version:

<div id="popup-confirmation" style="display:none;">
    <div class="popup-inner">
        <p>Product added to cart!</p>
        <button class="close-popup">Close</button>
    </div>
</div>

You can style this and add more features later.

4. Add the JavaScript file

Make a JS file that listens for the ajax:addToCart event.

Create: view/frontend/web/js/popup-trigger.js

define(['jquery', 'mage/url'], function ($, urlBuilder) {
    return function () {
        $(document).on('ajax:addToCart', function () {
            $('#popup-confirmation').fadeIn();

            $('.close-popup').on('click', function () {
                $('#popup-confirmation').fadeOut();
            });
        });
    };
});

This code opens the popup when the Add to Cart event fires and closes it when the close button is clicked.

5. Configure RequireJS

Create: view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            popupTrigger: 'Vendor_PopupModule/js/popup-trigger'
        }
    },
    deps: ['popupTrigger']
};

This loads your popup-trigger.js globally on the frontend.

6. Style your popup (basic CSS)

Create a simple CSS file: view/frontend/web/css/popup.css

#popup-confirmation {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 20px;
    z-index: 9999;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.popup-inner {
    text-align: center;
}

Include this CSS using layout XML or add it to your theme.

7. Deploy and test

Clear cache and deploy your static files:

php bin/magento setup:static-content:deploy
php bin/magento cache:clean

Then go to your storefront, click Add to Cart, and make sure your popup appears.

Optional enhancements for your popup

Want to make your popup more dynamic or useful? Try adding:

Upsell/cross-sell products: Show related SKUs using custom PHP logic in Block/Popup.php.
Proceed to Checkout button: Add a CTA to push users toward conversion.
Continue Shopping button: Help users easily dismiss the popup and keep browsing.
Mini cart preview: Integrate with the minicart widget so shoppers see updates live.

Benefits of using ajax:addToCart

Using the ajax:addToCart event has real advantages over modifying core JS files:

Non-intrusive: Doesn’t touch Magento’s internal cart logic.
Modular: Easy to maintain or disable without affecting the whole site.
Flexible: You can listen to the same event for other features too.

Best practices for Magento 2 popups

Designing a popup isn’t just about getting it to appear—it also needs to support your store’s goals without annoying your customers. Here are some best practices to make your Magento 2 popups more effective and user-friendly.

Keep it short: Only include what’s necessary. Don’t overload the user.
Make it dismissible: Always allow users to close the popup.
Responsive design: Ensure your popup works on all devices.
Accessibility: Use ARIA roles and keyboard focus management.
Performance: Keep your popup assets lightweight so they don’t slow the page.

Common use cases for post–Add to Cart popups

Once you master the basics, you can use this feature for a variety of goals:

Promotions and offers: “You’re $10 away from free shipping!”
Related product suggestions: Show accessories or items in the same category.
Lead generation: Prompt guest users to enter their email for a discount.
Flash deals: Offer a time-sensitive discount if they checkout now.
Gamification: Show a progress bar toward a gift or loyalty reward.

Magento 2 cart FAQs

You can create a custom module that uses JavaScript to listen for the ajax:addToCart event. When triggered, your JavaScript can open a popup with any content you want.

It’s a button that lets users select a product and store it in a shopping cart while they continue browsing. Clicking it doesn’t mean the user is checking out—it’s just the first step toward buying.

You can disable the Add to Cart button by changing a product’s visibility settings, setting its stock status to “Out of Stock,” or removing the button using layout XML or theme overrides.

Use a .phtml template to define the popup HTML, then show and hide it using JavaScript. Magento also supports UI components like Magento_Ui/js/modal/modal for more advanced popups.

Next steps for showing a popup after Add to Cart in Magento 2

Adding a popup after the Add to Cart click helps your Magento store feel more interactive and user-friendly. Whether you’re suggesting related products or simply confirming the cart update, a well-timed popup adds value.

Start by creating a basic custom module, hook into the ajax:addToCart event with JavaScript, and display your popup with helpful content.

Ready to upgrade your Magento experience? Professional hosting improves speeds, security, and reliability for a website and a brand that people find engaging and trustworthy.

Liquid Web offers the raw infrastructure power you need with mission-critical features that keep your store running smoothly. Most importantly, our in-house Magento experts are standing by to help with both hosting and Magento application roadblocks.

Click through below to explore all of our Magento hosting options, or chat with an expert right now to get answers and advice.