Creating a Magento 2 Child Theme
Customizing your Magento 2 store without touching core files is best done via a child theme. Follow these steps to base your theme on an existing parent, inherit assets, and override only what you need.
Step 1: Determine the Parent Theme
Choose a parent—e.g. Magento/blank or a third-party theme.
Note: Using
Magento/blank offers maximum flexibility.Step 2: Create Directory Structure
Create your theme folder under:
app/design/frontend/<Vendor>/<ChildTheme>
Example:
app/design/frontend/MyCompany/CustomTheme
Note: Replace
MyCompany and CustomTheme accordingly.Step 3: Create theme.xml
In etc/theme.xml:
app/design/frontend/MyCompany/CustomTheme/etc/theme.xml
<?xml version="1.0"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Custom Theme</title>
<parent>Magento/blank</parent>
</theme>
Note: Ensure
<parent> matches your parent theme identifier.Step 4: Create registration.php
At your theme root:
app/design/frontend/MyCompany/CustomTheme/registration.php <?php use Magento\Framework\Component\ComponentRegistrar; ComponentRegistrar::register( ComponentRegistrar::THEME, 'frontend/MyCompany/CustomTheme', __DIR__ );
Note: The path in
ComponentRegistrar::register must match your folder structure exactly.(Optional) Step 5: Create composer.json
Allows Composer-driven installs:
app/design/frontend/MyCompany/CustomTheme/composer.json
{
"name": "mycompany/customtheme",
"description": "Magento 2 Child Theme",
"require": {
"php": "~8.1.0",
"magento/theme-frontend-blank": "100.0.*"
},
"type": "magento2-theme",
"version": "1.0.0",
"autoload": { "files": ["registration.php"] }
}
Note: Adjust PHP version and parent dependency to match your environment.
Step 6: Inherit & Override Assets
Override Styles
Create web/css/source/_extend.less:
app/design/frontend/MyCompany/CustomTheme/web/css/source/_extend.less
/* Custom Styles */
.button { background-color: #F0582A; }
Override Templates
Copy the module template keeping the same path:
app/design/frontend/MyCompany/CustomTheme/Module_Name/templates/file.phtml
Note: Preserve the directory hierarchy when overriding.
Step 7: Enable & Apply Theme
From Magento root run:
php bin/magento setup:upgrade php bin/magento setup:static-content:deploy -f php bin/magento cache:flush
Then in Admin: Content > Design > Configuration → select your “CustomTheme.”
Step 8: Verify & Troubleshoot
Clear browser & Magento caches, then refresh your storefront.
Note: If styles or templates don’t appear, confirm you deployed static content and flushed caches.
Final Note: Always back up and test in a development environment before deploying changes to production.
