How to create a child theme in magento 2
Today, I will show you how to create a child theme in Magento 2
By default, Magento provides us with two theme
- Blank theme
- Luma theme (This is a child theme of the Blank theme)
You can use these themes for your store, however, if you want to customize the default design or if you need to create your own theme, Magento strongly recommends not to change or edit the default Luma and Blank theme files.
- In this lesson, I will create a child theme called luma_child Inheriting from the Luma theme.
- Here I took the luma theme to be a parent theme, You can do the same with all the themes you have.
Step 1: Create the vendor named Alothemes in the path app\design\frontend
- Create the child theme named luma_child in the path app\design\frontend\Alothemes
- Create the file named theme.xml in the path app\design\frontend\Alothemes\luma_child
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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 your child theme layout and design.
Create a registration.php file in the path app\design\frontend\Alothemes\luma_child for registering your child theme.
ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/Alothemes/luma_child', __DIR__);
Create the file named composer.json in the path app\design\frontend\Alothemes\luma_child
- Create the etc folder in the path app\design\frontend\Alothemes\luma_child
+ Copy the file view.xml in the path vendor\magento\theme-frontend-luma\etc to the path app\design\frontend\Alothemes\luma_child\etc
- Create the media folder in the path app\design\frontend\Alothemes\luma_child
+ Copy the file preview.jpg in the path vendor\magento\theme-frontend-luma\media to the path app\design\frontend\Alothemes\luma_child\media
Step 2: Install the new theme
Run the commands line following:
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
Step 3: Apply the storefront to the new theme Go to the backend, then go to the Content -> Design -> Configuration
Go to the storefront to check the result.
Watch the guide video here