How to create a Hyvä child theme

Open Table of contents

Prerequisites
Step 1: Create the Hyvä child theme
Step 2: Copy the web directory
Step 3: Configure the Tailwind config file
Step 4: Generating CSS during development
Summary

Prerequisites

Before starting, ensure you have:

A Magento 2 instance with the Hyvä theme installed.
Node.js and npm installed for Tailwind CSS setup.
Access to the Hyva/default theme in your project (installed via composer).

Step 1: Create the Hyvä child theme

1. Create the directory structure

Create a new directory for your child theme:

Path: app/design/frontend/MyCompany/child

2. Add the `theme.xml` and `registration.php` files

Define the child theme and set its parent to Hyva/default:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>MyCompany Hyva/child</title>
    <parent>Hyva/default</parent> 
</theme>app/design/frontend/MyCompany/child/theme.xml

<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::THEME,
    'frontend/MyCompany/child',
    __DIR__
);app/design/frontend/MyCompany/child/registration.php

3. Enable the theme in Magento

Flush the Magento cache to activate the MyCompany/child theme:

bin/magento cache:flush

4. Verify and set the child theme

Navigate to the Magento Admin panel and check if the child theme is listed under Content > Design > Themes. Then, go to Content > Design > Configuration and set MyCompany Hyva/child as the theme for your store.

Step 2: Copy the `web` directory

Copy the web directory from the parent theme to the child theme.

Source: vendor/hyva-themes/magento2-default-theme/web/
Destination: app/design/frontend/MyCompany/child/web/

Step 3: Configure the Tailwind config file

Update the tailwind.config.js file in the child theme to customize Tailwind CSS settings:

app/design/frontend/MyCompany/child/web/tailwind/tailwind.config.js

module.exports = {
  // ...keep the original settings from tailwind.config.js
  // only add the path below to the purge > content settings
  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/MyCompany/child/web/tailwind/tailwind.config.js

Tailwind scans .phtml and .xml files for utility classes. Ensure these paths match your project structure to include all necessary files.

Step 4: Generating CSS during development

Hyvä integrates Tailwind CSS into the Magento frontend workflow. To dynamically generate and watch for CSS changes:

1. Install the required packages

Navigate to your child theme directory and install dependencies:

cd app/design/frontend/MyCompany/child/web/tailwind
npm install

2. Generating CSS during development

Run the following command to watch for changes and automatically regenerate the CSS:

cd app/design/frontend/MyCompany/child/web/tailwind
npm run watch

This command watches for changes in your .phtml and .xml files and regenerates the CSS output at:

app/design/frontend/MyCompany/child/web/css/styles.css

3. Generating CSS for production

To generate minified CSS for production, run the following command:

cd app/design/frontend/MyCompany/child/web/tailwind
npm run build-prod

This command creates a minified CSS file for optimal performance in production.

Summary

By following these steps, you can create and customize your Hyvä child theme:

Created the child theme directory with theme.xml and registration.php.
Set the parent theme to Hyva/default.
Copied the web directory to inherit assets like Tailwind CSS and JavaScript.
Configured the tailwind.config.js file for customization.
Set up CSS generation during development and production.

With this setup, you can now fully customize your Hyvä child theme to match your project requirements and enhance the user interface.

Happy theming! 🎉

Table of contents