{"id":3586,"date":"2024-08-28T12:14:03","date_gmt":"2024-08-28T12:14:03","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/how-to-create-a-hyva-child-theme-in-magento-2\/"},"modified":"2025-07-14T09:17:43","modified_gmt":"2025-07-14T03:47:43","slug":"how-to-create-a-hyva-child-theme-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/how-to-create-a-hyva-child-theme-in-magento-2\/","title":{"rendered":"How to Create a Hyv\u00e4 Child Theme in Magento 2?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Hyv\u00e4 themes have recently gained popularity among Magento 2 store owners. They are known for their simplicity and excellent performance.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Further, the ease of customization of Hyv\u00e4 themes has drastically increased their user base.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this blog post, you will learn to create a child theme in Magento 2 using Hyv\u00e4 themes for your Magento 2 store.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Create a Hyv\u00e4 Child Theme?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When you want to customize the Hyv\u00e4 theme for your store and add functionalities of your choice, you have two options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Creating a Hyv\u00e4 child theme<\/li>\n\n\n\n<li>Duplicating the existing Hyv\u00e4 theme<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The latter option requires sound technical expertise, and that\u2019s why Magento users often opt for the first option\u2014creating a Hyv\u00e4 child theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Hyv\u00e4 child themes are designed to allow developers to customize the core Magento 2 theme without modifying the core files. This practice ensures that updates of parent themes do not overwrite customizations.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here are a few more reasons for you to count on the Hyv\u00e4 child theme:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Child themes inherit styling functionalities from the parent Hyv\u00e4 theme. This allows developers to make modifications or add new features, leveraging the styles.<\/li>\n\n\n\n<li>Hyv\u00e4 child themes promote modularity in theme development. Hence, it will be easier for developers to build and manage custom features more structurally.<\/li>\n\n\n\n<li>Since the updates in the parent theme will be applied automatically to the child theme, you can create a future-ready store using Hyv\u00e4 child themes.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites for Creating a Hyv\u00e4 Child Theme in Magento 2<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here is a checklist of all the essentials to create a child theme in Hyv\u00e4 Magento 2:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Magento 2 Store Compatibility:&nbsp;<\/strong>Hyv\u00e4 themes are compatible with Magento 2.3 and above. Ensure you&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/how-to-upgrade-magento-2-to-latest-version\/\">upgrade your Magento store<\/a>&nbsp;and that the instances run smoothly.<\/li>\n\n\n\n<li><strong>Hyv\u00e4 Parent Theme:&nbsp;<\/strong>If you are already a Hyv\u00e4 theme user, you will have the Hyv\u00e4 parent theme installed on your Magento 2 store. If you are migrating to Hyv\u00e4 themes, you must purchase their license from their official website.&nbsp;<\/li>\n\n\n\n<li><strong>Hyv\u00e4 Specific Tools:<\/strong>&nbsp;A developmental tool kit and knowledge of the language like Tailwind CSS and Alpine.js. Here, Hyv\u00e4 themes use Alpine.js to handle frontend interactions and <a href=\"https:\/\/meetanshi.com\/blog\/how-to-use-tailwind-css-in-magento-2-step-by-step-guide\/\">use Tailwind CSS for styling<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Create a Hyv\u00e4 Child Theme in Magento 2?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow the below steps for Magento 2 to create a child theme &nbsp;:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Create a Magento Theme Folder<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create a Magento theme folder for your child theme. This is how your child theme directory structure will look like:&nbsp;<\/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=\"\">app\n\u2514\u2500\u2500 design\n   \u2514\u2500\u2500 frontend\n       \u2514\u2500\u2500 Vendor\n           \u2514\u2500\u2500 ChildTheme\n               \u251c\u2500\u2500 etc\n               \u2502   \u2514\u2500\u2500 view.xml\n               \u251c\u2500\u2500 registration.php\n               \u251c\u2500\u2500 theme.xml\n               \u251c\u2500\u2500 web\n               \u2502   \u251c\u2500\u2500 css\n               \u2502   \u2502   \u2514\u2500\u2500 source\n               \u2502   \u2502       \u2514\u2500\u2500 tailwind.css\n               \u2502   \u2514\u2500\u2500 tailwind.config.js\n               \u2514\u2500\u2500 composer.json<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Define The Theme\u2019s Configuration<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Next, create a <strong>\u2018theme.xml\u2019<\/strong> file in the child theme directory with the following code base.&nbsp;<\/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;?xml version=\"1.0\"?>\n&lt;theme xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Config\/etc\/theme.xsd\">\n &lt;title>Hyv\u00e4 Child Theme&lt;\/title>\n &lt;parent>Vendor\/hyva&lt;\/parent>\n &lt;media>\n &lt;preview_image>media\/preview.jpg&lt;\/preview_image>\n &lt;\/media>\n\n&lt;\/theme><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Register the Theme With Magento 2<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create a registration.php file inside the folder path <strong>app\/design\/frontend\/Hyva\/ChildTheme<\/strong>. Here, add the mentioned lines in the code.&nbsp;<\/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;\nComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend\/Vendor\/hyva-child', __DIR__);<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Create a Composer file&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Head to <strong>app\/design\/frontend\/Hyva\/hyva_child\/<\/strong>, create a composer.json file, and add the following code:&nbsp;<\/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=\"\">{\n\"name\": \"hyva\/hyva-child\",\n\"description\": \"N\/A\",\n\"require\": {\n\"php\": \"~5.5.0|~5.6.0|~7.0.0\",\n\"magento\/luma\": \"100.0.*\",\n\"magento\/framework\": \"100.0.*\"\n},\n\n\"type\": \"magento2-theme\",\n\"version\": \"2.2.1\",\n\"license\": [\n\"OSL-3.0\",\n\"AFL-3.0\"\n],\n\n\"autoload\": {\n\"files\": [\n\"registration.php\"\n]\n}\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Copy the web Folder from the Parent Theme<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Head to <strong>vendor\/hyva-themes\/magento2-default-theme <\/strong>and copy the following directories to ensure the child theme gets the required assets from the parent theme.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>app\/design\/frontend\/Hyva\/hyva_child\/web\/css\n\napp\/design\/frontend\/Hyva\/hyva_child\/web\/js\n\napp\/design\/frontend\/Hyva\/hyva_child\/web\/images\n\napp\/design\/frontend\/Hyva\/hyva_child\/web\/tailwind<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6: Add an Image Preview<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now, place an image instead of the media folder of your child theme.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>app\/design\/frontend\/Hyva\/hyva_child\/media\/preview.png<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This image will appear in the Magento admin under<strong> Content &gt; Design &gt; Themes<\/strong>.&nbsp;Make sure while making these changes your project container has the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node.js version 16.0.0<\/li>\n\n\n\n<li>NPM version 7.10.0<\/li>\n\n\n\n<li>NPX&nbsp;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 7: Update the Code in Tailwind config.js File<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now go to the tailwind folder&nbsp;<strong>app\/design\/frontend\/Hyva\/hyva_child\/web\/tailwind<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And update the below code: <strong>app\/design\/frontend\/Hyva\/hyva_child\/web\/tailwind\/tailwind.config.js<\/strong><\/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=\"\">content: [\n     \/\/ this theme's phtml and layout XML files\n    '..\/..\/**\/*.phtml',\n    '..\/..\/*\/layout\/*.xml',\n    '..\/..\/*\/page_layout\/override\/base\/*.xml',\n    \/\/ parent theme in Vendor (if this is a child-theme)\n    '..\/..\/..\/..\/..\/..\/..\/vendor\/hyva-themes\/magento2-default-theme\/**\/*.phtml',\n    '..\/..\/..\/..\/..\/..\/..\/vendor\/hyva-themes\/magento2-default-theme\/*\/layout\/*.xml',\n    '..\/..\/..\/..\/..\/..\/..\/vendor\/hyva-themes\/magento2-default-theme\/*\/page_layout\/override\/base\/*.xml',\n    \/\/ app\/code phtml files (if need tailwind classes from app\/code modules),\n  ]<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 8: Add Necessary Dependencies&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now, head to the Tailwind folder and add the necessary dependencies:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cd app\/design\/frontend\/Hyva\/hyva_child\/web\/tailwind<\/li>\n\n\n\n<li>npm install<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">After this, you will see a folder named <strong>node_modules<\/strong> created.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 9: Add Custom Class<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use the custom classes in your CSS files:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">app\/design\/frontend\/Hyva\/hyva_child\/web\/tailwind\/theme\/components\/page.css<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If needed, run the other necessary CSS. To generate other CSS, you may run<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>npm run watch or<\/li>\n\n\n\n<li>npm run build-prod command<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You can also run the npm command using a prefix from the root directory:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm --prefix app\/design\/frontend\/Hyva\/hyva_child\/web\/tailwind run build-prod<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 10: Run Magento Commands<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Lastely run these commands:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php bin\/magento se:up\nphp bin\/magento s:d:c\nphp bin\/magento s:s:d -f\nphp bin\/magento c:c\nphp bin\/magento c:f<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Once the Hyv\u00e4 child theme is configured, you can check navigating to Content &gt; Design &gt; Configuration on the admin dashboard and set your child theme as \u2018Main Website Store\u2019.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once applied, you can check the implemented child theme visiting the frontend of your store.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fully Leverage on Hyv\u00e4 Child Theme Capabilities<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Amplify your customer experience by implementing Hyv\u00e4 themes.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Since these themes are easy to modify, they are recommended by experienced Magento experts in the domain.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you need technical support to fully leverage the capabilities of Hyv\u00e4 child theme, we are ready to help you. We offer end-to-end&nbsp;<a href=\"https:\/\/meetanshi.com\/hyva-theme-development-service\">Magento 2 Hyv\u00e4 Development Services<\/a>&nbsp;to benefit you to help your store reach new heights and perform at its best.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hyv\u00e4 themes have recently gained popularity among Magento 2 store owners. They are known for their simplicity and excellent performance. Further, the ease of customization&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34,5869],"tags":[],"class_list":["post-3586","post","type-post","status-publish","format-standard","hentry","category-magento","category-hyva-themes"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3586","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=3586"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3586\/revisions"}],"predecessor-version":[{"id":9278,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3586\/revisions\/9278"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=3586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=3586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=3586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}