Magento Theme: Customize Theme (Child-Theme-Concept)

Hello Friends,

In this post, we will check how to customize the existing theme with child theme concepts.

We always get the requirement to customize the theme or add some new features to the existing theme, then most of the developers make changes to the original theme or add customization to the original theme – This is the wrong way.

We should not make changes to the existing original theme. For the theme customization, We should follow the Magento – Child Theme Concepts.

In this post, we will see how to create a child theme of an existing theme and make customization in an existing theme.

Searching for an experienced
Magento 2 Company ? Find out More

Step 1 > To customize any theme, first, we should create a child theme. Magento 2 themes are located in the /app/design/frontend folder, so First, we have to create a Vendor folder and then create a theme folder inside of it.

For example, our Vendor folder is “Webkul” and our theme folder is “CustomTheme“

we should create a theme.xml file in the theme root folder with the following code:

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

Tags mentioned in the theme.xml file
1. title: Title for the child theme.
2. parent: We have to specify the parent theme path for the child theme.
3. preview_image: This image will refer to the child’s theme layout and design.

Step 2 > To register the theme into the system, we need to create a registration.php file at the root directory of the theme folder.

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

Now, run the Magento setup: upgrade and deploy commands and check our custom theme is available in the Admin area.

Proceed to the section Content —> Design —> Themes and you will find your custom theme has been mentioned in the list.

If you apply the custom theme then proceed with Content → Design → Configuration and then click Edit for the website or web store that you want to apply your theme to. Select a theme and save settings.

Default-Store-View-Design-Content-Magento-Admin

After the Applied theme, the website is still working properly, this is because our custom theme is a child theme of Luma and it inherits all the CSS and JS from his parents.

Step 3 > This step is not necessary, but if you want to spread a theme as a composer package then you need to create a composer.json file in the root directory.

{
    "name": "Webkul/CustomTheme",
    "description": "This is a Custom Theme",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "Webkul/CustomTheme": "100.0.*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "100.0.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Through these simple 3 steps, Our child theme has been created and installed. Now,

Let’s, check the product details page (catalog_product_view.xml) for customization using our custom theme.

By default, there are three tabs on the product page:
– details about the product i.e. description
– more information that stores product attributes and values
– reviews provided by products buyers and consumers

Removing product tabs

For this, we have to create the layout file (catalog_product_view.xml) in our custom theme directory:

<theme_dir>/Magento_Catalog/layout/catalog_product_view.xml

To remove the review section from the product details page:

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="product.info.review" remove="true" />
        <referenceBlock name="reviews.tab" remove="true" />
    </body>
</page>

By this code, The Review section will remove from our product details page without changing in the original theme file.

Result