Reading list Switch to dark mode

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

    Hello Coders,

    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 the 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 ?
    Read 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="" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">

    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.


    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.


    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": [
        "autoload": {
            "files": [

    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:


    To remove the review section from the product details page:

    <?xml version="1.0"?>
    <page layout="1column" xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
            <referenceBlock name="" remove="true" />
            <referenceBlock name="" remove="true" />

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



    This is the standard way to customize the UI. Like this, we can add or remove and customize the UI as per our requirements.

    Check our blogs: write theme-specific CSS in Magento 2?

    Thanks & Happy Coding !!

    . . .
    Add a comment

    Leave a Comment

    Your email address will not be published.

    Be the first to comment.

    Back to Top
    Customer service rep Abhishek & developer Abhinav have been helpful in resolving a few issues with the app eShopSync for BigCommerce. Very responsive and timely.
    Mildred Shao
    Global Sales Ops & CRM
    Talk to Sales


    Live Chat

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home