How to Create a Hyvä Child Theme the Easy Way
Creating a child theme for Hyvä is a slightly more advanced process than building one for traditional themes like Luma. You need to go beyond the basics, such as theme.xml and registration.php, and dive into additional steps like configuring Tailwind CSS and managing assets. This guide will take you through the process step by step, ensuring your child theme is set up correctly and efficiently.
Step 1: Create the theme.xml File
Start by defining your child theme and setting its parent theme in the theme.xml file. This file is essential for Magento to recognise your child theme.
- Location:
app/design/frontend/Kiwi/hyva_kiwi/theme.xml
xml
Copy code
<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:noNamespaceSchemaLocation=”urn:magento:framework:Config/etc/theme.xsd”>
<title>Hyvä Kiwi Child Theme</title>
<parent>Hyva/default</parent>
</theme>
Step 2: Register Your Theme
The next step is to register your child theme in Magento. Create the registration.php file in your child theme directory.
- Location:
app/design/frontend/Kiwi/hyva_kiwi/registration.php
php
Copy code
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
‘frontend/Kiwi/hyva_kiwi’,
__DIR__
);
?>
Step 3: Copy the web Directory
Hyvä child themes require a web directory that contains essential assets like JavaScript, CSS, and fonts. Copy this directory from the parent Hyvä theme.
- Copy from:
vendor/hyva-themes/magento2-default-theme/web - Paste to:
app/design/frontend/Kiwi/hyva_kiwi/web
Step 4: Tailwind CSS Configuration
Tailwind CSS powers Hyvä’s styling system. Update the tailwind.config.js file in your child theme to include paths to the parent theme’s files.
- Location:
app/design/frontend/Kiwi/hyva_kiwi/web/tailwind/tailwind.config.js
javascript
Copy code
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: Uncomment the lines referencing the parent theme’s paths to ensure proper inheritance of layouts and templates.
Step 5: Install Dependencies
To use Tailwind, you need to install the required Node.js packages in your child theme’s web/tailwind directory.
Commands:
bash
Copy code
cd app/design/frontend/Kiwi/hyva_kiwi/web/tailwind/
npm install
Step 6: Generate the hyva-themes.json File
The hyva-themes.json file tracks all modules using Tailwind CSS. Regenerate this file to ensure your new child theme is recognised.
Command:
bash
Copy code
php bin/magento hyva:config:generate
Step 7: Deploy Your Changes
Run the Magento deployment commands to activate your child theme and apply your changes.
Commands:
bash
Copy code
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
Step 8: Enable the Theme in Admin
Finally, enable your new Hyvä child theme through the Magento admin panel:
- Go to Admin → Content → Design → Configuration.
- Select your child theme, save the configuration, and flush the cache.
Your Hyvä Child Theme is Ready!
Congratulations! Your Hyvä child theme is now live and ready for customisation. With Tailwind CSS and the parent theme’s assets in place, you have a powerful foundation to create a visually stunning and user-friendly eCommerce store.
At Kiwi Commerce, we specialise in Magento and Hyvä solutions. Whether you need custom development or troubleshooting support, our team is here to help. Get in touch with us today!
