FixNBlog

To create Hyva child theme in Magento 2, you need to follow a structured process that ensures your customizations are preserved while the parent Hyva theme remains untouched. A child theme allows you to extend and modify the design or functionality without altering the core files of the parent theme. This approach is essential for maintaining compatibility with future updates of the Hyva theme. In this guide, we will walk through the process step by step, providing clear instructions for every part of the setup.

Prerequisites

• Ensure you have the Hyva theme installed in your Magento setup.
• You need access to the server or environment where your Magento store is hosted.
• Basic understanding of Magento 2’s theme structure and command line operations is recommended.

Step-by-Step Guide to Create Hyva Child Theme

Step 1: Create the Theme Folder

The first step is to create a directory for your child theme within the Magento theme structure.

• Navigate to the following path on your Magento installation:

app/design/frontend

• Inside this folder, create a directory named CustomTheme. This will be the vendor name.
• Inside the CustomTheme folder, create a folder called hyvachild.

Your directory structure should look like this:

app/design/frontend/CustomTheme/hyvachild

Step 2: Create the theme.xml File

The theme.xml file defines the theme’s metadata and parent theme inheritance.

• Inside the app/design/frontend/CustomTheme/hyvachild directory, create a file named theme.xml
• Add the following XML code to define your child theme and its parent (Hyva default):

<?xml version="1.0"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Custom Hyva</title>
    <parent>Hyva/default</parent>
    <media>
        <preview_image>media/preview.png</preview_image>
    </media>
</theme>

• The <title> tag represents the name of your Hyva Child Theme, which in this case is Custom Hyva
• The <parent> tag defines the parent theme, which should be Hyva/default
• The <preview_image> tag is optional but specifies the location of your theme’s preview image.

Step 3: Create the registration.php File

The registration.php file is required to register the Hyva Child Theme in Magento.

• Inside the same directory (app/design/frontend/CustomTheme/hyvachild), create a file called registration.php.
• Add the following PHP code to register the theme:

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/CustomTheme/hyvachild', __DIR__);

Step 4: Create the composer.json File

The composer.json file is essential for your theme’s dependency management.

• Inside the app/design/frontend/CustomTheme/hyvachild directory, create a file named composer.json.
• You can leave this file empty for now, or add dependencies if needed later.

Step 5: Copy the web Folder from the Hyva Parent Theme

Next, you need to copy the web folder from the Hyva parent theme into your child theme directory. This folder contains important assets like CSS, JavaScript, and images.

• Copy the web folder from the following location:

vendor/hyva-themes/magento2-default-theme/web/

• Paste it into the following directory:

app/design/frontend/CustomTheme/hyvachild

Your child theme’s folder should now contain a web directory with the necessary assets.

Step 6: Configure Tailwind in the Child Theme

Hyva uses Tailwind CSS for styling, and you need to ensure that your child theme can inherit styles from the parent theme.

• Open or create the tailwind.config.js file inside app/design/frontend/CustomTheme/hyvachild/web/tailwind.
• Add or uncomment the following lines to include the path to the parent theme’s .phtml files

module.exports = {
  ...
  purge: {
    content: [
        ...
        // parent theme in Vendor
        '../../../../../../../vendor/hyva-themes/magento2-default-theme/**/*.phtml',
        ...
    ]
  }
}

This configuration ensures that Tailwind’s purging mechanism works properly by scanning the .phtml files from both the parent and child themes.

Step 7: Set the Child Theme in Magento Admin

Once the child theme files are created, you need to activate the theme from the Magento Admin panel.

1. Go to the Magento Admin panel.Navigate to Content -> Design -> Configuration.
2. Select the store view where you want to apply the theme.
3. In the “Applied Theme” dropdown, select your child theme (Custom Hyva).Click “Save Configuration”

Step 8: Deploy Static Content

Before your theme is fully active, you must deploy the static content. This ensures that all CSS, JavaScript, and image files are properly generated for the new theme.

• Backup the pub/static folder. This step is optional but recommended to avoid losing any custom static files.

cp -r pub/static pub/static_backup

• Delete the current pub/static folder:

rm -rf pub/static/*

• Run the following command to deploy static content:

php bin/magento setup:static-content:deploy

• Clear and flush the cache:

php bin/magento cache:clean
php bin/magento cache:flush

Step 9: Test the Child Theme

After the static content is deployed and the cache is cleared, visit the frontend of your store to ensure the child theme is applied correctly. You should see the styles and layout from the child theme.

• Install Hyva Theme in Magento 2.4
• Hyva Documentation