Reading list Switch to dark mode

    How to Add Hyvä Popup Modal in Magento 2

    Updated 27 November 2023

    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