How to Build a Custom Hyvä Theme?
The complete technical guide to creating a child theme, setting up Tailwind CSS, and overriding templates in Magento 2.
Hyvä has revolutionized Magento frontend development, moving away from the complexity of Luma (RequireJS, KnockoutJS, LESS) to a modern, enjoyable stack based on Tailwind CSS and Alpine.js. But how do you actually start building a custom design?
In this guide, we will walk through the process of creating a custom Hyvä child theme from scratch, ensuring upgradeability and maintainability.
Prerequisites
- A working Magento 2 installation (2.4.6+ recommended).
- A valid Hyvä License (required to access the code).
- Composer installed.
- Node.js (v16+) and npm installed.
Step 1: Create the Theme Directory
In Magento, themes live in app/design/frontend. We will
create a new vendor directory and a theme directory.
# Create directories
mkdir -p app/design/frontend/MyCompany/hyva_custom
Step 2: Theme Registration
You need two files to register the theme: theme.xml and
registration.php.
theme.xml
This file declares the theme and its parent. Crucially, we inherit from
Hyva/default.
<title>MyCompany Hyva Custom</title>
<parent>Hyva/default</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
registration.php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/MyCompany/hyva_custom',
__DIR__
);
Step 3: Setup Tailwind CSS
Hyvä uses a node-based workflow to compile Tailwind. Copy the
web/tailwind folder from the default Hyvä theme to your new theme.
# Copy config files
mkdir -p app/design/frontend/MyCompany/hyva_custom/web/tailwind
cp -r vendor/hyva-themes/magento2-default-theme/web/tailwind/* app/design/frontend/MyCompany/hyva_custom/web/tailwind/
Now, initialize the project:
cd app/design/frontend/MyCompany/hyva_custom/web/tailwind
npm install
npm run build-prod
Step 4: Customizing Templates
To override a template (e.g., the header), find the original file in
vendor/hyva-themes/magento2-default-theme/Magento_Theme/templates/html/header.phtml
and copy it to your theme:
app/design/frontend/MyCompany/hyva_custom/Magento_Theme/templates/html/header.phtml
Now you can modify the HTML, add Tailwind classes, and use Alpine.js for interactivity. For example:
<!-- Custom Header Content -->
</header>
Conclusion
Building a custom Hyvä theme is significantly faster than Luma because you are working with standard web technologies. There is no waiting for "Static Content Deploy." You save, the browser reloads, and you're done.
Want a Head Start?
Skip the setup. Our premium Hyvä Templates come with pre-configured designs.
Browse TemplatesHyvä Themes Team
We are a team of certified Magento developers passionate about performance and Hyvä. We help merchants build faster, more profitable stores.