How to Create a Magento 2 Child Theme

Creating Child Magento 2 Theme from the original theme

Customizing your Magento 2 store is essential for branding and functionality. Creating a child theme is the best practice to make customizations without altering the parent theme's core files. This guide will walk you through the steps to create a Magento 2 child theme.

Step 1: Determine the Parent Theme

Identify the parent theme you wish to base your child theme on. This could be the default Magento/blank or a third-party theme.

Step 2: Create the Directory Structure

Create the following directory structure in your Magento installation:

app/design/frontend/<VendorName>/<ChildTheme>/
    

Example:

app/design/frontend/MyCompany/CustomTheme/
    

Step 3: Create the theme.xml File

In the etc directory of your theme, create a theme.xml file:

app/design/frontend/MyCompany/CustomTheme/etc/theme.xml
    

Add the following content:

<?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>
    

Step 4: Create the registration.php File

Create a registration.php file in your theme's root directory:

app/design/frontend/MyCompany/CustomTheme/registration.php
    

Add the following content:

<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::THEME,
    'frontend/MyCompany/CustomTheme',
    __DIR__
);
    

Step 5: Create a composer.json File (Optional)

Create a composer.json file in your theme's root directory:

app/design/frontend/MyCompany/CustomTheme/composer.json
    

Add the following content:

{
    "name": "mycompany/customtheme",
    "description": "Custom Magento 2 Child Theme",
    "require": {
        "php": "~7.3.0||~7.4.0||~8.1.0",
        "magento/theme-frontend-blank": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "1.0.0",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}
    

Step 6: Inherit and Override Parent Theme Assets

Your child theme automatically inherits assets from the parent theme. To customize, override specific files.

Override Styles

Create an _extend.less file to add custom styles:

app/design/frontend/MyCompany/CustomTheme/web/css/source/_extend.less
    

Add your custom LESS/CSS code:

/* Custom Styles */
.button {
    background-color: #F0582A;
}
    

Override Templates

To override a template, copy it from the parent theme or module to your child theme:

app/design/frontend/MyCompany/CustomTheme/<Module>/templates/<template_file.phtml>
    

Step 7: Enable and Apply the Theme

Run the following commands in your Magento root directory:

Then, in the Magento admin panel, navigate to Content > Design > Configuration and apply your new theme.

Step 8: Verify Your Theme

Clear your browser cache and check your storefront to see the applied customizations.

Troubleshooting

Issue: Custom Styles Not Applying

Solution: Verify the paths of your LESS/CSS files and ensure they are correctly compiled.

Issue: Template Overrides Not Working

Solution: Check that the overridden templates maintain the correct directory structure.

So ...

By following these steps, you've created a Magento 2 child theme that safely customizes your store without affecting the parent theme's core files. This approach ensures your customizations remain intact during updates, providing a robust and maintainable solution for your Magento store.

---