{"id":7887,"date":"2025-02-06T10:52:24","date_gmt":"2025-02-06T10:52:24","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=7887"},"modified":"2025-09-19T14:55:23","modified_gmt":"2025-09-19T09:25:23","slug":"add-popup-modal-in-hyva-theme","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-popup-modal-in-hyva-theme\/","title":{"rendered":"How to Add a Popup Modal in Magento 2 Hyv\u00e4 Theme?"},"content":{"rendered":"\n

Are you working on a Hyv\u00e4 theme project and want to add a popup modal? Follow the simple steps provided in this guide to add a popup modal in the Magento 2 Hyv\u00e4 theme.<\/p>\n\n\n\n

Popups are visual elements that appear on top of other elements on the screen, forcing users to focus on the provided information. They are used for promoting newsletter signups, discount offers, and announcing important news.<\/p>\n\n\n\n

In the Magento 2 Hyv\u00e4 theme, we can display such modal popups by creating a custom module. Let’s understand it more deeply through an example.<\/p>\n\n\n\n

Method to Create a Magento 2 Hyv\u00e4 Theme Popup<\/h2>\n\n\n\n

We’ll create a custom module that displays a custom popup on the Hyv\u00e4 theme.<\/p>\n\n\n\n

The custom module structure will look like this:<\/p>\n\n\n\n

app\/code\/Meetanshi\/HyvaPopup\/\n\u251c\u2500\u2500 etc\/\n\u2502   \u251c\u2500\u2500 module.xml\n\u251c\u2500\u2500 registration.php\n\u251c\u2500\u2500 view\/\n\u2502   \u251c\u2500\u2500 frontend\/\n\u2502   \u2502   \u251c\u2500\u2500 layout\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 default.xml\n\u2502   \u2502   \u251c\u2500\u2500 templates\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 Template.phtml\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 Popup.phtml<\/pre>\n\n\n\n
Let’s go through the steps to create a custom module for showing a custom popup in Hyv\u00e4 theme.<\/p>\n\n\n\n
Step 1: Define & Register a Custom Module<\/h3>\n\n\n\n
Create a registration.php file with the given code.<\/p>\n\n\n\n
app\/code\/Meetanshi\/HyvaPopup\/registration.php:<\/code><\/pre>\n\n\n\n
<?php\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n    \\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\n    'Meetanshi_HyvaPopup',\n    __DIR__\n);<\/pre>\n\n\n\n
Now, register the module by creating the module.xml file.<\/p>\n\n\n\n
app\/code\/Meetanshi\/HyvaPopup\/etc\/module.xml:<\/code><\/pre>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n    <module name=\"Meetanshi_HyvaPopup\" setup_version=\"1.0.0\"\/>\n<\/config><\/pre>\n\n\n\n
Step 2: Create a Layout File<\/h3>\n\n\n\n
To add the popup modal to Magento 2 Hyv\u00e4 frontend, create the following XML file.<\/p>\n\n\n\n
app\/code\/Meetanshi\/HyvaPopup\/view\/frontend\/layout\/default.xml:<\/code><\/pre>\n\n\n\n
<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <update handle=\"hyva_modal\"\/>\n    <body>\n       <referenceBlock name=\"header-content\">\n             <action method=\"setTemplate\">\n                <argument name=\"template\" xsi:type=\"string\">Meetanshi_HyvaPopup::Template.phtml<\/argument>\n            <\/action>\n        <\/referenceBlock>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
Step 3: Create a Popup Template<\/h3>\n\n\n\n
Now, define a structure for the popup modal in HTML and its trigger.<\/p>\n\n\n\n
app\/code\/Meetanshi\/HyvaPopup\/view\/frontend\/templates\/Template.phtml:<\/code><\/pre>\n\n\n\n
<?php\n$modalViewModel = $viewModels->require(\\Hyva\\Theme\\ViewModel\\Modal::class);\n?>\n<div class=\"text-sm\">\n    <div class=\"meetanshi-popup-container\" x-data=\"hyva.modal()\">\n          <?= $escaper->escapeHtml(__('Meetanshi Popup Modal')) ?>\n          <?php\n          $modal = $modalViewModel->createModal()->withTemplate('Meetanshi_HyvaPopup::Popup.phtml');\n          $modalBlock = $modal->getContentRenderer();\n          $modal->withAriaLabel('Meetanshi Popup Modal')\n                ->withDialogRefName('popupRef')\n                ->withDialogClasses('inline-block max-h-screen overflow-auto bg-white shadow-xl rounded-lg text-gray-700 w-3\/4 p-4');\n          ?>\n          <?= \/* @noEscape *\/ $modal ?>\n          <a id=\"popup_button\" href=\"#\" class=\"text-blue-900 font-bold\" @click='show(\"popupRef\", $event)'>\n                 <?= $escaper->escapeHtml(__('Open Meetanshi Popup'))?>\n          <\/a> \n    <\/div>\n<\/div><\/pre>\n\n\n\n
The above code uses Hyv\u00e4’s modal system and displays the popup when the user clicks the “Open Meetanshi Popup” button. It loads the popup from the Popup.phtml file.<\/p>\n\n\n\n
You can customize the code and its trigger as per your design requirements.<\/p>\n\n\n\n
Step 4: Add Popup Content<\/h3>\n\n\n\n
Now, we will define the content to be shown in the Hyv\u00e4 theme popup.<\/p>\n\n\n\n
app\/code\/Meetanshi\/HyvaPopup\/view\/frontend\/templates\/Popup.phtml:<\/code><\/pre>\n\n\n\n
<?= 'Meetanshi Special Offer: Get 20% Off! \ud83c\udf89' ?><\/pre>\n\n\n\n
Once the module is created, run the following commands:<\/p>\n\n\n\n