How to Create Child Theme in Magento 2?

Sometimes, client demand needs changes within the parent theme. However, if the parent theme file is modified directly, we’ll not be able to upgrade it within the future. This is because if we upgrade the parent theme version we will lose all the changes. By making a child theme, we’ll be able to retain our customization and additionally maintain each the original theme and also customized theme in separate folders.

What is a theme?

A design theme is an important part of Magento. The theme is a collection of files like styles, templates, images, Javascript etc which effects on your website look to catch the user’s eyes.

What is a child theme?

The child theme is a theme inherit all the properties from parent theme and can help to customize the present parent theme style as per our website demand.

How to create child theme in Magento 2?

All the following steps are used to create child theme in Magento 2.

Note: In this example,
‘Simbeez’ as vendor name and
‘luma’ as parent theme name.

Step-1: Create child theme folder named as {parent-theme-name}_child

Path: Magento root folder/app/design/frontend/{theme-vendor-name}/

{parent-theme-name}_child

Example: Magento root folder/app/design/frontend/Simbeez/luma_child

Child theme name can be anything whatever you want.But if the name refers parent theme name, it would be easily understandable and developer friendly.

Step-2: Create a file theme.xml inside the child theme to specify the parent theme inherited by the child theme

Path: Magento root folder/app/design/frontend/{vendor-name}/{theme-name}/theme.xml

Example: Magento root folder/app/design/frontend/Simbeez/luma_child/theme.xml

Syntax

 

Note : In above code you can see <media> and <preview_image> tag , both are optional. It is used to display preview how your child theme looks like.If you don’t want to add you can write below code also.

 

But you want to add it you have to make media folder under your child theme and include image preview.png in media folder.

Path:Magento root folder/app/design/frontend/{vendor-name}/{theme-name}

/media/preview.png

Example: Magento root folder/app/design/frontend/Simbeez/luma_child/media/preview.png

 

Step 3: Create file registration.php for registering the child theme.

Path:Magento root folder/app/design/frontend/{vendor-name}/

{theme-name}/registration.php
Example: Magento root folder/app/design/frontend/Simbeez/luma_child/registration.php

Syntax

 

Example:

 

Step-4: Create composer.json

Path : Magento root folder/app/design/frontend/{vendor-name}/

{theme-name}/composer.json

Ex : Magento root folder/app/design/frontend/Simbeez/luma_child/composer.json

Code :

 

Code Example :

 

 

Step-5 : Create web directories inside the child theme with the below empty files and folder

Path : Magento root folder/app/design/frontend/{vendor-name}/{theme-name}/web

Ex : Magento root folder/app/design/frontend/Simbeez/luma_child/web

Step-6 : To run your child theme you have to run following command

1. 1. Give permission to magento root folder sudo chmod -R 777 magento_root_folder
   2. Deploy static content
   3. php bin/magento setup:static-content:deploy

Step-7 : Your child theme is created Successfully

Step-8 : You can see your created child theme in magento admin panel

Path : Go to your admin panel >> Content >> Theme

If you want to use your created child theme in store then

Go to admin panel >> Content >> Design >> Configuration >> Select child theme >> Save Config

If you enjoy this post I would be very grateful. Please come back here and tell us about before and after