How to create child theme in Hyva Magento2

Creating a child theme for Magento 2’s Hyvä theme allows you to customize your store’s design and functionality without affecting the core theme.
In this blog post, we’ll walk you through the process of creating a child theme for Hyvä in Magento 2, step-by-step.

• Create a directory for your child theme – MageMango/hyvachild. This should be done under app/design/frontend.

• Create theme.xml file under app/design/frontend/MageMango/hyvachild with the below code –

<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Config/etc/theme.xsd”>

   <title>MageMango HyvaChild</title>

   <parent>Hyva/default</parent>

</theme>

• Create registration.php file under app/design/frontend/MageMango/hyvachild with the below code –

<?php

/**

 * Copyright © Magento, Inc. All rights reserved.

 * See COPYING.txt for license details.

 */

use \Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(ComponentRegistrar::THEME, ‘frontend/MageMango/hyvachild’, __DIR__);

• Copy the web directory from the parent theme (vendor/hyva-themes/magento2-default-theme/web/) into your child theme directory by the following code –

cp -R vendor/hyva-themes/magento2-default-theme/web/ app/design/frontend/MageMango/hyvachild/web/

This step copies all assets such as CSS, JavaScript, images, fonts, and Tailwind configuration files from the parent theme to your child theme

• To ensure your child theme uses the correct Tailwind configuration, you’ll need to adjust the tailwind.config.js file.
  1. In your child theme, navigate to the web/tailwind/ directory.
  2. Open the tailwind.config.js file and modify the content configuration to include the parent theme’s path
  
  So open tailwind.config.js file in your child theme and replace the content array with the below code –

content: [

    // this theme’s phtml and layout XML files

    ‘../../**/*.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’,

    ‘./app/design/frontend/**/*.css’,

  ]

• At last, execute all Magento2 commands as mentioned below –

php bin/magento s:up

php bin/magento s:d:c

php bin/magento s:s:d -f

php bin/magento ind:rein

php bin/magento c:f

• Login to your admin panel -> Content -> Configuration -> Edit the configuration and select your child theme – MageMango HyvaChild

• By following these simple steps, you can easily create a flexible child theme that allows for deep customization while ensuring compatibility with future updates to the Hyvä theme.
  In case you are facing error in creating the child theme and wanted to give a solution, then feel free to comment, i will check accordingly and update my blog.
  
  If you’re ready to dive into Magento 2 customization, creating a child theme is the perfect first step. Happy coding!