How to Create a Hyvä Child Theme in Magento 2?

Hyvä themes have recently gained popularity among Magento 2 store owners. They are known for their simplicity and excellent performance.

Further, the ease of customization of Hyvä themes has drastically increased their user base.

In this blog post, you will learn to create a child theme in Magento 2 using Hyvä themes for your Magento 2 store.

Why Create a Hyvä Child Theme?

When you want to customize the Hyvä theme for your store and add functionalities of your choice, you have two options:

• Creating a Hyvä child theme
• Duplicating the existing Hyvä theme

The latter option requires sound technical expertise, and that’s why Magento users often opt for the first option—creating a Hyvä child theme.

The Hyvä child themes are designed to allow developers to customize the core Magento 2 theme without modifying the core files. This practice ensures that updates of parent themes do not overwrite customizations.

Here are a few more reasons for you to count on the Hyvä child theme:

• Child themes inherit styling functionalities from the parent Hyvä theme. This allows developers to make modifications or add new features, leveraging the styles.
• Hyvä child themes promote modularity in theme development. Hence, it will be easier for developers to build and manage custom features more structurally.
• Since the updates in the parent theme will be applied automatically to the child theme, you can create a future-ready store using Hyvä child themes.

Prerequisites for Creating a Hyvä Child Theme in Magento 2

Here is a checklist of all the essentials to create a child theme in Hyvä Magento 2: 

• Magento 2 Store Compatibility: Hyvä themes are compatible with Magento 2.3 and above. Ensure you upgrade your Magento store and that the instances run smoothly.
• Hyvä Parent Theme: If you are already a Hyvä theme user, you will have the Hyvä parent theme installed on your Magento 2 store. If you are migrating to Hyvä themes, you must purchase their license from their official website. 
• Hyvä Specific Tools: A developmental tool kit and knowledge of the language like Tailwind CSS and Alpine.js. Here, Hyvä themes use Alpine.js to handle frontend interactions and use Tailwind CSS for styling.

How to Create a Hyvä Child Theme in Magento 2?

Follow the below steps for Magento 2 to create a child theme  : 

Step 1: Create a Magento Theme Folder

Create a Magento theme folder for your child theme. This is how your child theme directory structure will look like: 

app
└── design
   └── frontend
       └── Vendor
           └── ChildTheme
               ├── etc
               │   └── view.xml
               ├── registration.php
               ├── theme.xml
               ├── web
               │   ├── css
               │   │   └── source
               │   │       └── tailwind.css
               │   └── tailwind.config.js
               └── composer.json

Step 2: Define The Theme’s Configuration

Next, create a ‘theme.xml’ file in the child theme directory with the following code base. 

<?xml version="1.0"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
 <title>Hyvä Child Theme</title>
 <parent>Vendor/hyva</parent>
 <media>
 <preview_image>media/preview.jpg</preview_image>
 </media>

</theme>

Step 3: Register the Theme With Magento 2

Create a registration.php file inside the folder path app/design/frontend/Hyva/ChildTheme. Here, add the mentioned lines in the code. 

<?php
use \Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/Vendor/hyva-child', __DIR__);

Step 4: Create a Composer file 

Head to app/design/frontend/Hyva/hyva_child/, create a composer.json file, and add the following code: 

{
"name": "hyva/hyva-child",
"description": "N/A",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"magento/luma": "100.0.*",
"magento/framework": "100.0.*"
},

"type": "magento2-theme",
"version": "2.2.1",
"license": [
"OSL-3.0",
"AFL-3.0"
],

"autoload": {
"files": [
"registration.php"
]
}
}

Step 5: Copy the web Folder from the Parent Theme

Head to vendor/hyva-themes/magento2-default-theme and copy the following directories to ensure the child theme gets the required assets from the parent theme.

app/design/frontend/Hyva/hyva_child/web/css

app/design/frontend/Hyva/hyva_child/web/js

app/design/frontend/Hyva/hyva_child/web/images

app/design/frontend/Hyva/hyva_child/web/tailwind

Step 6: Add an Image Preview

Now, place an image instead of the media folder of your child theme.

app/design/frontend/Hyva/hyva_child/media/preview.png

This image will appear in the Magento admin under Content > Design > Themes. Make sure while making these changes your project container has the following:

• Node.js version 16.0.0
• NPM version 7.10.0
• NPX 

Step 7: Update the Code in Tailwind config.js File

Now go to the tailwind folder app/design/frontend/Hyva/hyva_child/web/tailwind

And update the below code: app/design/frontend/Hyva/hyva_child/web/tailwind/tailwind.config.js

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),
  ]

Step 8: Add Necessary Dependencies 

Now, head to the Tailwind folder and add the necessary dependencies:

• Cd app/design/frontend/Hyva/hyva_child/web/tailwind
• npm install

After this, you will see a folder named node_modules created.  

Step 9: Add Custom Class

Use the custom classes in your CSS files:

app/design/frontend/Hyva/hyva_child/web/tailwind/theme/components/page.css

If needed, run the other necessary CSS. To generate other CSS, you may run

• npm run watch or
• npm run build-prod command

You can also run the npm command using a prefix from the root directory:

npm --prefix app/design/frontend/Hyva/hyva_child/web/tailwind run build-prod

Step 10: Run Magento Commands

Lastely run these commands: 

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

Once the Hyvä child theme is configured, you can check navigating to Content > Design > Configuration on the admin dashboard and set your child theme as ‘Main Website Store’. 

Once applied, you can check the implemented child theme visiting the frontend of your store. 

Fully Leverage on Hyvä Child Theme Capabilities

Amplify your customer experience by implementing Hyvä themes. 

Since these themes are easy to modify, they are recommended by experienced Magento experts in the domain. 

If you need technical support to fully leverage the capabilities of Hyvä child theme, we are ready to help you. We offer end-to-end Magento 2 Hyvä Development Services to benefit you to help your store reach new heights and perform at its best.