Below you can find two examples of a child theme. One for Magento default theme “Luma” and another one for our “Athlete2” theme. You can read instructions or simply download ready-made child theme examples.

Luma Child ThemeAthlete2 Child Theme

Luma Child Theme

To create child theme In Magento 2 you only need to create 2 files: theme.xml, registration.php and add preview image. In this example we will make child theme for Magento default theme Luma.

Child theme files are placed in app/design/frontend/<Vendor Name>/<Theme name> same as regular themes. Theme and vendor name can be anything. You simply define it in registration.php as path to files.

We called our child theme luma_child and placed it in Magento (Vendor Name) folder. So our child theme folder structure and files are following:

Magento/luma_child/theme.xml
Magento/luma_child/registration.php
Magento/luma_child/media/preview.png

theme.xml

In this file we define our parent theme. The vendor name for magento theme as you may understand is “Magento” and theme name is “luma”.

So we set parent value as Magento/Luma. This is the only important value here.

Also we need to set option name for our child theme so we can choose it in Magento settings. Lets call it “Luma Child Theme”. This is just an option name and will not affect anything, so you can actually call it whatever you want.

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

registration.php

In this file we define path to our child theme. In our example we placed it in Magento/luma_child folder. 

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

Now you only need to add some image in media folder of your child theme, e.g.: 

Magento/luma_child/media/preview.png

That’s all! We have defined parent theme and set path to the child theme. Our child theme is ready.

Upload it to app/design/frontend folder of your magento installation and set correct permissions and ownership.

Now you can choose it in Content / Design: Configuration

See Apply and configure a storefront theme

Also see After you apply child theme

Luma Child Theme Files

We have prepared package with luma child theme to save your time. Extract the package in app\design\frontend folder of your Magento installation.

Download

Athlete2 Child Theme

Same as for luma child theme you only need to create theme.xml, registration.php and add preview image. In this example we have set vendor name as “Olegnax” and called our child theme “a2_child”.

So our child theme folder structure and files are following:

Olegnax/a2_child/theme.xml
Olegnax/a2_child/registration.php
Olegnax/a2_child/media/preview.png

theme.xml

To make our theme child we need to set parent theme. We do this in theme.xml. For “athlete2” theme it will be <code>Olegnax/athlete2</code>. Also we set here option title, you will see it in Magent settings when you choose your theme. Name it so that you understand that this is your child theme e.g.: Athlete2 Child Theme.

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

registration.php

In this file we define path to our child theme. In our example we placed it in <code>Olegnax/a2_child</code> folder.

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Olegnax/a2_child',
    __DIR__
);

Add some image in media folder of your child theme, e.g.: 

Olegnax/a2_child/media/preview.png

That’s all, we have defined parent theme and set path to the child theme. Our child theme is ready.

Now you can choose it in Content / Design: Configuration. See Apply and configure a storefront theme

Athlete2 Child Theme Files

We have prepared package with athlete2 child theme to save your time. Extract the package in app\design\frontend folder of your Magento installation and set correct permissions and ownership.

Download

After you apply child theme

Do not add child theme in production mode, switch to developer first:

php bin/magento deploy:mode:set developer

After you choose your child theme in magento admin panel you need to clear cache and rebuild content. Run following commands from your magento folder:

rm -rf ./pub/static/*
rm -rf ./var/*
php bin/magento cache:clean
php bin/magento setup:static-content:deploy -f