How to create child theme in Magento 2?

Magento 2 child theme is a theme that inherits styles and properties from a parent theme. Child theme allows you to modify and customize design and functionality of your Magento store without need to directly modify the core files of the parent theme. Main advantage of the Magento child theme is that you  can customize your store's look and features, and still get benefits from updates and improvements made to the parent theme.

What is needed to create a child theme in Magento 2?

3 things are needed to Magento 2 child theme – 2 files (theme.xml and registration.php), plus you will need to add a preview image. Let’s make a child theme for Magento 2 default theme – Luma.

Create a name for your child theme, for an example we use luma_child  and then place it Vendor Name folder, let’s call it My company, but you can select whatever  name you like. So the structure of our child theme will look like this:

My company/luma_child/theme.xml
My company/luma_child/registration.php
My company/luma_child/media/preview.png

Theme.xml Creation

Let’s define our parent theme. The vendor name is My company and luma is set for theme name.
The only important value here is My Company and luma.

Also, you will need to define a name for your child theme, in this article we call it “Luma Child Theme”, but feel free to choose any name that you like

<theme xmlns:xsi=""
    <title>Luma Child Theme</title>
    <parent>My company/luma</parent>

Let’s continue with registration.php

In this file we define path to our child theme. For an example, we placed it in My company/luma_child folder

\My company\Framework\Component\ComponentRegistrar::register(
    \My company\Framework\Component\ComponentRegistrar::THEME,
    'frontend/My company/luma_child',

The final part of creation of your Magento child theme, is adding some image in the media folder:


You are all set l! Your child theme is ready. 

You can select your theme in Content / Design: Configuration, and set correct permissions and ownership in app/design/frontend folder

How can we help you?

Didn’t you find the answer to your question? We are always happy to help you out.

© 2009-2024 Amasty. All Rights Reserved.