---
title: "How to Show Minicart in Custom Popup In Magento 2"
url: "https://magecomp.com/blog/show-minicart-custom-popup-magento-2/"
date: "2020-01-03T18:45:53+00:00"
modified: "2025-02-21T11:14:29+00:00"
author:
  name: "Dhiren Vasoya"
  url: "https://magecomp.com/"
categories:
  - "How To"
  - "Magento 2"
word_count: 791
reading_time: "4 min read"
summary: "Hey Magento Pals,"
description: "In this article, We have covered a complete guide with code for will learn how you can show minicart in custom popup in Magento 2.  "
keywords: "How To, Magento 2"
language: "en"
schema_type: "Article"
related_posts:
  - title: "What’s the difference between Allowed Countries, EU Countries, and Top Destinations in Magento?"
    url: "https://magecomp.com/blog/difference-between-allowed-eu-and-top-countries-in-magento/"
  - title: "Add Tree Mass action Dynamically In Sales Order Grid in Magento 2"
    url: "https://magecomp.com/blog/add-tree-mass-action-dynamically-in-sales-order-grid-in-magento-2/"
  - title: "Magento 2: Customize Checkout Order Summary by Adding Custom Content"
    url: "https://magecomp.com/blog/magento-2-customize-checkout-order-summary-by-adding-custom-content/"
---

# How to Show Minicart in Custom Popup In Magento 2

_Published: January 3, 2020_  
_Author: Dhiren Vasoya_  

![How to Show Minicart in Custom Popup in Magento 2](https://magecomp.com/blog/wp-content/uploads/2020/01/How-to-Show-Minicart-in-Custom-Popup-in-Magento-2-1024x512.webp)

Hey Magento Pals,

Everyone at MageComp wants to wish you the magical and marvelous Year ahead ?

Last, we have learned how you can [**Show Order Comments On The Invoice**](https://magecomp.com/blog/show-order-comments-invoice-magento-2/). Today, We will learn how you can show minicart in custom popup in Magento 2.

[![hyva theme development](https://magecomp.com/blog/wp-content/uploads/2025/02/hyva-theme-development-CTA-3.webp)](https://magecomp.com/services/hyva-theme-development/)

In Magento 2, generally, minicart shows in the header section of Magento, and whenever you click on minicart, it will show summary of your cart, but what if we want to show minicart in another place also, e. g. in popup, then don’t worry we have found solution for that too.

As always, we have developed the codes to achieve that in a matter of time. With the help of the below codes, you can display your minicart in custom popup, and you can set your popup design as per your requirement.

So, Let’s get into that and show how you can achieve that,

**Step 1**: To do this, create **default.xml** file inside,

**app\code\Vendor\Extension\view\frontend\layout folder** and add the below code:

```
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="checkout_cart_sidebar_item_renderers"/>
    <update handle="checkout_cart_sidebar_item_price_renderers"/>
    <update handle="checkout_cart_sidebar_total_renderers"/>
    <body>
        <referenceContainer name="content">
            <block name="custom_minicart" as="custom_minicart" template="Vendor_Extension::custompopupcart.phtml">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="types" xsi:type="array"/>
                        <item name="components" xsi:type="array">
                            <item name="minicart_content" xsi:type="array">
                                <item name="component" xsi:type="string">Magento_Checkout/js/view/minicart</item>
                                <item name="config" xsi:type="array">
                                    <item name="template" xsi:type="string">Magento_Checkout/minicart/content</item>
                                </item>
                                <item name="children" xsi:type="array">
                                    <item name="subtotal.container" xsi:type="array">
                                        <item name="component" xsi:type="string">uiComponent</item>
                                        <item name="config" xsi:type="array">
                                            <item name="displayArea" xsi:type="string">subtotalContainer</item>
                                        </item>
                                        <item name="children" xsi:type="array">
                                            <item name="subtotal" xsi:type="array">
                                                <item name="component" xsi:type="string">uiComponent</item>
                                                <item name="config" xsi:type="array">
                                                    <item name="template" xsi:type="string">Magento_Checkout/minicart/subtotal</item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                    <item name="extra_info" xsi:type="array">
                                        <item name="component" xsi:type="string">uiComponent</item>
                                        <item name="config" xsi:type="array">
                                            <item name="displayArea" xsi:type="string">extraInfo</item>
                                        </item>
                                    </item>
                                    <item name="promotion" xsi:type="array">
                                        <item name="component" xsi:type="string">uiComponent</item>
                                        <item name="config" xsi:type="array">
                                            <item name="displayArea" xsi:type="string">promotion</item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>
```

[![Magento version upgrade](https://magecomp.com/blog/wp-content/uploads/2025/02/Magento-2-Version-Upgrade-CTA-2.webp)](https://magecomp.com/services/magento-upgrade-services/)

**Step 2**: Next, create **custompopupcart.phtml** file inside **app\code\Vendor\Extension\view\frontend\templates folder** and add the below code:

```
            <!-- ko template: getTemplate() --><!-- /ko -->
    <script>
    window.checkout = <?=  $block->getSerializedConfig() ?>;
</script>
<script type="text/x-magento-init">
    {
        "[data-block='minicart']": {
            "Magento_Ui/js/core/app": <?=  $block->getJsLayout() ?>
        },
        "*": {
            "Magento_Ui/js/block-loader": "<?= $block->getViewFileUrl('images/loader-1.gif') ?>"
        }
    }
    </script>
<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: [{
                    text: $.mage.__('Continue'),
                    click: function () {
                        this.closeModal();
                        $('#popup-mpdal').hide();
                    }
                }]
            };
            $('#popup-mpdal').show();
            var popup = modal(options, $('#popup-mpdal'));
            $("#popup-mpdal").modal("openModal");
        }
    );
</script>
```

**Step 3**: After adding these codes, the final step is to refresh the Cache.

So, this was it. Now you are able to show minicart in custom popup also. If you like this article, then share it with your Magento colleague and friends. Also, let us know if you want us to write about the problem you are facing in the comments below.

[![Magento 2 Speed & Performance Optimization Services](https://magecomp.com/blog/wp-content/uploads/2025/02/Magento-2-Speed-Performance-Optimization-Services-CTA-3.webp)](https://magecomp.com/magento-performance-optimization.html)

Lastly, If you found any problem while implementing the codes, then contact our **[Support Team](https://magecomp.com/support)**. We will be happy to help you.

Happy Reading?

</body>


---

_View the original post at: [https://magecomp.com/blog/show-minicart-custom-popup-magento-2/](https://magecomp.com/blog/show-minicart-custom-popup-magento-2/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-20 06:46:14 UTC_  
