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
Create a child theme so that all your custom themes in go here:
../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:
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
../app/design/frontend/company_name/theme_name/registration.php
Your new child theme is ready. You need run deploy, clear the cache and select it from admin.
Step 1: Login SSH via putty or termius
Step 2: cd to root magento folder
Step 3: Run command:
php bin/magento cache:flush
php bin/magento indexer:reindex
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
chmod 777 -R pub var generated (If you use Linux)
Step 4: In the Admin, go to Content -> Design -> Themes. Your theme should be listed here. Now, visit Stores -> Configuration -> Design. Choose “Main Website” in front of “Store View” at top left and click Design -> Design Theme. One of the last steps requires unchecking “Use Default” and picking your theme. Don’t forget to click “Save Config” and clear your cache.
Last updated