How to customize and override templates in Hyvä theme | Magento Hyva

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.

Open Table of contents

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

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:

<?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>MyCompany_SampleModule::view/frontend/layout/default.xml

And the template file:

<?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>MyCompany_SampleModule::view/frontend/templates/sampleblock.phtml

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:

<?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>Hyva_MyCompanySampleModule::view/frontend/templates/sampleblock.phtml

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:

<?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>app/design/frontend/MyCompany/child/MyCompany_SampleModule/templates/sampleblock.phtml

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!