Hyva Theme Installation And Create Child Theme In Magento 2

In this article we are going to install and create a child theme from Hyva theme. Hyva theme is a modern front end framework designed specially for Magento 2. The Hyva is different compare to the default Luma theme of Magento. It focuses on performance, simplicity and streamlined development and hence the reason most Magento store owners and moving toward Hyva.

Technologies used in Hyva theme

The theme uses Alpine JS and Tailwind CSS which reduces the reliance on the heavy JavaScript libraries like jQuery and Knockout JS. Any website important thing is the load time as compare to Knockout the lightweight Alpine play an important role to speed up the website load time. Comparing the Luma and other themes which rely on Knockout and its own dependency like jQuery, Require.js. If speed matter then you should go with the Hyva theme.

Installing Hyvä theme

To install the theme we will need to have a Magento 2 setup done. I will be following the article Easily Configure Magento 2 on Docker in Windows where I had done a setup of Magento using a docker. You can follow that if you have not done the setup.

Theme license

You will need a valid license to download and install the Hyva theme. You can get the license from their official website https://www.hyva.io/hyva-theme-license.html. The license cost 1000 Euros and its one time purchase.

Installation via composer

After getting the license you need to go to root directory of Magento and enter the following command.

bin/composer config --auth http-basic.hyva-themes.repo.packagist.com token <Your token>

The above command will add the token to your project auth.json. You can either enter above command or you can directly add the token in your auth.json file like below.

{
    "http-basic": {
        "hyva-themes.repo.packagist.com": {
            "username": "token",
            "password": "<token>"
        }
    }
}

Next command need to add the package url. To do so run the following command along.

bin/composer config repositories.private-packagist composer https://hyva-themes.repo.packagist.com/<yourProjectName>/

After configuring above these the next command will install the packages of hyva theme in your Magento project. Run the following command to do so.

bin/composer require hyva-themes/magento2-default-theme

I am using bin/<command> reason for that is I have done the setup using docker. You can directly use the composer command if you have installed your Magento on the server or on your local.

Lastly we will run the 3 Magento commands as you do when you install a new Modules.

bin/magento setup:upgrade; bin/magento setup:di:compile; bin/magento setup:static-content:deploy -f

Setting theme

Once the above commands are completed then you need to login into admin of Magento and go to Content > Design > Configuration and select the Hyvä default for the default store view. After saving be sure to clear the cache either via command or using admin.

Open the store front url of Magento on your browser and you should see a difference like below.

Additional steps

There are few more commands needed to be ran. Firstly we will disable default Magento 2 captacha. The Hyva theme doesn’t support the traditional Magento 2 Captacha. You can run the following command or you can do it in the Magento 2 configuration. Which is Stores > Settings > Configuration > Customers > Customer Configuration

bin/magento config:set customer/captcha/enable 0

Next thing is we need to disable the built-in minification as it doesn’t provide any benefit and may also cause performance problems. Run all the commands below.

bin/magento config:set dev/template/minify_html 0
bin/magento config:set dev/js/merge_files 0
bin/magento config:set dev/js/enable_js_bundling 0
bin/magento config:set dev/js/minify_files 0
bin/magento config:set dev/js/move_script_to_bottom 0
bin/magento config:set dev/css/merge_css_files 0
bin/magento config:set dev/css/minify_files 0

Create Hyva child theme

As most store owner will ask to their develop to do this. The build-in features are not complete according to the store owner business need and will have to make changes as per the requirements. As we all do we should not make any modification to the vendor directory. Same case with the Hyva theme. So we will make a child theme.

Creating a child theme is not same as of other Magento themes like Luma where we just create two files and place the parent and that’s it. Here we will need to copy one of the directory from parent and change some path in one of the file inside the child. So lets begin

theme.xml

The first file we will be creating is theme.xml file, so create a new directory under app/design/frontend this will be the company name. We will give the name as MagentoHyva. Under MagentoHyva we will create the theme directory and name it as LearnHyva. Now we will create theme.xml file under LearnHyva and add the following code in it.

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Learn Hyva theme</title>
    <parent>hyva/default</parent>
</theme>

Our theme name will be Learn Hyva theme. We need to pass the parent theme as hyva/default as a parent to it.

registration.php

The registration file same like the module but here we will be registering a theme. Add the following code to registration.php file.

<?php

use \Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/MagentoHyva/LearnHyva', __DIR__);

Tailwind config parent theme path

This step we only need to do when we are creating a Hyva theme child. We need to copy the web directory of parent theme “Hyva default theme” and paste it inside the child theme directory which is in our case LearnHyva. Now open the file app/design/frontend/MagentoHyva/LearnHyva/web/tailwind/tailwind.config.js and uncomment the last few lines like below I did for my theme.

  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
  // Examples for excluding patterns from purge
  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',
  ]
});

Hyva theme installation and create child theme in magento 2

Table of Contents