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

To organize and manage all your custom themes, create a child theme directory. This will ensure that all your custom themes are stored in one central location.

../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_umino_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 now ready for use. Follow these steps to apply it to your Magento store:

Step 1: Login to your server via SSH using tools like Putty or Termius.

Step 2: Navigate to the root directory of your Magento installation.

Step 3: Execute the following commands:

php bin/magento cache:flush

php bin/magento indexer:reindex

php bin/magento setup:upgrade

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

If you are using Linux, set the appropriate permissions by running this command:

sudo chmod 777 -R generated/ var/ pub/

Step 4: In the Admin panel, go to Content -> Design -> Themes. Your new child theme should be listed here.

Next, visit Stores -> Configuration -> Design. Choose “Main Website” in front of “Store View” at the top left, and then click Design -> Design Theme.

Uncheck the “Use Default” option and select your newly created child theme. Don’t forget to click “Save Config” and clear your cache.

By following these steps, your custom child theme will be applied to your Magento store.