How to Create Child Theme in Magento 2

Hello Magento Friends,

Today I will be explaining How to Create a Child Theme in Magento 2.

Before moving to the steps, first, let’s understand What a theme is in Magento 2 and Why you must create a child theme in Magento 2.

What is a Theme in Magento 2?

A theme is an important component of the Magento 2 store. It is a combination of styles, layout, templates, and images to give a consistent look and feel to the store.

Magento 2 by default provides two themes:

1. Magento Blank
2. Magento Luma

Learn – How to Change Theme In Magento 2

What is the Child Theme in Magento 2?

A child theme is the inheritance of a parent theme with all the properties. It helps to create customization as per the business requirements.

Why is it required to Create a Child Theme in Magento 2?

Sometimes it is required to add customization to the theme. The parent theme installed using composer is stored in the vendor directory. Updating those themes will replace the changes and we will not be able to update in the future. Creating a child theme is the option to get the customization done in a different folder as well as maintain the original theme.

Steps to Create a Child Theme in Magento 2:

Step 1: Create a child theme folder named luma_child in the following folder path: 

app\design\frontend\Vendor\luma_child

Step 2: Create theme.xml at the given below path

app\design\frontend\Vendor\luma_child\theme.xml

Now, add the code as follows

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Luma Child</title>
    <parent>Magento/luma</parent>
    <media>
        <preview_image>media/preview.png</preview_image>
    </media>
</theme>

Step 3: Create registration.php at the following path

app\design\frontend\Vendor\luma_child\registration.php

Then, append the below-mentioned code

<?php

 \Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Vendor/luma_child',
    __DIR__
 );

Step 4: Create composer.json at the given below path

app\design\frontend\Vendor\luma_child\composer.json

Add the following code

{
    "name": "vendor/theme-frontend-luma-child",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0|~7.1.0|~7.2.0|~7.3.0|~7.4.0|~8.1.0",
        "magento/luma": "100.0.*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "100.0.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Conclusion:

Hence this way you can create a child theme in Magento 2. If you are unable to successfully create a child theme, let me know through the comment section.

Found this tutorial useful? Share with your friends and stay connected for more!

Happy Reading!

Subscribe to Notifications