{"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&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5869],"tags":[],"class_list":["post-23562","post","type-post","status-publish","format-standard","hentry","category-hyva-themes"],"acf":[],"_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}]}}