Back to Top

How to create your own theme in Hyvä Theme?

Updated 25 April 2024

There are two ways to create your own theme

  1. By creating a child theme like default Magento works
  2. By duplicating hyva-themes/magento2-default-theme and modify that

As a beginner, we will go for the first way and later we will create a separate blog for the second approach

To create a child theme is Hyvä theme is slightly the same as the default Magento 2 except for adding a few more steps in Hyvä will see in this blog.

Step 1

Create a folder Webkul/hyva_child inside the “app/design/frontend”

Step 2

create a theme.xml file inside the folder path “app/design/frontend/Webkul/hyva_child” and in the theme.xml file add the few lines of code

Searching for an experienced
Magento 2 Company ?
Find out More
<theme xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Hyva Webkul</title>

Step 3

create a registration.php file inside the folder path “app/design/frontend/Webkul/hyva_child” and in the registration.php file add the few lines of code


Step 4

create a composer.json file inside the folder path “app/design/frontend/Webkul/hyva_child” and in the composer.json file add the few lines of code

    "name": "webkul/theme-frontend-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": [
    "autoload": {
        "files": [

Step 5

Copy web folder from vendor/hyva-themes/magento2-default-theme/web/ to the app/design/frontend/Webkul/hyva_child . Because in later you will do customize css for that it will be required to add in purgeCSS. If you are not aware of TailwindCSS please check this blog Working with TailwindCSS in Hyvä  Theme.

Also check the tutorials of TailwindCSS by creators : –

Step 6

You must configure the parent theme path in the web/tailwind/tailwind.config.js file of your child theme. To do this check this code in app/design/frontend/Webkul/hyva_child/web/tailwind/tailwind.config.js and just uncomment the line below the commented line written with “parent theme in Vendor”. if this line is not available then add this line as shown in the code below.

module.exports = {
  // keep the original settings from tailwind.config.js
  // only add the path below to the purge > content settings
  purge: {
    content: [
        // parent theme in Vendor

Step 7

Go to the Admin Dashboard Content->Design->Configuration and select your child theme Hyva Webkul from the dropdown and save and Flush the cache.


Step 8

Take a backup of pub/static folder for images, CSS, and js. Also, delete the static folder and run static content deploy

php bin/magento setup:static-content:deploy

Extending your theme works just like with default Magento Themes. You can override .pthml files and extend layout xml the same way as you could with a default Magento theme based on Luma.

Previous blog Working with TailwindCSS in Hyvä  Theme

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home