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.
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 “Embronic” and our theme folder is “CustomTheme“
- we should create a theme.xml file in the theme root folder with the following code:
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.
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:
By this code, The Review section will remove from our product details page without changing in the original theme file.
Result
This is the standard way to customize the UI. Like this, we can add or remove and customize the UI as per our requirements.