Last updated: April 23, 2025

How to customize and override templates in Hyvä theme

In the previous blog, we explored how to customize and override templates in Hyvä compatibility module. Now, let’s learn how to customize and override templates in the Hyvä child theme.

Create the Hyvä child theme
Create the Magento module
Override the template in the Hyvä compatibility module
Override the template in the Hyvä child theme

Step 1: Create the Hyvä child theme

To begin, create a Hyvä child theme: app/design/frontend/MyCompany/child

Create the theme.xml and registration.php files.
Set the parent theme to Hyva/default.
Copy the web directory from the Hyva/default theme.
Configure the tailwind config tailwind.config.js file.

Step 2: Create the Magento module

Now, let’s create a sample module named MyCompany_SampleModule with the following layout file: MyCompany_SampleModule::view/frontend/layout/default.xml

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block name="sample.block" template="MyCompany_SampleModule::sampleblock.phtml"/>
        </referenceContainer>
    </body>
</page>

And the template file: MyCompany_SampleModule::view/frontend/templates/sampleblock.phtml:

<?php
/**
 * @var $block \Magento\Framework\View\Element\Template
 * @var $escaper \Magento\Framework\Escaper
 */
?>
<div class="row">
    <?= $escaper->escapeHtml(__('Hello, this is a sample block in a MyCompany_SampleModule::sampleblock.phtml module!')) ?>
</div>

On the frontend, you will see the following text displayed:

Hello, this is a sample block in a MyCompany_SampleModule::sampleblock.phtml module!

Step 3: Override the template in the Hyvä compatibility module

To override the template file MyCompany_SampleModule::sampleblock.phtml, create the template file at same path: Hyva_MyCompanySampleModule::view/frontend/templates/sampleblock.phtml

<?php
/**
 * @var $block \Magento\Framework\View\Element\Template
 * @var $escaper \Magento\Framework\Escaper
 */
?>
<div class="py-2">
    <?= $escaper->escapeHtml(__('Hello, this is a sample block in a Hyva_MyCompanySampleModule::sampleblock.phtml module!')) ?>
</div>

Once the Hyvä-compatible module is created, the new template file will override the original one. On the frontend, you will see the following text displayed:

Hello, this is a sample block in a Hyva_MyCompanySampleModule::sampleblock.phtml module!

Step 4: Override the template in the Hyvä child theme

To override the template file Hyva_MyCompanySampleModule::sampleblock.phtml in the Hyvä child theme:

Create the template file under the original module path MyCompany_SampleModule, not under the Hyvä-compatible Hyva_MyCompanySampleModule module path. This is because the Hyvä-compatible module overrides the original module template.
Path for the template file: app/design/frontend/MyCompany/child/MyCompany_SampleModule/templates/sampleblock.phtml

<?php
/**
 * @var $block \Magento\Framework\View\Element\Template
 * @var $escaper \Magento\Framework\Escaper
 */
?>
<div>
    <?= $escaper->escapeHtml(__('Hello, this is a sample block in a Hyva child theme MyCompany_SampleModule module!')) ?>
</div>

On the frontend, you will see the following text displayed: Hello, this is a sample block in a Hyva child theme Hyva_MyCompanySampleModule module!

What’s Next?

Next, we will explore how template fallback works in the Hyvä theme. Stay tuned!

.css-25cxt7{margin-left:-20px;padding-right:4px;color:var(--theme-ui-colors-primary,#663399);}Step 1: Create the Hyvä child theme

Step 2: Create the Magento module

Step 3: Override the template in the Hyvä compatibility module

Step 4: Override the template in the Hyvä child theme

Step 1: Create the Hyvä child theme