The theme defines the look and feel of your store. One for Magento default theme “Luma”. If you want to changes in existing theme then you have to create a child theme of the existing theme rather than implementing the changes in the parent theme.

Why should I make a child theme?

Because, if the changes are directly done in the parent theme, upgrading the Magento version or upgrading the theme results in loss of theme changes in the parent theme.

Steps to create Child Theme:

Vendor Name: InnovationM

Parent Theme name: luma

1. Create a folder of child theme “luma_child’ in the below-mentioned folder path.

Magento root app/design/frontend/Innovationm/luma_child

2. Create file theme.xml inside the child theme

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

       xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">

    <title>{Child Theme Name}</title>

    <parent>{parent-theme-vendor-name}/{parent-theme-name}</parent>

    <media>

        <preview_image>media/preview.png</preview_image>

    </media>

</theme>

Example:

<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>

3. Create a registration.php file for registering your child theme.

<?php

\Magento\Framework\Component\ComponentRegistrar::register(\Magento\Framework\Component\ComponentRegistrar::THEME,

    'frontend/{theme-vendor-name}/{parent-theme-name}_child',

    __DIR__

);

Example:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

    \Magento\Framework\Component\ComponentRegistrar::THEME,

    'frontend/Innovationm/luma_child',

    __DIR__

);

4. Create composer.json

{

    "name": "{theme-vendor-name}/theme-frontend-{parent-theme-name}-child",

    "description": "N/A",

    "require": {

        "php": "~5.5.0|~5.6.0|~7.0.0|~7.1.0|~7.2.0|~7.3.0",

        "{parent-theme-vendor-name}/{parent-theme-name}": "100.0.*",

        "magento/framework": "100.0.*"

    },

    "type": "magento2-theme",

    "version": "100.0.1",

    "license": [

        "OSL-3.0",

        "AFL-3.0"

    ],

    "autoload": {

        "files": [

            "registration.php"

        ]

    }

}

Example:

{

    "name": "innovationm/luma_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": [

        "OSL-3.0",

        "AFL-3.0"

    ],

    "autoload": {

        "files": [

            "registration.php"

        ]

    }

}

5. Create a web directory inside the child theme with the following empty directories and files. The whole directory
6. 
7. Provide access/permission for child theme directories and files. Go to the child theme directory in the terminal and run this command to give permissions for the child theme directory: chmod -R 777 *.
8. The admin panel shows the created child theme.

Go to Admin -> Content ->Themes

Go to Content > Design > Configuration.

Select the child theme

Save

Run the commands

php bin/magento cache:clean

php bin/magento cache:flush

 

8. The newly created child theme will also deploy in the pub/static folder.

Conclusion

Our Blog helps to change the appearance of the existing themes by creating a child theme. You can go now customize our child theme.

We hope this post is useful. HAPPY CODING 🙂