Create Child Theme

Why do you need Create Child Theme in Magento 2

If you want to modify certain aspects of the our theme preserving the original files and ensuring all changes are saved after Magento is updated, you need to create a child theme.

Theme inheritance enables you to easily extend themes and minimize the maintenance efforts. You can use an existing our theme as a basis for customizations, or minor store design updates, like holidays decoration. Rather than copy extensive theme files and modify what you want to change, you can add overriding and extending files.

How to Create Child Theme in Magento 2

Create a child theme so that all your custom themes in go here:

../app/design/frontend/company_name/theme_name

• company_name: is your company name

• theme_name: is child theme

The theme has the following directory structure:

<app>
     <design>
          <frontend>
              <company_name>
                  <theme_name>
                      <media>
                           preview.png
                      <web>
                           <css>
                           <fonts>
                           <images>
                           <js>
                  theme.xml
                  registration.php

• company_name -> is the name of the theme package

• theme_name -> is the name of the theme. Use multiple theme names inside the company_name folder.

• media/preview.png -> is the preview of the current theme.

• web -> is a directory that contains all the theme’s static data including images, styles, javascript, fonts, etc.

• registration.php -> is a file required for registering your new theme to the Magento 2 system.

• theme.xml -> is a compulsory file that defines your theme name, its parent, and (optionally) theme’s preview image.

Now, it is necessary to create theme files.

../app/design/frontend/company_name/theme_name/theme.xml

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

../app/design/frontend/company_name/theme_name/registration.php

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

Your new child theme is ready. You need run deploy, clear the cache and select it from admin.

Step 1: Login SSH via putty or termius

Step 2: cd to root magento folder

Step 3: Run command:

• php bin/magento cache:flush

• php bin/magento indexer:reindex

• php bin/magento setup:upgrade

• php bin/magento setup:static-content:deploy -f

• chmod 777 -R pub var generated (If you use Linux)

Step 4: In the Admin, go to Content -> Design -> Themes. Your theme should be listed here. Now, visit Stores -> Configuration -> Design. Choose “Main Website” in front of “Store View” at top left and click Design -> Design Theme. One of the last steps requires unchecking “Use Default” and picking your theme. Don’t forget to click “Save Config” and clear your cache.