Back to Top

How to Add Hyvä Popup Modal in Magento 2

Updated 22 March 2024

Today we will learn how to add the popup modal on the Hyvä  theme in Magneto 2

Hyvä popup modal is used to display additional popup information, popup forms ,etc. in magento 2

In this example, I will show you how to create a sample popup using the Hyvä  popup modal.

Firstly, we need to create a layout file on which we want to display the popup:

Add the below code in hyva_webkul_hyvapopup_add.xml file at path-

Start your headless eCommerce
Find out More


<?xml version="1.0"?>
<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="hyva_modal"/>
       <referenceBlock name="header-content">
             <action method="setTemplate">
                <argument name="template" xsi:type="string">Webkul_HyvaPopup::Template.phtml</argument>

Now add the template on which you want to add the popup

Create Template.phtml file at the below path:


$modalViewModel = $viewModels->require(\Hyva\Theme\ViewModel\Modal::class);
<div class="text-sm">
    <div class="wk-seller-card-row" x-data="hyva.modal()">
          <?= $escaper->escapeHtml(__('Sample Popup Modal')) ?>
          $modal = $modalViewModel->createModal()->withTemplate('Webkul_HyvaPopup::Popup.phtml');
          $modalBlock = $modal->getContentRenderer();
          $data = "sample data";
          $modal->withAriaLabel('Sample Popup modal')
                ->withDialogClasses('inline-block max-h-screen overflow-auto bg-white shadow-xl rounded-lg text-gray-700 w-3/4 rounded-sm p-4');
          $modalBlock->setData('popupRefName', ['formAction' => $block->getStatusFormAction()]) ?>
          <?= /* @noEscape */ $modal ?>
          <a id="popup button" href="#" class="text-blue-900 font-bold" @click='show("popupRefName", $event)'>
                 <?= $escaper->escapeHtml(__('OPen Popup'))?>

In above code:

withAriaLabel – > Includes popup Label

withDialogRefName – >Includes reference name of popup

withDialogClasses – >Includes Tailwind CSS classes for adding style in popup.

At last, we need to create a Popup.phtml file which will contain the structure of popup.

Create Popup.phtml at app/code/Webkul/HyvaPopup/view/frontend/templates/

<?= 'The content to be displayed in Popup ' ?>


popup modal Hyva theme

For more reference please visit the modal dialog overview


If you have any queries please contact us at Webkul Support System.

If you’re looking to create a custom e-commerce website, it’s a great idea to Hire Hyva Magento developers who can help you build a powerful and scalable online store.

. . .

Leave a Comment

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

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home