Step-by-Step Guide to Creating a Custom Hyva Child Theme in Magento 2

To improve the speed and SEO performance of a Magento site, one of the best themes available today is the Hyva theme. By using the Hyva theme, store owners can achieve better Core Web Vitals (CWV) scores in Google PageSpeed Insights. This helps improve Google search rankings and increases conversion rates.

The Hyva theme comes with a very basic layout and hard-coded homepage content. This setup is mainly for demo purposes. For a real production Magento store, the default Hyva theme is only a starting point and is not enough to match your brand’s design and layout requirements. To customize the look and feel, you should create a custom child theme based on the Hyva parent theme. In this guide, we will walk through the step-by-step process of creating a Hyva child theme.

Step-by-Step Hyva Child Theme Creation

Step 1: Install the Hyva Theme

Before creating a child theme, you must first install the default Hyva theme. Since the Hyva theme is open source, you can easily download and install it in your Magento store. Follow this Hyva theme installation guide to complete this step.

Once the Hyva theme is installed successfully, you can proceed with creating the child theme structure.

Step 2: Create a Theme Directory Structure

Create a new theme directory under the following path:

app/design/frontend/Magearmy/Default

Here, Magearmy is the vendor name and Default is the theme name. You can replace these with your company name and site name as needed.

Step 3: Register and Declare the Theme

To register the theme, create a registration.php file in the app/design/frontend/Magearmy/Default directory. Add the required registration code as follows

<?php
use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/Magearmy/Default', __DIR__);

To declare the theme, create a theme.xml file in the app/design/frontend/Magearmy/Default/ directory. Add the required declaration code as follows

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Magearmy Child Hyva Theme</title>
    <parent>Hyva/default</parent>
    <media>
        <preview_image>media/preview.png</preview_image
    </media>
</theme>

As mentioned in the theme.xml file, add a preview.png image inside the app/design/frontend/Magearmy/Default/media/ directory. This image will be used as the theme preview in the Magento admin panel.

Step 4: Copy Required Directories from the Parent Hyva Theme

Copy the entire web directory from the parent Hyva theme vendor/hyva-themes/magento2-default-theme/ and paste it into your child theme directory app/design/frontend/Magearmy/Default/

This includes all required assets and the Tailwind CSS setup.

Step 5: Apply the Child Theme from the Admin Panel

Go to Magento Admin > Content > Configuration, edit the required website or store view. Under the Applied Theme dropdown, you will see your newly created child theme. Select it and save the configuration.

Step 6: Compile Tailwind CSS

Since the Hyva theme is based on Tailwind CSS, you need to compile the theme styles. Navigate to our child theme directory app/design/frontend/Magearmy/Default/web/tailwind and run the following commands.

npm ci
npm run build

Note: Make sure Node.js and npm are installed on your system before running these commands.

Code Editor Setup Tips for Faster Development

• Install and enable Alpine.​js Support plugin in PHPSTORM for Alpine JS code completion support.
• Install and enable the Tailwind CSS official plugin or the Tailwind CSS Smart Completion plugin in PHPSTORM for Tailwind CSS code completion.
• If you are using VS Code, similar plugins are available to support Tailwind CSS and Alpine JS code completion.

Hyva Custom Theme vs Hyva Ready Made Theme Template

A custom Hyva theme is the best choice for businesses that want a unique design and have a strong, long-term brand vision. It gives full control over layout, user experience, and future scalability. However, for small and medium-sized store owners who want to benefit from Hyva’s high performance while staying within budget and launching quickly, Hyva ready-made theme templates are the ideal option. They offer speed, quality design, and faster time to market.
Check out our Top 5 Premium Hyva Ready-Made Theme Templates to find the best fit for your store.