{"id":70769,"date":"2026-03-30T00:00:32","date_gmt":"2026-03-30T00:00:32","guid":{"rendered":"https:\/\/www.icreativetechnologies.com\/?p=70769"},"modified":"2026-06-16T09:34:21","modified_gmt":"2026-06-16T09:34:21","slug":"how-to-create-your-own-theme-in-hyva-theme","status":"publish","type":"post","link":"https:\/\/www.icreativetechnologies.com\/de\/how-to-create-your-own-theme-in-hyva-theme\/","title":{"rendered":"Step-by-Step Guide to Create Your Own Hyv\u00e4 Theme in Magento 2 (Full Tutorial 2026)"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"How\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Introduction to Hyv\u00e4 Theme Development

<\/h2>

According to the built with trend<\/a> Hyv\u00e4 reduces JavaScript bundle size by up to 90%+<\/strong> compared to Luma-based themes.<\/p>

If you have been working with Magento 2 for any amount of time, you already know how painful the default frontend can be. Slow page loads, bloated JavaScript, and Core Web Vitals scores that make you helpless. This is exactly the problem Hyv\u00e4 Theme was built to fix, and it has become the go-to frontend solution for serious Magento developers around the world.<\/p>

In this guide, you will get a complete, practical walkthrough of how to create your own custom Hyv\u00e4 Theme in Magento 2 from scratch, including file structure, configuration, Tailwind CSS setup, deployment, and troubleshooting.<\/p>

What is Hyv\u00e4 Theme in Magento 2?

<\/h2>

\"Magento<\/p>

Hyv\u00e4 Theme<\/a> is a modern frontend framework built specifically for Magento 2. Instead of relying on the traditional Magento frontend stack that is loaded with RequireJS, KnockoutJS, and heavy CSS libraries, Hyv\u00e4 strips all of that away and replaces it with two powerful and lightweight tools: Tailwind CSS for utility-based styling and Alpine.js for reactive interactivity.<\/p>

The result is a Magento storefront that loads dramatically faster, consumes less bandwidth, and delivers a much cleaner developer experience. Hyv\u00e4 is not just a theme, it is a completely different way of thinking about Magento frontend development.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t
\n \n\n
\n
\n

\n Hyv\u00e4 stores load 2\u20135\u00d7 faster than Luma-based stores. <\/h3>\n \t\t \t

Is your Magento store not lightning-fast yet? Let\u2019s grow your site with Hyv\u00e4 for unmatched speed and performance.<\/p>\n

\n
\n \n Get Started <\/a>\n <\/div>\n <\/div>\n <\/div>\n \n \n <\/div>\n <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Benefits of Using Hyv\u00e4 for Custom Theme Development<\/h3>

\u00a0<\/p>

  • Faster performance with reduced JavaScript and page size<\/li>
  • Improved Core Web Vitals scores<\/li>
  • Simplified development using Tailwind CSS and Alpine.js<\/li>
  • Easy customization with Magento child theme structure<\/li>
  • Growing ecosystem with active support and updates<\/li><\/ul>

    Why choose Hyv\u00e4 over Luma in Magento 2?<\/h3>

    Hyv\u00e4 is better than Luma because it removes unnecessary JavaScript, improves performance, and simplifies Magento 2 frontend development.<\/p>

    Here are the key reasons Magento store owners choose the Hyv\u00e4 Theme over the default Magento Luma theme.<\/p>

    • Loads pages significantly faster with reduced dependencies<\/li>
    • Improves Core Web Vitals (LCP, TTI, CLS)<\/li>
    • Delivers better user experience with faster interactions<\/li>
    • Simplifies development by eliminating RequireJS complexity<\/li>
    • Uses modern technologies like Tailwind CSS and Alpine.js<\/li>
    • Reduces debugging time and improves code readability<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
      \n\t\t
      \n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t

      Prerequisites for Creating a Hyv\u00e4 Theme in Magento 2<\/h2>


      Before starting, make sure your Magento environment meets these requirements.<\/p>

      Magento Version Compatibility<\/h3>


      The magento hyva theme supports Magento Open Source and Adobe Commerce. The current compatibility matrix is:<\/p>

      Magento Version Compatibility<\/h3>


      The Hyv\u00e4 Theme supports both Magento Open Source and Adobe Commerce. The recommended versions include:<\/p>

      • Magento 2.4.4-p9<\/li>
      • Magento 2.4.5-p8<\/li>
      • Magento 2.4.6-p7<\/li>
      • Magento 2.4.7-p1 or higher<\/li><\/ul>

        Always verify the latest compatibility updates from the official Hyv\u00e4 documentation before proceeding.<\/p>

        System Requirements

        <\/h3>
        • PHP: 7.4, 8.1, 8.2, 8.3, or 8.4<\/li>
        • Composer: Version 2.x<\/li>
        • Node.js: 16+ (required for Tailwind CSS compilation)<\/li>
        • NPM or Yarn for frontend build tools<\/li><\/ul>

          Hyv\u00e4 License & Access

          <\/h3>
          • A valid Hyv\u00e4 license is required<\/li>
          • A Hyv\u00e4 Packagist key<\/strong> is needed to install the theme<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
            \n\t\t\t\t
            \n\t\t\t\t\t\t\t\t\t

            Install Hyv\u00e4 Theme in Magento 2

            <\/h2>

            \"Install<\/p>

            To install the base Hyv\u00e4 Theme in Magento 2, you first need to add your Packagist authentication key, register the Hyv\u00e4 private repository with Composer, and then require the default theme package.<\/p>

            Start by running this command to add your authentication credentials:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

            \n\t\t\t\t
            \n\t\t\t\t\t\t\t
            \n\t\t\t
            \n\t\t\t\t\n\t\t\t\t\tcomposer config --auth http-basic.hyva-themes.repo.packagist.com token yourLicenseAuthenticationKey<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5465c9d elementor-widget elementor-widget-text-editor\" data-id=\"5465c9d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Then add the Hyv\u00e4 Composer repository:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1ed9558 e-con-full e-flex e-con e-child\" data-id=\"1ed9558\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c234896 blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"c234896\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>composer config repositories.private-packagist composer https:\/\/hyva-themes.repo.packagist.com\/yourProjectName\/<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f41de3 elementor-widget elementor-widget-text-editor\" data-id=\"9f41de3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now install the default Hyv\u00e4 theme:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-83b7db3 blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"83b7db3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>composer require hyva-themes\/magento2-default-theme<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f4df6ae e-flex e-con-boxed e-con e-parent\" data-id=\"f4df6ae\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f858b76 elementor-widget elementor-widget-text-editor\" data-id=\"f858b76\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you are looking for how to install the Hyv\u00e4 Theme in Magento 2 step by step, explore this guide: <a href=\"https:\/\/www.icreativetechnologies.com\/install-hyva-theme-magento-2-complete-guide\/\">How to Install Hyv\u00e4 Themes in Magento 2<\/a><\/p><p>Now install the default Hyv\u00e4 theme:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-026651b e-flex e-con-boxed e-con e-parent\" data-id=\"026651b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-974fb42 blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"974fb42\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language- \">\n\t\t\t\t<code readonly=\"true\" class=\"language-\">\n\t\t\t\t\t<xmp>composer require hyva-themes\/magento2-default-theme\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6741c79 e-flex e-con-boxed e-con e-parent\" data-id=\"6741c79\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-646fbdc elementor-widget elementor-widget-text-editor\" data-id=\"646fbdc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>After the package installs, run the Magento setup upgrade:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d4fd1af e-flex e-con-boxed e-con e-parent\" data-id=\"d4fd1af\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b5c0a9a blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"b5c0a9a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>bin\/magento setup:upgrade<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c47f7bb elementor-widget elementor-widget-text-editor\" data-id=\"c47f7bb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Once the installation is complete, go to your Magento Admin Panel. Navigate to<strong> Content \u2192 Design \u2192 Configuration<\/strong>, and activate the Hyv\u00e4 default theme for your store view.<\/p><p>With the base theme active, you are now ready to create your own custom child theme on top of it.<\/p><h3 style=\"font-size: 20px;\">Understanding Hyv\u00e4 Theme Structure<br \/><br \/><\/h3><p>Before creating any files, it is important to understand how the Hyv\u00e4 Theme is structured. This foundational knowledge will help reduce debugging time and improve development efficiency.<\/p><h3 style=\"font-size: 20px;\">Default Hyv\u00e4 Theme Architecture<br \/><br \/><\/h3><p>The Hyv\u00e4 default theme is located in the vendor directory at the following path:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-699130f blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"699130f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language- \">\n\t\t\t\t<code readonly=\"true\" class=\"language-\">\n\t\t\t\t\t<xmp>vendor\/hyva-themes\/magento2-default-theme\/<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-21620d3 e-flex e-con-boxed e-con e-parent\" data-id=\"21620d3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-19a1077 elementor-widget elementor-widget-text-editor\" data-id=\"19a1077\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This directory follows the standard Magento theme structure with additional Hyv\u00e4-specific enhancements. The most critical subdirectory is the web folder, which contains:<\/p><ul><li data-section-id=\"1vqlwqn\" data-start=\"978\" data-end=\"1008\">Tailwind CSS configuration<\/li><li data-section-id=\"nm4t29\" data-start=\"1009\" data-end=\"1032\">Compiled CSS output<\/li><li data-section-id=\"13ee393\" data-start=\"1033\" data-end=\"1060\">Alpine.js-related files<\/li><\/ul><p>Template files and layout XML follow Magento\u2019s default conventions. If you are familiar with Magento theming, you can work with Hyv\u00e4 without starting from scratch.<\/p><h3 style=\"font-size: 20px;\">Parent and Child Theme Concept<br \/><br \/><\/h3><p>Hyv\u00e4 uses Magento\u2019s native parent-child theme inheritance model. When you create a child theme and set Hyva\/default as the parent, Magento automatically falls back to the parent theme for any files not overridden in the child theme.<\/p><p>This approach ensures:<\/p><ul><li data-section-id=\"ddkmcc\" data-start=\"1532\" data-end=\"1560\">Minimal code duplication<\/li><li data-section-id=\"gdg2yk\" data-start=\"1561\" data-end=\"1583\">Easier maintenance<\/li><li data-section-id=\"mxygbk\" data-start=\"1584\" data-end=\"1640\">Seamless updates when new Hyv\u00e4 versions are released<\/li><\/ul><h3 style=\"font-size: 20px;\">Key Directories and Files Explained<br \/><br \/><\/h3><p>The following files are essential when creating a custom Hyv\u00e4 theme:<\/p><ul><li data-section-id=\"pr2k1u\" data-start=\"1870\" data-end=\"1929\"><strong data-start=\"1872\" data-end=\"1885\">theme.xml<\/strong> \u2013 Defines the theme name and parent theme<br \/><br \/><\/li><li data-section-id=\"1hqxsxz\" data-start=\"1930\" data-end=\"1989\"><strong data-start=\"1932\" data-end=\"1952\">registration.php<\/strong> \u2013 Registers the theme with Magento<br \/><br \/><\/li><li data-section-id=\"1l7f4br\" data-start=\"1990\" data-end=\"2054\"><strong data-start=\"1992\" data-end=\"2009\">composer.json<\/strong> \u2013 Declares the theme as a Composer package<br \/><br \/><\/li><li data-section-id=\"rstap6\" data-start=\"2055\" data-end=\"2145\"><strong data-start=\"2057\" data-end=\"2065\">web\/<\/strong> \u2013 Contains Tailwind CSS configuration, compiled styles, and custom JavaScript<br \/><br \/><\/li><li data-section-id=\"qvjart\" data-start=\"2146\" data-end=\"2241\"><strong data-start=\"2148\" data-end=\"2174\">templates &amp; layout XML<\/strong> \u2013 Follow Magento\u2019s standard module-based structure for overrides<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2267091 e-flex e-con-boxed e-con e-parent\" data-id=\"2267091\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c32846a elementor-widget elementor-widget-text-editor\" data-id=\"c32846a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2 style=\"font-size: 24px;\">Step-by-Step Guide to Create Custom Hyv\u00e4 Theme in Magento 2<br \/><br \/><\/h2><p>Now let\u2019s create a custom child theme. In this example, we will create a theme named hyva_child under the vendor namespace iCreative . You can replace these names with your own.<\/p><h2>Step 1: Create a New Theme<br \/><br \/><\/h2><p>Create the following directory inside your Magento installation:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ccc718b e-flex e-con-boxed e-con e-parent\" data-id=\"ccc718b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0269018 blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"0269018\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>app\/design\/frontend\/icreative\/hyva_child\/<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8105987 e-flex e-con-boxed e-con e-parent\" data-id=\"8105987\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8db8aee elementor-widget elementor-widget-text-editor\" data-id=\"8db8aee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This follows Magento\u2019s standard theme structure:<\/p><p><em><strong>app\/design\/frontend\/VendorName\/ThemeName<\/strong><\/em><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-825c8f3 e-flex e-con-boxed e-con e-parent\" data-id=\"825c8f3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-279a575 custom-pro-tip elementor-widget elementor-widget-text-editor\" data-id=\"279a575\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Pro tip for production stores:<\/b><span style=\"font-weight: 400;\"> Always run <\/span><strong><span style=\"color: #00ccff;\">setup:static-content:deploy<\/span><\/strong><span style=\"font-weight: 400;\"> with your specific locale flags to avoid deploying unnecessary locales. For example: <\/span><em><span style=\"font-weight: 400;\">php bin\/magento setup:static-content:deploy en_US -f<\/span><\/em><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-94dda10 e-flex e-con-boxed e-con e-parent\" data-id=\"94dda10\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd818c0 elementor-widget elementor-widget-text-editor\" data-id=\"cd818c0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 style=\"font-size: 20px;\">Step 2: Define Theme Registration Files<br \/><br \/><\/h3><p>Every Magento theme requires two essential files:<\/p><ul><li data-section-id=\"1jqb0r2\" data-start=\"2845\" data-end=\"2862\">theme.xml<\/li><li data-section-id=\"9gk1en\" data-start=\"2863\" data-end=\"2887\">registration.php<\/li><\/ul><p>These files inform Magento about the existence and configuration of your custom theme.<\/p><h3 style=\"font-size: 20px;\">Step 3: Configure theme.xml and registration.php<br \/><br \/><\/h3><p>Create the theme.xml file at the following location:<\/p><p>This file defines your theme and links it to the Hyv\u00e4 parent theme.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0dc54d3 e-flex e-con-boxed e-con e-parent\" data-id=\"0dc54d3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7875665 blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"7875665\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>app\/design\/frontend\/iCreative\/hyva_child\/theme.xml<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9ebe7cc e-flex e-con-boxed e-con e-parent\" data-id=\"9ebe7cc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7e7270d elementor-widget elementor-widget-text-editor\" data-id=\"7e7270d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 style=\"font-size: 20px;\">Theme.xml<br \/><br \/><\/h3><p>Create this file at:<br \/>app\/design\/frontend\/iCreative\/hyva_child\/theme.xml<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9790515 e-flex e-con-boxed e-con e-parent\" data-id=\"9790515\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-276b37d blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"276b37d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-xml \">\n\t\t\t\t<code readonly=\"true\" class=\"language-xml\">\n\t\t\t\t\t<xmp><?xml version=\"1.0\"?>\n<theme xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Config\/etc\/theme.xsd\">\n    <title>ICreative Hyva ChildTheme<\/title>\n    <parent>Hyva\/default<\/parent>\n<\/theme><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4f4932e e-flex e-con-boxed e-con e-parent\" data-id=\"4f4932e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cb3d86c elementor-widget elementor-widget-text-editor\" data-id=\"cb3d86c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 style=\"font-size: 20px;\">Registration.php<br \/><br \/><\/h3><p>Create this file at:<br \/>app\/design\/frontend\/iCreative \/hyva_child\/registration.php<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b4102bc e-flex e-con-boxed e-con e-parent\" data-id=\"b4102bc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0f187a2 blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"0f187a2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php \">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp><?php\nuse Magento\\Framework\\Component\\ComponentRegistrar;\n\nComponentRegistrar::register(\n    ComponentRegistrar::THEME,\n    'frontend\/iCreative\/hyva_child',\n    __DIR__\n);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ab9de93 e-flex e-con-boxed e-con e-parent\" data-id=\"ab9de93\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a47c524 elementor-widget elementor-widget-text-editor\" data-id=\"a47c524\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>After Creating These Files<\/p><p>Run the following Magento commands:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e156758 e-flex e-con-boxed e-con e-parent\" data-id=\"e156758\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6d6528d blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"6d6528d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php \">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>php bin\/magento setup:upgrade\nphp bin\/magento setup:static-content:deploy -f\nphp bin\/magento cache:flush<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7f252a3 e-flex e-con-boxed e-con e-parent\" data-id=\"7f252a3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7fdf65a elementor-widget elementor-widget-text-editor\" data-id=\"7fdf65a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Then activate your theme from:<\/p><p><em><strong>Admin \u2192 Content \u2192 Design \u2192 Configuration<\/strong><\/em><\/p><h3 style=\"font-size: 20px;\">Registration.php<br \/><br \/><\/h3><p>To properly structure your custom theme as a Composer package (recommended for scalability and deployment workflows), create a composer.json file inside your theme directory.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c2b2db1 e-flex e-con-boxed e-con e-parent\" data-id=\"c2b2db1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9819bce blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"9819bce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html \">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>{\n  \"name\": \"iCreative\/hyva-child-theme\",\n  \"description\": \"Custom Hyva child theme for Magento 2\",\n  \"type\": \"magento2-theme\",\n  \"require\": {\n    \"php\": \">=7.4\"\n  },\n  \"autoload\": {\n    \"files\": [\n      \"registration.php\"\n    ]\n  },\n  \"extra\": {\n    \"map\": [\n      [\n        \"*\",\n        \"iCreative\/hyva_child\"\n      ]\n    ]\n  }\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a6f3e54 e-flex e-con-boxed e-con e-parent\" data-id=\"a6f3e54\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-722660b elementor-widget elementor-widget-text-editor\" data-id=\"722660b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 style=\"font-size: 20px;\">Step 4: Set Parent Theme (Hyva\/default)<br \/><br \/><\/h3><p>The parent theme is already declared in theme.xml with the line <em><strong>&lt;parent&gt;Hyva\/default&lt;\/parent&gt;<\/strong><\/em>. This is what links your child theme to the Hyv\u00e4 base theme.<\/p><p>One important thing to note here: the parent identifier must be exactly Hyva\/default with that specific casing. Using incorrect casing is a common mistake that causes the theme to not load properly.<\/p><p>Now copy the web folder from the Hyv\u00e4 default theme into your child theme. This is required for Tailwind CSS compilation to work correctly:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-abf255c e-flex e-con-boxed e-con e-parent\" data-id=\"abf255c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-40f88a6 blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"40f88a6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>cp -r vendor\/hyva-themes\/magento2-default-theme\/web\/ app\/design\/frontend\/iCreative\/hyva_child\/web\/<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-81fa29a elementor-widget elementor-widget-text-editor\" data-id=\"81fa29a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 style=\"font-size: 20px;\">Step 5: Run Magento Setup Commands<br \/><br \/><\/h3><p>With all theme files in place, run the following commands to register the theme and deploy assets:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6be2b21 e-flex e-con-boxed e-con e-parent\" data-id=\"6be2b21\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f62d8dd blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"f62d8dd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>bin\/magento setup:upgrade\nbin\/magento cache:clean\nbin\/magento cache:flush\n```\n\nAfter these commands complete, go to Content, then Design, then Configuration in your Magento Admin Panel, select your new Hyv\u00e4 child theme from the dropdown, and save the configuration.\n\n---\n\n## Customizing Your Hyv\u00e4 Theme\n\nWith the child theme active, you can now start customizing it. Hyv\u00e4 follows standard Magento conventions for template and layout overrides, so if you have worked with Luma-based themes before, most of this will feel familiar.\n\n### Modifying Layout XML Files\n\nTo override a layout XML file from the Hyv\u00e4 default theme or from any Magento module, create the corresponding file in your child theme under the same path it would appear in the module.\n\nFor example, to override the catalog product view layout, create:\n```\napp\/design\/frontend\/iCreative\/hyva_child\/Magento_Catalog\/layout\/catalog_product_view.xml\n```\n\nYour overrides will be merged on top of the parent theme and module layout XML files during the layout building process.\n\n### Customizing Templates (.phtml)\n\nTemplate overrides work the same way. To override a .phtml file from the Hyv\u00e4 theme or from a Magento module, mirror the file path inside your child theme directory.\n\nFor example, to override the product name template:\n```\napp\/design\/frontend\/iCreative\/hyva_child\/Magento_Catalog\/templates\/product\/view\/name.phtml\n```\n\nMagento will use your version of the file instead of the parent theme version. Only copy files you actually need to change. Keeping unnecessary copies of template files makes upgrades more difficult.\n\n### Working with Tailwind CSS in Hyv\u00e4\n\nThis is where Hyv\u00e4 Theme development differs from standard Magento theming. Hyv\u00e4 uses Tailwind CSS, which means styles are generated at compile time based on the classes found in your template files.\n\nOpen the Tailwind configuration file in your child theme:\n```\napp\/design\/frontend\/iCreative\/hyva_child\/web\/tailwind\/tailwind.config.js<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f93e644 e-flex e-con-boxed e-con e-parent\" data-id=\"f93e644\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9edfb32 elementor-widget elementor-widget-text-editor\" data-id=\"9edfb32\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In the content or purge section, add the path to the parent theme templates so Tailwind scans them while generating CSS:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-98e82fd blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"98e82fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>content: [\n    '..\/..\/**\/*.phtml',\n    '..\/..\/*\/layout\/*.xml',\n    '..\/..\/..\/..\/..\/..\/..\/vendor\/hyva-themes\/magento2-default-theme\/**\/*.phtml',\n    '..\/..\/..\/..\/..\/..\/..\/vendor\/hyva-themes\/magento2-default-theme\/*\/layout\/*.xml',\n]<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d416439 e-flex e-con-boxed e-con e-parent\" data-id=\"d416439\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-da1a07f elementor-widget elementor-widget-text-editor\" data-id=\"da1a07f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This ensures that Tailwind CSS classes used in parent theme templates are not stripped out during the purge step.<\/p><p>To install Tailwind dependencies, navigate to the tailwind directory and run:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d957836 e-flex e-con-boxed e-con e-parent\" data-id=\"d957836\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-392962a blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"392962a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>npm install<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-64ce2b7 e-flex e-con-boxed e-con e-parent\" data-id=\"64ce2b7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5253589 elementor-widget elementor-widget-text-editor\" data-id=\"5253589\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>During development, use watch mode to compile styles automatically as you make changes:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-032f94c blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"032f94c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>npm run watch<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ebdb458 elementor-widget elementor-widget-text-editor\" data-id=\"ebdb458\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For production, build optimized and minified styles:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5403aee blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"5403aee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>npm run build-prod<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3bf236c elementor-widget elementor-widget-text-editor\" data-id=\"3bf236c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 style=\"font-size: 20px;\">Adding Custom Styles and Scripts<br \/><br \/><\/h3><p>You can add custom CSS beyond what Tailwind generates by creating a styles directory in your web folder and including it through a layout XML file or directly in the default_head_blocks.xml override.<\/p><p>For custom JavaScript, Hyv\u00e4 uses Alpine.js for component-level interactivity. You can define custom Alpine.js components directly in your .phtml templates using inline script tags, or load them as separate JavaScript files through layout XML.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-112f64f e-flex e-con-boxed e-con e-parent\" data-id=\"112f64f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bb0a1df elementor-widget elementor-widget-text-editor\" data-id=\"bb0a1df\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2 style=\"font-size: 24px;\">Why Hyv\u00e4 Theme is Best for Magento 2 Speed Performance Optimization?<br \/><br \/><\/h2><p>Hyv\u00e4&#8217;s performance advantage is not accidental. It is the direct result of removing the frontend dependencies that have historically made Magento slow.<\/p><p>Why Hyv\u00e4 is Faster Than Luma?<\/p><p>Luma loads RequireJS, KnockoutJS, jQuery UI, and several other libraries just to render a basic storefront page. These JavaScript files are large, blocking, and often completely unnecessary for the specific page being viewed.<\/p><p>Hyv\u00e4 replaces all of this with Alpine.js, which is a fraction of the size of KnockoutJS. Tailwind CSS generates only the styles that are actually used in your templates. The result is dramatically smaller page payloads, fewer render-blocking resources, and much faster Time to Interactive scores.<\/p><h3 style=\"font-size: 20px;\">Best Practices for Hyva Theme Speed Optimization<br \/><br \/><\/h3><p>To fully leverage the performance capabilities of the Hyv\u00e4 Theme in Magento 2, it is essential to follow structured optimization practices aligned with modern frontend architecture and Core Web Vitals.<\/p><p>Key Optimization Practices:<\/p><ul><li><strong>Run production builds before deployment<\/strong> &#8211; Always execute npm run build-prod prior to going live. This activates Tailwind CSS purge, eliminating unused utility classes and significantly reducing the final CSS bundle size.<br \/><br \/><\/li><li><strong>Limit third-party scripts<\/strong> &#8211;<br \/>Avoid injecting unnecessary external scripts through layout XML. Each additional script increases network requests, blocks rendering, and negatively impacts performance metrics.<br \/><br \/><\/li><li><strong>Implement lazy loading for media <\/strong>&#8211; Use the loading=&#8221;lazy&#8221; attribute for product and content images below the fold. This reduces initial page load time and improves Largest Contentful Paint (LCP).<br \/><br \/><\/li><li><strong>Optimize Alpine.js usage<\/strong> &#8211; Keep Alpine.js components modular and lightweight. Avoid deeply nested reactivity structures unless required, as they can introduce unnecessary complexity and processing overhead.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-69d0533 e-flex e-con-boxed e-con e-parent\" data-id=\"69d0533\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b363548 elementor-widget elementor-widget-text-editor\" data-id=\"b363548\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 style=\"font-size: 20px;\">Testing and Deploying Your Custom Hyva Theme<br \/><br \/><\/h3><p><strong><span style=\"color: #ffffff;\">Enabling Developer Mode<\/span><\/strong><\/p><p>Before testing, switch Magento to developer mode. This disables caching of compiled files and makes debugging significantly easier:<\/p><p><em>bin\/magento deploy:mode:set developer<\/em><\/p><p>In developer mode, Magento regenerates static files on each page request, so changes to templates and layout XML are reflected immediately without needing to re-deploy static content.<\/p><p><strong><span style=\"color: #ffffff;\">Static Content Deployment<br \/><\/span><\/strong><\/p><p>When you are ready to move to production or staging, take a backup of your pub\/static directory first. Then clean the existing static files and deploy fresh:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-70d1cbd e-flex e-con-boxed e-con e-parent\" data-id=\"70d1cbd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8b02a26 blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"8b02a26\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>rm -rf pub\/static\/frontend\/\nphp bin\/magento setup:static-content:deploy -f<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f7d3e9d e-flex e-con-boxed e-con e-parent\" data-id=\"f7d3e9d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-da472ee elementor-widget elementor-widget-text-editor\" data-id=\"da472ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For multilingual stores, specify language codes:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4c56098 e-flex e-con-boxed e-con e-parent\" data-id=\"4c56098\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c457402 blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"c457402\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>php bin\/magento setup:static-content:deploy en_US en_GB -f<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ce88f97 e-flex e-con-boxed e-con e-parent\" data-id=\"ce88f97\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ff6f900 elementor-widget elementor-widget-text-editor\" data-id=\"ff6f900\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Before deploying static content, make sure you have run npm run build-prod inside your child theme&#8217;s tailwind directory. The compiled CSS file at <em>web\/tailwind\/css\/output.css<\/em> must exist before static content deployment.<\/p><p>Cache Management and Testing:<\/p><p>After deployment, flush all caches:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-155f764 e-flex e-con-boxed e-con e-parent\" data-id=\"155f764\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8324dc3 blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"8324dc3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>bin\/magento cache:clean\nbin\/magento cache:flush<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a9e964f e-flex e-con-boxed e-con e-parent\" data-id=\"a9e964f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-557cc2d elementor-widget elementor-widget-text-editor\" data-id=\"557cc2d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Test your theme across all key pages: homepage, category pages, product detail pages, cart, and checkout. Pay specific attention to how Alpine.js components behave, since most Hyv\u00e4 interactivity depends on them loading correctly.<\/p><p>Use Chrome DevTools to verify that no legacy JavaScript libraries like RequireJS or KnockoutJS are loading on your Hyv\u00e4 pages. If they are, an extension is likely injecting them.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-65452cb e-flex e-con-boxed e-con e-parent\" data-id=\"65452cb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a3a249b elementor-widget elementor-widget-text-editor\" data-id=\"a3a249b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 style=\"font-size: 20px;\">Hyv\u00e4 Theme Troubleshooting Guide (Fix Common Magento 2 Issues)<br \/><br \/><\/h3><ol><li><strong>Theme Not Showing Issue<\/strong><\/li><\/ol><p>Solution &#8211; If your child theme does not appear in the Design Configuration dropdown, the most likely cause is a missing or incorrectly formatted registration.php file. Double-check the theme path string inside<\/p><p>ComponentRegistrar::register matches your actual directory path exactly.<\/p><p>Also verify that you have run bin\/magento setup:upgrade after adding the theme files. Magento needs to scan and register new theme components during setup.<\/p><p>2) Static Files Not Loading<\/p><p>If CSS or JavaScript is not loading correctly after deployment, check the following things in order.<\/p><p>First, confirm that output.css exists at app\/design\/frontend\/iCreative\/hyva_child\/web\/tailwind\/css\/output.css. If this file is missing, Tailwind has not been compiled. Run npm install followed by npm run build-prod inside the tailwind directory.<\/p><p>Second, verify that pub\/static files were actually deployed for your theme and locale. Check pub\/static\/frontend\/iCreative\/hyva_child\/ for your compiled assets.<\/p><p>Third, check file permissions. Static files in pub\/static need to be readable by the web server.<\/p><p>3) Cache and Compilation Errors<\/p><p>If you are seeing errors about missing CSS or layout issues after making template changes, clear compiled code and regenerate:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-72d1860 e-flex e-con-boxed e-con e-parent\" data-id=\"72d1860\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8418bad blog-code-block elementor-widget elementor-widget-code-highlight\" data-id=\"8418bad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>bin\/magento cache:clean\nbin\/magento cache:flush\nrm -rf generated\/code\nbin\/magento setup:di:compile<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7daab57 e-flex e-con-boxed e-con e-parent\" data-id=\"7daab57\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3f22b98 elementor-widget elementor-widget-text-editor\" data-id=\"3f22b98\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 style=\"font-size: 20px;\">Hyv\u00e4 Theme Development Best Practices for Magento 2<br \/><br \/><\/h3><ol><li>Maintain Clean Code Structure\u00a0<\/li><\/ol><p>Only include files in your child theme that you actually need to override. Every file you copy from the parent theme becomes a file you are responsible for maintaining. When Hyv\u00e4 releases updates, files you have copied locally will not receive those updates automatically.<\/p><p>2. Follow Magento Coding Standards<\/p><p>Hyv\u00e4 templates are still Magento .phtml files, which means the same escaping, translation, and coding standards apply. Always use $escaper-&gt;escapeHtml() for output escaping. Use $block-&gt;trans() or __() for translatable strings. Keep business logic out of templates.<\/p><p>3. Optimize for SEO and Core Web Vitals<\/p><p>Hyv\u00e4 gives you a strong head start on Core Web Vitals, but there are additional things you can do to push scores further.<\/p><p>Preload your primary fonts using link <strong>rel=&#8221;preload&#8221;<\/strong> in the theme head. Avoid adding large hero images above the fold without proper sizing and compression. Use width and height attributes on all img tags to eliminate Cumulative Layout Shift. Minimize the number of custom Alpine.js components that initialize on page load if they are not immediately needed.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ea1a062 e-flex e-con-boxed e-con e-parent\" data-id=\"ea1a062\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-abd2c22 elementor-widget elementor-widget-text-editor\" data-id=\"abd2c22\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2 style=\"font-size: 24px;\">iCreative Technologies \u2014 Leading Hyv\u00e4 Theme Agency in USA &amp; Germany<br \/><br \/><\/h2><p>iCreative Technologies is a leading <strong><a href=\"https:\/\/www.icreativetechnologies.com\/hyva-theme-development-services\/\">Hyv\u00e4 Theme development agency<\/a><\/strong>, delivering premium Hyv\u00e4 Theme services in the USA and across Europe, including Germany, the Netherlands, France, and Italy.<\/p><p>With a team of <a href=\"https:\/\/www.icreativetechnologies.com\/hire-magento-developer\/\">certified Hyv\u00e4 developers<\/a>, the company specializes in building high-performance, lightning-fast Magento 2 storefronts powered by the Hyv\u00e4 Theme. Its development approach focuses on speed optimization, clean architecture, and scalable frontend solutions tailored for modern eCommerce.<\/p><p>We have a proven decade of experience as a leading Hyv\u00e4 theme development company.<\/p><p>Looking to migrate to Hyv\u00e4 Theme or need a custom Hyv\u00e4 store development partner? Let\u2019s get started with a <strong>free 30-minute strategy call.<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4928d81 e-flex e-con-boxed e-con e-parent\" data-id=\"4928d81\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4344ef8 blog-detail-cta-button elementor-widget elementor-widget-button\" data-id=\"4344ef8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/www.icreativetechnologies.com\/contact-us\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Contact Now<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a36cfab elementor-widget elementor-widget-text-editor\" data-id=\"a36cfab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2 style=\"font-size: 24px;\">FAQs\u00a0 &#8211; Create Hyva Theme<\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e5da1e6 e-flex e-con-boxed e-con e-parent\" data-id=\"e5da1e6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6317107 elementor-widget elementor-widget-elementskit-accordion\" data-id=\"6317107\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementskit-accordion.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" >\n        <div class=\"elementskit-accordion accoedion-primary\" id=\"accordion-6aa7aad1d05ac\">\n\n            \n                <div class=\"elementskit-card \">\n                    <div class=\"elementskit-card-header\" id=\"primaryHeading-0-6317107\">\n                        <a href=\"#collapse-68ce2fd6aa7aad1d05ac\" class=\"ekit-accordion--toggler elementskit-btn-link collapsed\" data-ekit-toggle=\"collapse\" data-target=\"#Collapse-68ce2fd6aa7aad1d05ac\" aria-expanded=\"false\" aria-controls=\"Collapse-68ce2fd6aa7aad1d05ac\">\n                            \n                            <span class=\"ekit-accordion-title\">What is Hyv\u00e4 Theme in Magento 2?<\/span>\n\n                            \n                                <div class=\"ekit_accordion_icon_group\">\n                                    <div class=\"ekit_accordion_normal_icon\">\n                                        <!-- Normal Icon -->\n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-down-arrow1\"><\/i>                                    <\/div>\n\n                                    <div class=\"ekit_accordion_active_icon\">\n                                        <!-- Active Icon -->\n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-up-arrow\"><\/i>                                    <\/div>\n                                <\/div>\n\n                            \n                                                    <\/a>\n                    <\/div>\n\n                    <div id=\"Collapse-68ce2fd6aa7aad1d05ac\" class=\" collapse\" aria-labelledby=\"primaryHeading-0-6317107\" data-parent=\"#accordion-6aa7aad1d05ac\">\n\n                        <div class=\"elementskit-card-body ekit-accordion--content\">\n                            <p>The <span class=\"hover:entity-accent entity-underline inline cursor-pointer align-baseline\"><span class=\"whitespace-normal\">Hyv\u00e4 Theme<\/span><\/span> is a modern frontend solution for Magento 2 that replaces Luma with a lightweight stack using Tailwind CSS and Alpine.js. It improves performance, simplifies development, and enhances user experience.<\/p>                        <\/div>\n\n                    <\/div>\n\n                <\/div><!-- .elementskit-card END -->\n\n                \n                <div class=\"elementskit-card \">\n                    <div class=\"elementskit-card-header\" id=\"primaryHeading-1-6317107\">\n                        <a href=\"#collapse-b44ab056aa7aad1d05ac\" class=\"ekit-accordion--toggler elementskit-btn-link collapsed\" data-ekit-toggle=\"collapse\" data-target=\"#Collapse-b44ab056aa7aad1d05ac\" aria-expanded=\"false\" aria-controls=\"Collapse-b44ab056aa7aad1d05ac\">\n                            \n                            <span class=\"ekit-accordion-title\">How do you create a custom Hyv\u00e4 theme in Magento 2?<\/span>\n\n                            \n                                <div class=\"ekit_accordion_icon_group\">\n                                    <div class=\"ekit_accordion_normal_icon\">\n                                        <!-- Normal Icon -->\n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-down-arrow1\"><\/i>                                    <\/div>\n\n                                    <div class=\"ekit_accordion_active_icon\">\n                                        <!-- Active Icon -->\n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-up-arrow\"><\/i>                                    <\/div>\n                                <\/div>\n\n                            \n                                                    <\/a>\n                    <\/div>\n\n                    <div id=\"Collapse-b44ab056aa7aad1d05ac\" class=\" collapse\" aria-labelledby=\"primaryHeading-1-6317107\" data-parent=\"#accordion-6aa7aad1d05ac\">\n\n                        <div class=\"elementskit-card-body ekit-accordion--content\">\n                            <p>To create a custom Hyv\u00e4 theme, you need to create a child theme under <code>app\/design\/frontend<\/code>, define <code>theme.xml<\/code> and <code>registration.php<\/code>, set Hyva\/default as the parent theme, and deploy static content.<\/p>                        <\/div>\n\n                    <\/div>\n\n                <\/div><!-- .elementskit-card END -->\n\n                \n                <div class=\"elementskit-card \">\n                    <div class=\"elementskit-card-header\" id=\"primaryHeading-2-6317107\">\n                        <a href=\"#collapse-2b872d36aa7aad1d05ac\" class=\"ekit-accordion--toggler elementskit-btn-link collapsed\" data-ekit-toggle=\"collapse\" data-target=\"#Collapse-2b872d36aa7aad1d05ac\" aria-expanded=\"false\" aria-controls=\"Collapse-2b872d36aa7aad1d05ac\">\n                            \n                            <span class=\"ekit-accordion-title\">How much does the Hyv\u00e4 license cost?<\/span>\n\n                            \n                                <div class=\"ekit_accordion_icon_group\">\n                                    <div class=\"ekit_accordion_normal_icon\">\n                                        <!-- Normal Icon -->\n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-down-arrow1\"><\/i>                                    <\/div>\n\n                                    <div class=\"ekit_accordion_active_icon\">\n                                        <!-- Active Icon -->\n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-up-arrow\"><\/i>                                    <\/div>\n                                <\/div>\n\n                            \n                                                    <\/a>\n                    <\/div>\n\n                    <div id=\"Collapse-2b872d36aa7aad1d05ac\" class=\" collapse\" aria-labelledby=\"primaryHeading-2-6317107\" data-parent=\"#accordion-6aa7aad1d05ac\">\n\n                        <div class=\"elementskit-card-body ekit-accordion--content\">\n                            <p>The Hyv\u00e4 license typically costs around <strong>\u20ac1,000 (one-time fee) per Magento installation<\/strong>.<\/p><h3>Key pricing insights:<br \/><br \/><\/h3><ul><li>One-time payment (not subscription-based)<\/li><li>Includes lifetime updates<\/li><li>Valid for a single Magento instance<\/li><li>Additional extensions (like Hyv\u00e4 Checkout) may have separate pricing<\/li><\/ul><p>This pricing makes Hyv\u00e4 a cost-effective alternative compared to long-term frontend development costs.<\/p>                        <\/div>\n\n                    <\/div>\n\n                <\/div><!-- .elementskit-card END -->\n\n                \n                <div class=\"elementskit-card \">\n                    <div class=\"elementskit-card-header\" id=\"primaryHeading-3-6317107\">\n                        <a href=\"#collapse-67ad2006aa7aad1d05ac\" class=\"ekit-accordion--toggler elementskit-btn-link collapsed\" data-ekit-toggle=\"collapse\" data-target=\"#Collapse-67ad2006aa7aad1d05ac\" aria-expanded=\"false\" aria-controls=\"Collapse-67ad2006aa7aad1d05ac\">\n                            \n                            <span class=\"ekit-accordion-title\">What does the Hyv\u00e4 company do?<\/span>\n\n                            \n                                <div class=\"ekit_accordion_icon_group\">\n                                    <div class=\"ekit_accordion_normal_icon\">\n                                        <!-- Normal Icon -->\n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-down-arrow1\"><\/i>                                    <\/div>\n\n                                    <div class=\"ekit_accordion_active_icon\">\n                                        <!-- Active Icon -->\n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-up-arrow\"><\/i>                                    <\/div>\n                                <\/div>\n\n                            \n                                                    <\/a>\n                    <\/div>\n\n                    <div id=\"Collapse-67ad2006aa7aad1d05ac\" class=\" collapse\" aria-labelledby=\"primaryHeading-3-6317107\" data-parent=\"#accordion-6aa7aad1d05ac\">\n\n                        <div class=\"elementskit-card-body ekit-accordion--content\">\n                            <p>The company behind Hyv\u00e4 focuses on <strong>simplifying Magento frontend development<\/strong>.<\/p><h3>Core activities:<br \/><br \/><\/h3><ul><li>Developing the Hyv\u00e4 Theme for Magento 2<\/li><li>Providing performance-first frontend solutions<\/li><li>Supporting developers with documentation and tooling<\/li><li>Building an ecosystem of compatible extensions<\/li><\/ul><p>Hyv\u00e4\u2019s goal is to <strong>reduce complexity and improve performance<\/strong> in Magento stores, which traditionally suffer from slow frontend rendering.<\/p><h3>\u00a0<\/h3>                        <\/div>\n\n                    <\/div>\n\n                <\/div><!-- .elementskit-card END -->\n\n                \n                <div class=\"elementskit-card \">\n                    <div class=\"elementskit-card-header\" id=\"primaryHeading-4-6317107\">\n                        <a href=\"#collapse-1816e476aa7aad1d05ac\" class=\"ekit-accordion--toggler elementskit-btn-link collapsed\" data-ekit-toggle=\"collapse\" data-target=\"#Collapse-1816e476aa7aad1d05ac\" aria-expanded=\"false\" aria-controls=\"Collapse-1816e476aa7aad1d05ac\">\n                            \n                            <span class=\"ekit-accordion-title\">What are the benefits of Hyv\u00e4 Theme?<\/span>\n\n                            \n                                <div class=\"ekit_accordion_icon_group\">\n                                    <div class=\"ekit_accordion_normal_icon\">\n                                        <!-- Normal Icon -->\n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-down-arrow1\"><\/i>                                    <\/div>\n\n                                    <div class=\"ekit_accordion_active_icon\">\n                                        <!-- Active Icon -->\n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-up-arrow\"><\/i>                                    <\/div>\n                                <\/div>\n\n                            \n                                                    <\/a>\n                    <\/div>\n\n                    <div id=\"Collapse-1816e476aa7aad1d05ac\" class=\" collapse\" aria-labelledby=\"primaryHeading-4-6317107\" data-parent=\"#accordion-6aa7aad1d05ac\">\n\n                        <div class=\"elementskit-card-body ekit-accordion--content\">\n                            <p>Hyv\u00e4 Theme improves Magento 2 speed, simplifies development, and enhances Core Web Vitals by reducing JavaScript and using modern frontend tools.<\/p>                        <\/div>\n\n                    <\/div>\n\n                <\/div><!-- .elementskit-card END -->\n\n                                                        <script type=\"application\/ld+json\">{\"@context\":\"https:\/\/schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"What is Hyv\u00e4 Theme in Magento 2?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>The <span class=\\\"hover:entity-accent entity-underline inline cursor-pointer align-baseline\\\"><span class=\\\"whitespace-normal\\\">Hyv\u00e4 Theme<\/span><\/span> is a modern frontend solution for Magento 2 that replaces Luma with a lightweight stack using Tailwind CSS and Alpine.js. It improves performance, simplifies development, and enhances user experience.<\/p>\"}},{\"@type\":\"Question\",\"name\":\"How do you create a custom Hyv\u00e4 theme in Magento 2?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>To create a custom Hyv\u00e4 theme, you need to create a child theme under <code>app\/design\/frontend<\/code>, define <code>theme.xml<\/code> and <code>registration.php<\/code>, set Hyva\/default as the parent theme, and deploy static content.<\/p>\"}},{\"@type\":\"Question\",\"name\":\"How much does the Hyv\u00e4 license cost?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>The Hyv\u00e4 license typically costs around <strong>\u20ac1,000 (one-time fee) per Magento installation<\/strong>.<\/p><h3>Key pricing insights:<br \/><br \/><\/h3><ul><li>One-time payment (not subscription-based)<\/li><li>Includes lifetime updates<\/li><li>Valid for a single Magento instance<\/li><li>Additional extensions (like Hyv\u00e4 Checkout) may have separate pricing<\/li><\/ul><p>This pricing makes Hyv\u00e4 a cost-effective alternative compared to long-term frontend development costs.<\/p>\"}},{\"@type\":\"Question\",\"name\":\"What does the Hyv\u00e4 company do?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>The company behind Hyv\u00e4 focuses on <strong>simplifying Magento frontend development<\/strong>.<\/p><h3>Core activities:<br \/><br \/><\/h3><ul><li>Developing the Hyv\u00e4 Theme for Magento 2<\/li><li>Providing performance-first frontend solutions<\/li><li>Supporting developers with documentation and tooling<\/li><li>Building an ecosystem of compatible extensions<\/li><\/ul><p>Hyv\u00e4\u2019s goal is to <strong>reduce complexity and improve performance<\/strong> in Magento stores, which traditionally suffer from slow frontend rendering.<\/p><h3>\u00a0<\/h3>\"}},{\"@type\":\"Question\",\"name\":\"What are the benefits of Hyv\u00e4 Theme?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>Hyv\u00e4 Theme improves Magento 2 speed, simplifies development, and enhances Core Web Vitals by reducing JavaScript and using modern frontend tools.<\/p>\"}}]}<\/script>\n                                <\/div>\n    <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0482492 e-flex e-con-boxed e-con e-parent\" data-id=\"0482492\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cf0e69e elementor-widget elementor-widget-html\" data-id=\"cf0e69e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script type=\"application\/ld+json\">\r\n{\r\n  \"@context\": \"https:\/\/schema.org\",\r\n  \"@type\": \"Article\",\r\n  \"headline\": \"How to Create a Custom Hyv\u00e4 Theme in Magento 2\",\r\n  \"description\": \"Complete step-by-step guide to create a custom Hyv\u00e4 Theme in Magento 2 including setup, structure, Tailwind CSS, and performance optimization.\",\r\n  \"image\": \"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2026\/03\/How-to-create-your-own-theme-in-Hyva-Theme-Magento-2-768x422.jpg\",\r\n  \"author\": {\r\n    \"@type\": \"Organization\",\r\n    \"name\": \"iCreative Technologies\",\r\n    \"url\": \"https:\/\/www.icreativetechnologies.com\/\"\r\n  },\r\n  \"publisher\": {\r\n    \"@type\": \"Organization\",\r\n    \"name\": \"iCreative Technologies\",\r\n    \"logo\": {\r\n      \"@type\": \"ImageObject\",\r\n      \"url\": \"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2024\/11\/logo-e1628229333795.png.png.webp\"\r\n    }\r\n  },\r\n  \"datePublished\": \"2026-03-30T15:30:00+05:30\",\r\n  \"dateModified\": \"2026-03-30T15:30:00+05:30\",\r\n  \"mainEntityOfPage\": {\r\n    \"@type\": \"WebPage\",\r\n    \"@id\": \"https:\/\/www.icreativetechnologies.com\/how-to-create-your-own-theme-in-hyva-theme\/\"\r\n  }\r\n}\r\n<\/script>\r\n\r\n<script type=\"application\/ld+json\">\r\n{\r\n  \"@context\": \"https:\/\/schema.org\",\r\n  \"@type\": \"HowTo\",\r\n  \"name\": \"How to Create a Custom Hyv\u00e4 Theme in Magento 2\",\r\n  \"description\": \"Step-by-step tutorial to build a custom Hyv\u00e4 theme in Magento 2.\",\r\n  \"totalTime\": \"PT60M\",\r\n  \"step\": [\r\n    {\r\n      \"@type\": \"HowToStep\",\r\n      \"name\": \"Install Hyv\u00e4 Theme\",\r\n      \"text\": \"Install the Hyv\u00e4 default theme using Composer and enable it in Magento admin.\"\r\n    },\r\n    {\r\n      \"@type\": \"HowToStep\",\r\n      \"name\": \"Create Theme Directory\",\r\n      \"text\": \"Create a theme folder inside app\/design\/frontend\/Vendor\/ThemeName.\"\r\n    },\r\n    {\r\n      \"@type\": \"HowToStep\",\r\n      \"name\": \"Add theme.xml\",\r\n      \"text\": \"Define your theme and set Hyva\/default as parent.\"\r\n    },\r\n    {\r\n      \"@type\": \"HowToStep\",\r\n      \"name\": \"Register Theme\",\r\n      \"text\": \"Create registration.php to register the theme in Magento.\"\r\n    },\r\n    {\r\n      \"@type\": \"HowToStep\",\r\n      \"name\": \"Deploy and Activate\",\r\n      \"text\": \"Run Magento commands and activate the theme from admin.\"\r\n    }\r\n  ]\r\n}\r\n<\/script>\r\n\r\n<script type=\"application\/ld+json\">\r\n{\r\n  \"@context\": \"https:\/\/schema.org\",\r\n  \"@type\": \"Product\",\r\n  \"name\": \"Hyv\u00e4 Theme Magento 2 Development Guide\",\r\n  \"brand\": {\r\n    \"@type\": \"Organization\",\r\n    \"name\": \"iCreative Technologies\"\r\n  },\r\n  \"review\": {\r\n    \"@type\": \"Review\",\r\n    \"author\": {\r\n      \"@type\": \"Person\",\r\n      \"name\": \"Expert Review\"\r\n    },\r\n    \"reviewBody\": \"This guide provides a complete and practical approach to building a custom Hyv\u00e4 theme in Magento 2, covering structure, setup, and performance optimization.\",\r\n    \"reviewRating\": {\r\n      \"@type\": \"Rating\",\r\n      \"ratingValue\": \"4.9\",\r\n      \"bestRating\": \"5\"\r\n    }\r\n  },\r\n  \"aggregateRating\": {\r\n    \"@type\": \"AggregateRating\",\r\n    \"ratingValue\": \"4.9\",\r\n    \"reviewCount\": \"25\"\r\n  }\r\n}\r\n<\/script>\r\n\r\n<script type=\"application\/ld+json\">\r\n{\r\n  \"@context\": \"https:\/\/schema.org\",\r\n  \"@type\": \"FAQPage\",\r\n  \"mainEntity\": [\r\n    {\r\n      \"@type\": \"Question\",\r\n      \"name\": \"How to create a custom Hyv\u00e4 theme in Magento 2?\",\r\n      \"acceptedAnswer\": {\r\n        \"@type\": \"Answer\",\r\n        \"text\": \"Create a child theme, define theme.xml and registration.php, set Hyva\/default as parent, and deploy static content.\"\r\n      }\r\n    },\r\n    {\r\n      \"@type\": \"Question\",\r\n      \"name\": \"Is Hyv\u00e4 Theme better than Luma?\",\r\n      \"acceptedAnswer\": {\r\n        \"@type\": \"Answer\",\r\n        \"text\": \"Yes, Hyv\u00e4 is faster and more efficient because it removes heavy JavaScript dependencies and improves Core Web Vitals.\"\r\n      }\r\n    },\r\n    {\r\n      \"@type\": \"Question\",\r\n      \"name\": \"Does Hyv\u00e4 improve Magento performance?\",\r\n      \"acceptedAnswer\": {\r\n        \"@type\": \"Answer\",\r\n        \"text\": \"Yes, Hyv\u00e4 improves performance by reducing JavaScript, optimizing CSS, and improving page load speed.\"\r\n      }\r\n    }\r\n  ]\r\n}\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Introduction to Hyv\u00e4 Theme Development According to the built with trend Hyv\u00e4 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":70781,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[508],"tags":[513],"class_list":["post-70769","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hyva-themes","tag-hyvathemedevelopment-hyvathemeformagento2-hyvathemes-magent2hyvatheme"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Create a Custom Hyv\u00e4 Theme in Magento 2 (Complete Tutorial 2026)<\/title>\n<meta name=\"description\" content=\"Learn how to create a custom Hyv\u00e4 theme in Magento 2 with this step-by-step guide. Build fast, lightweight, and SEO-friendly magento storefronts using Hyv\u00e4 Theme best practices.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Install Hyv\u00e4 Theme in Magento 2 | Complete Guide 2026\" \/>\n<meta property=\"og:description\" content=\"Learn how to install the Hyv\u00e4 theme in Magento 2 step by step. This expert guide covers prerequisites, composer setup, module activation, child theme creation, and common fixes for magento 2 Hyva theme updated for Magento 2.4.x.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.icreativetechnologies.com\/de\/how-to-create-your-own-theme-in-hyva-theme\/\" \/>\n<meta property=\"og:site_name\" content=\"iCreative Technologies\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-30T00:00:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-16T09:34:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2026\/03\/installation-of-hyva-themes-in-magento-2-4-x-1024x563.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"563\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin_ict\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Install Hyv\u00e4 Theme in Magento 2 | Complete Guide 2026\" \/>\n<meta name=\"twitter:description\" content=\"Learn how to install the Hyv\u00e4 theme in Magento 2 step by step. This expert guide covers prerequisites, composer setup, module activation, child theme creation, and common fixes for magento 2 Hyva theme updated for Magento 2.4.x.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2026\/03\/installation-of-hyva-themes-in-magento-2-4-x-scaled.png\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin_ict\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/how-to-create-your-own-theme-in-hyva-theme\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/how-to-create-your-own-theme-in-hyva-theme\\\/\"},\"author\":{\"name\":\"admin_ict\",\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/#\\\/schema\\\/person\\\/5890244cc2389c4371db96d346291e51\"},\"headline\":\"Step-by-Step Guide to Create Your Own Hyv\u00e4 Theme in Magento 2 (Full Tutorial 2026)\",\"datePublished\":\"2026-03-30T00:00:32+00:00\",\"dateModified\":\"2026-06-16T09:34:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/how-to-create-your-own-theme-in-hyva-theme\\\/\"},\"wordCount\":2578,\"publisher\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/how-to-create-your-own-theme-in-hyva-theme\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/Featured_How-to-create-your-own-theme-in-Hyva-Theme-Magento-2.jpg\",\"keywords\":[\"#Hyvathemedevelopment #HyvathemeforMagento2 #Hyvathemes #Magent2HyvaTheme\"],\"articleSection\":[\"Hyv\u00e4 Themes\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/how-to-create-your-own-theme-in-hyva-theme\\\/\",\"url\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/how-to-create-your-own-theme-in-hyva-theme\\\/\",\"name\":\"How to Create a Custom Hyv\u00e4 Theme in Magento 2 (Complete Tutorial 2026)\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/how-to-create-your-own-theme-in-hyva-theme\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/how-to-create-your-own-theme-in-hyva-theme\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/Featured_How-to-create-your-own-theme-in-Hyva-Theme-Magento-2.jpg\",\"datePublished\":\"2026-03-30T00:00:32+00:00\",\"dateModified\":\"2026-06-16T09:34:21+00:00\",\"description\":\"Learn how to create a custom Hyv\u00e4 theme in Magento 2 with this step-by-step guide. Build fast, lightweight, and SEO-friendly magento storefronts using Hyv\u00e4 Theme best practices.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/how-to-create-your-own-theme-in-hyva-theme\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.icreativetechnologies.com\\\/how-to-create-your-own-theme-in-hyva-theme\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/how-to-create-your-own-theme-in-hyva-theme\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/Featured_How-to-create-your-own-theme-in-Hyva-Theme-Magento-2.jpg\",\"contentUrl\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/Featured_How-to-create-your-own-theme-in-Hyva-Theme-Magento-2.jpg\",\"width\":1572,\"height\":1080,\"caption\":\"Create Hyva Magento 2 theme\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/how-to-create-your-own-theme-in-hyva-theme\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Top Shopify & Shopify Plus Agencies in India\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/#website\",\"url\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/\",\"name\":\"iCreative Technologies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/#organization\",\"name\":\"iCreative Technologies\",\"url\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/logo-e1628229333795.png.png\",\"contentUrl\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/logo-e1628229333795.png.png\",\"width\":240,\"height\":66,\"caption\":\"iCreative Technologies\"},\"image\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/#\\\/schema\\\/person\\\/5890244cc2389c4371db96d346291e51\",\"name\":\"admin_ict\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1a80ba72711628bb2e1e82893747de73eff694ad73c870dc2969e296366cee99?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1a80ba72711628bb2e1e82893747de73eff694ad73c870dc2969e296366cee99?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1a80ba72711628bb2e1e82893747de73eff694ad73c870dc2969e296366cee99?s=96&d=mm&r=g\",\"caption\":\"admin_ict\"},\"sameAs\":[\"https:\\\/\\\/staging.icreativetechnologies.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Custom Hyv\u00e4 Theme in Magento 2 (Complete Tutorial 2026)","description":"Learn how to create a custom Hyv\u00e4 theme in Magento 2 with this step-by-step guide. Build fast, lightweight, and SEO-friendly magento storefronts using Hyv\u00e4 Theme best practices.","robots":{"index":"noindex","follow":"follow"},"og_locale":"de_DE","og_type":"article","og_title":"How to Install Hyv\u00e4 Theme in Magento 2 | Complete Guide 2026","og_description":"Learn how to install the Hyv\u00e4 theme in Magento 2 step by step. This expert guide covers prerequisites, composer setup, module activation, child theme creation, and common fixes for magento 2 Hyva theme updated for Magento 2.4.x.","og_url":"https:\/\/www.icreativetechnologies.com\/de\/how-to-create-your-own-theme-in-hyva-theme\/","og_site_name":"iCreative Technologies","article_published_time":"2026-03-30T00:00:32+00:00","article_modified_time":"2026-06-16T09:34:21+00:00","og_image":[{"width":1024,"height":563,"url":"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2026\/03\/installation-of-hyva-themes-in-magento-2-4-x-1024x563.png","type":"image\/png"}],"author":"admin_ict","twitter_card":"summary_large_image","twitter_title":"How to Install Hyv\u00e4 Theme in Magento 2 | Complete Guide 2026","twitter_description":"Learn how to install the Hyv\u00e4 theme in Magento 2 step by step. This expert guide covers prerequisites, composer setup, module activation, child theme creation, and common fixes for magento 2 Hyva theme updated for Magento 2.4.x.","twitter_image":"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2026\/03\/installation-of-hyva-themes-in-magento-2-4-x-scaled.png","twitter_misc":{"Written by":"admin_ict","Est. reading time":"12\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.icreativetechnologies.com\/how-to-create-your-own-theme-in-hyva-theme\/#article","isPartOf":{"@id":"https:\/\/www.icreativetechnologies.com\/how-to-create-your-own-theme-in-hyva-theme\/"},"author":{"name":"admin_ict","@id":"https:\/\/www.icreativetechnologies.com\/#\/schema\/person\/5890244cc2389c4371db96d346291e51"},"headline":"Step-by-Step Guide to Create Your Own Hyv\u00e4 Theme in Magento 2 (Full Tutorial 2026)","datePublished":"2026-03-30T00:00:32+00:00","dateModified":"2026-06-16T09:34:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.icreativetechnologies.com\/how-to-create-your-own-theme-in-hyva-theme\/"},"wordCount":2578,"publisher":{"@id":"https:\/\/www.icreativetechnologies.com\/#organization"},"image":{"@id":"https:\/\/www.icreativetechnologies.com\/how-to-create-your-own-theme-in-hyva-theme\/#primaryimage"},"thumbnailUrl":"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2026\/03\/Featured_How-to-create-your-own-theme-in-Hyva-Theme-Magento-2.jpg","keywords":["#Hyvathemedevelopment #HyvathemeforMagento2 #Hyvathemes #Magent2HyvaTheme"],"articleSection":["Hyv\u00e4 Themes"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/www.icreativetechnologies.com\/how-to-create-your-own-theme-in-hyva-theme\/","url":"https:\/\/www.icreativetechnologies.com\/how-to-create-your-own-theme-in-hyva-theme\/","name":"How to Create a Custom Hyv\u00e4 Theme in Magento 2 (Complete Tutorial 2026)","isPartOf":{"@id":"https:\/\/www.icreativetechnologies.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.icreativetechnologies.com\/how-to-create-your-own-theme-in-hyva-theme\/#primaryimage"},"image":{"@id":"https:\/\/www.icreativetechnologies.com\/how-to-create-your-own-theme-in-hyva-theme\/#primaryimage"},"thumbnailUrl":"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2026\/03\/Featured_How-to-create-your-own-theme-in-Hyva-Theme-Magento-2.jpg","datePublished":"2026-03-30T00:00:32+00:00","dateModified":"2026-06-16T09:34:21+00:00","description":"Learn how to create a custom Hyv\u00e4 theme in Magento 2 with this step-by-step guide. Build fast, lightweight, and SEO-friendly magento storefronts using Hyv\u00e4 Theme best practices.","breadcrumb":{"@id":"https:\/\/www.icreativetechnologies.com\/how-to-create-your-own-theme-in-hyva-theme\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.icreativetechnologies.com\/how-to-create-your-own-theme-in-hyva-theme\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.icreativetechnologies.com\/how-to-create-your-own-theme-in-hyva-theme\/#primaryimage","url":"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2026\/03\/Featured_How-to-create-your-own-theme-in-Hyva-Theme-Magento-2.jpg","contentUrl":"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2026\/03\/Featured_How-to-create-your-own-theme-in-Hyva-Theme-Magento-2.jpg","width":1572,"height":1080,"caption":"Create Hyva Magento 2 theme"},{"@type":"BreadcrumbList","@id":"https:\/\/www.icreativetechnologies.com\/how-to-create-your-own-theme-in-hyva-theme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.icreativetechnologies.com\/"},{"@type":"ListItem","position":2,"name":"Top Shopify & Shopify Plus Agencies in India"}]},{"@type":"WebSite","@id":"https:\/\/www.icreativetechnologies.com\/#website","url":"https:\/\/www.icreativetechnologies.com\/","name":"iCreative Technologies","description":"","publisher":{"@id":"https:\/\/www.icreativetechnologies.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.icreativetechnologies.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.icreativetechnologies.com\/#organization","name":"iCreative Technologies","url":"https:\/\/www.icreativetechnologies.com\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.icreativetechnologies.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2024\/11\/logo-e1628229333795.png.png","contentUrl":"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2024\/11\/logo-e1628229333795.png.png","width":240,"height":66,"caption":"iCreative Technologies"},"image":{"@id":"https:\/\/www.icreativetechnologies.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.icreativetechnologies.com\/#\/schema\/person\/5890244cc2389c4371db96d346291e51","name":"admin_ict","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/1a80ba72711628bb2e1e82893747de73eff694ad73c870dc2969e296366cee99?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/1a80ba72711628bb2e1e82893747de73eff694ad73c870dc2969e296366cee99?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1a80ba72711628bb2e1e82893747de73eff694ad73c870dc2969e296366cee99?s=96&d=mm&r=g","caption":"admin_ict"},"sameAs":["https:\/\/staging.icreativetechnologies.com"]}]}},"_links":{"self":[{"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/posts\/70769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/comments?post=70769"}],"version-history":[{"count":0,"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/posts\/70769\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/media\/70781"}],"wp:attachment":[{"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/media?parent=70769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/categories?post=70769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/tags?post=70769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}