{"id":23562,"date":"2025-10-14T17:11:07","date_gmt":"2025-10-14T11:41:07","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=23562"},"modified":"2025-10-15T15:49:51","modified_gmt":"2025-10-15T10:19:51","slug":"create-custom-module-in-hyva-theme","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/create-custom-module-in-hyva-theme\/","title":{"rendered":"How to Create a Custom Module in Hyv\u00e4 Theme?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Magento 2 Hyv\u00e4 theme architecture is different from traditional Magento 2 structure. The main reason is that Hyv\u00e4 is built to be fast, so it uses much less JavaScript and CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This means that many standard Magento tools and methods that work fine on a regular Luma theme won&#8217;t work correctly on a Hyv\u00e4 theme. You have to change the way you code to fit Hyv\u00e4&#8217;s lightweight design.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Creating custom modules in Hyv\u00e4 themes is an essential part of Hyv\u00e4 development to extend functionality and customize the storefront for Magento 2 developers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can easily build a custom module for a Hyv\u00e4-powered store following the step by step process mentioned here.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Create Custom Module in Hyv\u00e4: Step-by-Step<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Look at the following directory structure module in the Hyva theme to idea from the below directory structure:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">app\/code\/Meetanshi\/Hyv\u00e4Custom\/<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u251c\u2500\u2500 registration.php<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u251c\u2500\u2500 etc<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2502 &nbsp; \u251c\u2500\u2500 frontend<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2502 &nbsp; \u2502 &nbsp; \u2514\u2500\u2500 routes.xml<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2502 &nbsp; \u2514\u2500\u2500 module.xml<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u251c\u2500\u2500 Controller<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2502 &nbsp; \u2514\u2500\u2500 Index<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2502 &nbsp; &nbsp; &nbsp; \u2514\u2500\u2500 Index.php<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u251c\u2500\u2500 view<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2502 &nbsp; \u2514\u2500\u2500 frontend<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2502 &nbsp; &nbsp; &nbsp; \u251c\u2500\u2500 layout<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2502 &nbsp; &nbsp; &nbsp; \u2502 &nbsp; \u2514\u2500\u2500 hyvacustom_index_index.xml<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2502 &nbsp; &nbsp; &nbsp; \u251c\u2500\u2500 templates<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2502 &nbsp; &nbsp; &nbsp; \u2502 &nbsp; \u2514\u2500\u2500 banner.phtml<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2502 &nbsp; &nbsp; &nbsp; \u2514\u2500\u2500 web<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2502 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \u2514\u2500\u2500 images<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2502 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \u251c\u2500\u2500 banner1.jpg<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let&#8217;s see the step by step process.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Module setup<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Step 1: Create the Following Folders<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>app\/code\/Meetanshi<\/li>\n\n\n\n<li>app\/code\/Meetanshi\/Hyv\u00e4Custom (Here, &#8220;Meetanshi&#8221; is the module&#8217;s namespace and &#8220;Hyv\u00e4Custom&#8221; is the module&#8217;s name.)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Note: You may need to manually create the &#8220;code&#8221; folder if it doesn&#8217;t already exist within the &#8220;app&#8221; directory.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 2: Create a module.xml File&nbsp;<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In the<strong> app\/code\/Meetanshi\/Hyv\u00e4Custom\/etc<\/strong> create a module.xml file with the below code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n&lt;module name=\"Meetanshi_Hyv\u00e4Custom\" setup_version=\"1.0.0\"\/>\n&lt;\/config>\n<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Step 3: Create a registration.php File&nbsp;<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In the <strong>app\/code\/Meetanshi\/Hyv\u00e4Custom<\/strong> folder create a registration file to register the module. Implement the below code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\nuse Magento\\Framework\\Component\\ComponentRegistrar;\n\nComponentRegistrar::register(\n    ComponentRegistrar::MODULE,\n    'Meetanshi_Hyv\u00e4Custom',\n    __DIR__\n);\n\n\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a Controller<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 4:<\/strong> Set the Router<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Define the router with <strong>routes.xml <\/strong>file in the <strong>app\/code\/Meetanshi\/Hyv\u00e4Custom\/etc\/frontend<\/strong> folder with the below code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:App\/etc\/routes.xsd\">\n&lt;router id=\"standard\">\n&lt;route id=\"hyvacustom\" frontName=\"hyvacustom\">\n&lt;module name=\"Meetanshi_Hyv\u00e4Custom\"\/>\n&lt;\/route>\n&lt;\/router>\n&lt;\/config>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">We define the frontend router and router with an id \u201chyvacustom\u201d.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Magento 2 URL syntax is <strong>&lt;frontName&gt;\/&lt;controler_folder_name&gt;\/&lt;controller_class_name&gt; <\/strong>and according to this, our URL will be <strong>hyvacustom\/index\/index.<\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 5: Create Index File<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Create the <strong>Index.php<\/strong> file in the <strong>app\/code\/Meetanshi\/Hyv\u00e4Custom\/Controller\/Index<\/strong> folder with the below code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\nnamespace Meetanshi\\Hyv\u00e4Custom\\Controller\\Index;\n\nuse Magento\\Framework\\App\\Action\\Action;\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Framework\\View\\Result\\PageFactory;\n\nclass Index extends Action\n{\n    protected $resultPageFactory;\n\n    public function __construct(\n        Context $context,\n        PageFactory $resultPageFactory\n    ) {\n        parent::__construct($context);\n        $this->resultPageFactory = $resultPageFactory;\n    }\n\n    public function execute()\n    {\n        return $this->resultPageFactory->create();\n    }\n}\n\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a Layout and Template files<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In the Hyv\u00e4 theme, the structure for layout files and templates remains the same as in default Magento 2.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You will still place these files in the view folder inside your module. This folder can also contain sub-folders like <strong>adminhtml, base, and frontend<\/strong> to organize your files based on where they are used.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 6: Create Hyv\u00e4 Custom File&nbsp;<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Use the below code to create a <strong>hyvacustom_index_index.xml<\/strong> file in the <strong>app\/code\/Meetanshi\/Hyv\u00e4Custom\/view\/frontend\/layout<\/strong> folder:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" layout=\"1column\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n&lt;body>\n&lt;referenceContainer name=\"content\">\n&lt;block class=\"Magento\\Framework\\View\\Element\\Template\" name=\"meetanshi.hyvacustom.banner\" template=\"Meetanshi_Hyv\u00e4Custom::banner.phtml\"\/>\n&lt;\/referenceContainer>\n&lt;\/body>\n&lt;\/page>\n<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 7:<\/strong> Create Banner File<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Create a <strong>banner.phtml <\/strong>file in the&nbsp; <strong>app\/code\/Meetanshi\/Hyv\u00e4Custom\/view\/frontend\/templates<\/strong> folder<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;section class=\"bg-[#f7f5f2] pt-6 pb-6 md:pb-6 lg:pb-8 xl:pb-[5rem] 2xl:container\">\n  &lt;div class=\" max-w-[905%] sm:max-w-[82%] mx-auto text-center text-xl\">\n    &lt;h3 class=\"text-[#000000] mb-6\">\n      Meetanshi Story So Far!\n    &lt;\/h3>\n&lt;!--    &lt;h4 class=\"hidden md:block font-medium text-[#000000] mb-6\">\n      Explore our ranges\n    &lt;\/h4> -->\n    &lt;div class=\"grid grid-cols-2 md:grid-cols-4 gap-4 px-4 sm:px-0\">\n      &lt;!-- Chains -->\n      &lt;a href=\"https:\/\/meetanshi.com\" class=\"relative group block overflow-hidden\">\n        &lt;img\n          src=\"https:\/\/meetanshi.com\/media\/wysiwyg\/46-meetmagento.jpg\"\n          alt=\"Ex Chains\"\n          loading=\"lazy\"\n          class=\"w-full h-full object-cover transition-transform duration-300 group-hover:scale-105\"\n        \/>\n      &lt;\/a>\n\n      &lt;!-- Necklaces -->\n      &lt;a href=\"https:\/\/meetanshi.com\" class=\"relative group block overflow-hidden\">\n        &lt;img\n          src=\"https:\/\/meetanshi.com\/media\/wysiwyg\/24-Team-at-GOA.jpg\"\n          alt=\"Ex Necklaces\"\n          loading=\"lazy\"\n          class=\"w-full h-full object-cover transition-transform duration-300 group-hover:scale-105\"\n        \/>\n      &lt;\/a>\n      &lt;!-- Bracelets -->\n      &lt;a href=\"https:\/\/meetanshi.com\" class=\"relative group block overflow-hidden\">\n        &lt;img src=\"https:\/\/meetanshi.com\/media\/wysiwyg\/21-Meetanshi-as-a-sponsor-in-Meet-Magento-India-2020.jpg\"\n          alt=\"Ex Bracelets\"\n          loading=\"lazy\"\n          class=\"w-full h-full object-cover transition-transform duration-300 group-hover:scale-105\"\n        \/>\n      &lt;\/a>\n      &lt;!-- Pendants -->\n      &lt;a href=\"https:\/\/meetanshi.com\" class=\"relative group block overflow-hidden\">\n        &lt;img\n          src=\"https:\/\/meetanshi.com\/media\/wysiwyg\/19-Second-Meetanshiversary.jpg\"\n          alt=\"Ex Pendants\"\n          loading=\"lazy\"\n          class=\"w-full h-full object-cover transition-transform duration-300 group-hover:scale-105\"\n        \/>\n      &lt;\/a>\n    &lt;\/div>\n  &lt;\/div>\n&lt;\/section>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This file is a bit different from the usual Magento setup as has the Hyv\u00e4 theme code woven in, which is shaking up the HTML and CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It builds a responsive image gallery section with four square images in a grid, <a href=\"https:\/\/meetanshi.com\/blog\/hyva-theme-css-file-directory-structure\/\">styled using Tailwind CSS<\/a>, and adds a subtle zoom effect on hover for each image.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"498\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Custom_Module_in_Hyva_theme-1024x498.png\" alt=\"Custom Module in Hyva theme\" class=\"wp-image-23543\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Custom_Module_in_Hyva_theme-1024x498.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Custom_Module_in_Hyva_theme-300x146.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Custom_Module_in_Hyva_theme-768x374.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Custom_Module_in_Hyva_theme.png 1516w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Building a custom Hyv\u00e4 module is about embracing a modern approach to web development.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By using Alpine.js for interactivity and Tailwind CSS for styling, you can create new features that don&#8217;t compromise on speed.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This ensures your store remains lightning-fast, providing a superior experience for your customers while meeting your specific business needs.<\/p>\n\n\n<div class=\"meetanshi-cta\">\r\n<div class=\"cta-content-wrapper\">\r\n<span> Hyv\u00e4 Development Service<\/span>\r\n<p>Get a fast-loading store in less than 7 weeks with Hyv\u00e4 theme<\/p>\r\n<a href=\"https:\/\/meetanshi.com\/hyva-theme-development-service\" target=\"_blank\" class=\"btn-primary\">Hire Us<\/a>\r\n<\/div>\r\n<div class=\"cta-image-new\">\r\n<img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/hyva-theme-development-service.png\" alt=\"Hyva Theme Development Service\">\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Magento 2 Hyv\u00e4 theme architecture is different from traditional Magento 2 structure. The main reason is that Hyv\u00e4 is built to be fast, so it uses much less JavaScript and CSS. This means that many standard Magento tools and methods that work fine on a regular Luma theme won&#8217;t work correctly on a Hyv\u00e4 theme. [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5869],"tags":[],"class_list":["post-23562","post","type-post","status-publish","format-standard","hentry","category-hyva-themes"],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23562","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=23562"}],"version-history":[{"count":6,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23562\/revisions"}],"predecessor-version":[{"id":23711,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23562\/revisions\/23711"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=23562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=23562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=23562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}