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 namedtheme.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 child theme, which in this case isCustom 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 theme in Magento.
- Inside the same directory (
app/design/frontend/CustomTheme/hyvachild
), create a file calledregistration.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 insideapp/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.
- Go to the Magento Admin panel.Navigate to
Content -> Design -> Configuration
. - Select the store view where you want to apply the theme.
- 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.
Leave a Reply