How to Create a Hyvä Child Theme the Easy Way

The Magento ecosystem has evolved rapidly in recent years, and one of the biggest innovations improving store performance and development experience is the Hyvä Theme. Known for its lightweight structure, improved page speed, and modern frontend approach, Hyvä has become a preferred choice for many Magento store owners.

However, when working with Hyvä, creating a child theme requires a slightly different approach compared to traditional Magento themes such as Luma. Developers need to go beyond the basic setup and also configure Tailwind CSS and theme assets correctly.

In this guide, we will walk through the process of creating a Hyvä child theme step by step. Whether you are a developer or a business looking for hyva theme development company expertise, understanding this process will help you better manage customisations and future upgrades.

theme is recommended.

A child theme allows developers to customise the appearance and functionality of a store without modifying the core Hyvä files. This means:

• Easier updates when the parent theme is upgraded
• Safer customisations without affecting the original theme
• Better maintainability for long-term store development
• Cleaner development workflow for teams working on magento hyva theme development services

For businesses investing in eCommerce Development, this approach ensures flexibility while keeping the store stable and upgrade-friendly.

The first step in setting up your Hyvä child theme is defining it within Magento. This is done through the theme.xml file, which tells Magento that your theme exists and specifies the parent theme it inherits from.

Create the following file:

Location

app/design/frontend/Kiwi/hyva_kiwi/theme.xml

Example configuration:

<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”

xsi:noNamespaceSchemaLocation=”urn:magento:framework:Config/etc/theme.xsd”>

<title>Hyva Kiwi Child Theme</title>

<parent>Hyva/default</parent>

</theme>

This file ensures Magento recognises the child theme and links it to the parent Hyvä theme.

Once the theme definition is created, the next step is to register it within Magento using a registration.php file.

Create the file at:

app/design/frontend/Kiwi/hyva_kiwi/registration.php

Example code:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::THEME,

‘frontend/Kiwi/hyva_kiwi’,

__DIR__

);

This step allows Magento to recognise your theme during system setup and deployment.

Unlike traditional Magento themes, Hyvä child themes require a web directory containing essential assets such as:

• CSS files
• JavaScript files
• Fonts
• Images

To set this up, copy the web folder from the parent theme.

Copy from

vendor/hyva-themes/magento2-default-theme/web

Paste to

app/design/frontend/Kiwi/hyva_kiwi/web

These assets provide the foundation for styling and functionality in your child theme.

One of the most important components of the Hyvä theme architecture is Tailwind CSS. Hyvä uses Tailwind as its primary styling framework, which allows developers to build fast, responsive, and highly customisable user interfaces.

To ensure your child theme correctly inherits styles from the parent theme, you need to configure the tailwind.config.js file.

Location

app/design/frontend/Kiwi/hyva_kiwi/web/tailwind/tailwind.config.js

Example configuration:

module.exports = {

content: [

‘../../**/*.phtml’,

‘../../*/layout/*.xml’,

‘../../*/page_layout/override/base/*.xml’,

// Include parent theme paths

‘../../../../../../../vendor/hyva-themes/magento2-default-theme/**/*.phtml’,

‘../../../../../../../vendor/hyva-themes/magento2-default-theme/*/layout/*.xml’,

‘../../../../../../../vendor/hyva-themes/magento2-default-theme/*/page_layout/override/base/*.xml’,

// Include app code modules

‘../../../../../../../app/code/**/*.phtml’,

],

};

Tip:
Make sure the parent theme paths are included so your child theme can inherit templates and layouts correctly.

Next, install the required Node.js dependencies that allow Tailwind to compile your CSS files.

Navigate to the Tailwind directory:

cd app/design/frontend/Kiwi/hyva_kiwi/web/tailwind/

Run the installation command:

npm install

This installs all required packages for compiling the styling system used by the Hyvä theme.

The hyva-themes.json file is used to track all modules and themes that use Tailwind CSS within your Magento installation.

To regenerate this file and ensure your new child theme is recognised, run the following command:

php bin/magento hyva:config:generate

This step ensures compatibility between modules and the Hyvä styling system.

Once the setup is complete, you need to run Magento deployment commands so that your new theme and assets are applied.

Run the following commands:

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy -f

php bin/magento cache:flush

These commands update the Magento configuration, deploy static assets, and clear caches.

The final step is to activate your new Hyvä child theme in the Magento admin panel.

Follow these steps:

1. Go to Admin → Content → Design → Configuration
2. Select your store view
3. Choose the newly created Hyvä child theme
4. Save the configuration
5. Flush the Magento cache

Once enabled, your store will start using the child theme.

By following these steps, you now have a fully functional Hyvä child theme ready for customisation. With Tailwind CSS and the parent theme properly configured, developers can safely extend functionality, modify layouts, and build high-performance storefronts.

Because Hyvä focuses on speed and simplicity, it has become one of the most powerful frontend solutions for Magento stores.

If you are planning a Hyvä implementation or looking for expert support, working with a reliable hyva theme development company can make the process significantly smoother.

At Kiwi Commerce, we specialise in magento hyva theme development services and scalable eCommerce Development solutions. Our team helps businesses build fast, optimised, and conversion-focused Magento stores using the latest technologies.

If you are planning to upgrade your Magento store with the Hyvä theme, feel free to get in touch with our experts.