How to Create a Custom Child Theme in Hyva Magento 2

In this tutorial, Today I will explain to how to create a custom child theme in Hyva magento 2. Hyva provides 2 default theme. 1) Hyva Reset 2) Hyva Default.

Hyva Reset theme creates with empty layout with container only where Hyva default theme creates with sample data into theme with extends Hyva Reset theme. Now, I am explain here with it’s steps to create child theme.

You may also like this :

How to Install Hyva Theme in Magento 2?

Steps to create a custom child theme in Hyva Magento 2 :

1) First of all, Create a folder RH/Boost inside the app/design/frontend

2) Now, Create registration.php for theme registration inside the app/design/frontend/RH/Boost/ and paste the below code :

Copy Code


<?php
/**
 * Created By : Rohan Hapani
 */

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/RH/Boost', __DIR__);

3) Then, Create theme.xml for theme declaration inside the app/design/frontend/RH/Boost/ and paste the below code :

Copy Code


<!--
/**
 * Created By : Rohan Hapani
 */
-->
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>RH Boost</title>
    <parent>Hyva/default</parent>
    <media>
        <preview_image>media/preview.png</preview_image>
    </media>
</theme>

4) Create media folder inside the app/design/frontend/RH/Boost/ and add ‘preview.png’ file at there.

5) Now, To configure parent theme path in your child theme’s tailwind.config.js, Go to app/design/frontend/RH/Boost/web/tailwind/tailwind.config.js and add the below code.

Copy Code

module.exports = { ... // keep the original settings as it is from tailwind.config.js // only add the path below to the purge > content settings ... content: [ '../../**/*.phtml', '../../*/layout/*.xml', '../../*/page_layout/override/base/*.xml', // parent theme in Vendor (if this is a child-theme) '../../../../../../../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', // app/code phtml files (if need tailwind classes from app/code modules) '../../../../../../../app/code/**/*.phtml', ] }

Please read the comment on above file content and add content based on that.

7) After add code into tailwind config, execute this below command :

Copy Code

cd app/design/frontend/RH/Boost/web/tailwind/ npm install

Note :

If you added tailwind.config.js file for the module then, this will not be included in the build process. For that, the module needs to be added to the app/etc/hyva-themes.json. In this file, all installed module list will be exist at there. If the module is not there then you need to generate by this below command :

Copy Code

php bin/magento hyva:config:generate

8) In Last, Execute this below command to deploy changes

Copy Code

php bin/magento s:up php bin/magento s:s:d -f php bin/magento c:f

Now, Go to Admin -> Content -> Design -> Configuration and select your child theme -> save configuration & flush cache.

That’s it !!!

I hope this blog is easy to understand about how to create a custom child theme in Hyva Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment on this blog, I’ll get back with a proper solution.

Keep liking and sharing !!!

Post Views: 728