Skip to content
intermediate Phase 53 · Theme Architecture

Parent/Child Theme Relationship

Understanding parent/child theme inheritance in Magento 2: overriding, customization, and building custom themes from Blank or Luma

45m
0 problems
Topic Progress 0%

Parent/Child Theme Basics

Creating a Child Theme

theme.xml with Parent

<?xml version="1.0"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/theme.xsd">
    <title>Amazon Prep Child</title>
    <parent>Magento/luma</parent>
</theme>

registration.php

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

ComponentRegistrar::register(
    ComponentRegistrar::THEME,
    'frontend/Amazon/PrepChild',
    __DIR__
);

Inheritance Chain

Amazon/PrepChild
    ↓ inherits from
Magento/luma
    ↓ inherits from
Magento/blank

What Gets Inherited

Asset Type Inherited? Override Method
Templates (.phtml) Yes Place in same relative path
CSS/LESS files Yes Place in same relative path
JavaScript files Yes Place in same relative path
Images Yes Place in same relative path
Layout XML Yes Use layout files in view/frontend/layout/
Block classes Yes Use class preferences in di.xml
Static files Yes Override in web/ directory

Overriding Templates

Template Override Structure

Parent theme: Magento/luma/Magento_Catalog/templates/product/list.phtml

Child override: Amazon/PrepChild/Magento_Catalog/templates/product/list.phtml

Override Process

  1. Identify the template path in parent theme or module
  2. Create the same relative path in your child theme
  3. Copy and modify the template

Example Override

Parent (Luma):
Magento/luma/Magento_Catalog/templates/product/view/addto.phtml

Child (PrepChild):
Magento_Catalog/templates/product/view/addto.phtml

Custom Module Templates

Override templates from custom modules:

app/design/frontend/Amazon/PrepChild/
└── Amazon_Prep/
    └── templates/
        └── widget/
            └── custom.phtml

Checking Template Path

Enable template path hints:

bin/magento dev:template-hints:enable
bin/magento cache:clean

This shows the full path of each template in the rendered HTML.

Overriding Static Assets

CSS/LESS Override

Parent: Magento/luma/web/css/source/_extend.less

Child: web/css/source/_extend.less

// Child theme's _extend.less
@primary-color: #ff6600;
@font-size-base: 16px;

.header {
    background-color: @primary-color;
}

JavaScript Override

Parent: Magento/luma/web/js/custom.js

Child: web/js/custom.js

define(['jquery'], function($) {
    'use strict';
    
    return function(config) {
        // Custom implementation
        console.log('Child theme JS loaded');
    };
});

Image Override

Parent: Magento/luma/web/images/logo.svg

Child: web/images/logo.svg

Static File Deployment

# Deploy static files for child theme
bin/magento setup:static-content:deploy -f --theme=Amazon/PrepChild

# Or deploy all themes
bin/magento setup:static-content:deploy -f

CSS Compilation

# Compile LESS to CSS
bin/magento setup:static-content:deploy -f --theme=Amazon/PrepChild

# Or use development mode
bin/magento deploy:mode:set developer

Layout Override Strategies

Layout XML Override

Parent layout: Magento/luma/view/frontend/layout/catalog_product_view.xml

Child layout: app/design/frontend/Amazon/PrepChild/Magento_Catalog/layout/catalog_product_view.xml

Common Override Patterns

Add Block to Product Page

<!-- child layout file -->
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="product.info">
            <block class="Amazon\PrepChild\Block\Warranty"
                   name="product.warranty"
                   template="warranty.phtml"
                   after="product.info.price"/>
        </referenceBlock>
    </body>
</page>

Remove Existing Block

<referenceBlock name="product.info.review" remove="true"/>

Change Block Class

<referenceBlock name="product.info" 
               class="Amazon\PrepChild\Block\CustomProductInfo"/>

Layout Merge Strategy

  1. default.xml from all themes merged
  2. Page-specific handles merged
  3. Later themes override earlier ones
  4. remove="true" takes precedence over additions

Quiz

1. How do you override a parent theme's template?

Question 1 options

2. Which theme has higher priority for file resolution?

Question 2 options

3. What is the default parent theme for custom themes?

Question 3 options

Flashcards

Question

How do you set a parent theme?

Click to reveal answer

Answer

Add <parent>Magento/luma</parent> in theme.xml

Question

How do you override a template?

Click to reveal answer

Answer

Create the same relative path in your child theme

Question

What takes precedence in file resolution?

Click to reveal answer

Answer

Child theme > Parent theme > Blank > Core

Question

How do you check template paths?

Click to reveal answer

Answer

bin/magento dev:template-hints:enable

Question

Where do child theme overrides go?

Click to reveal answer

Answer

app/design/frontend/Vendor/Theme/Magento_Module/...

Revision Notes

Key Takeaways

  • 1. Child themes inherit all files from parent themes
  • 2. Override by placing files in the same relative path
  • 3. Child theme files always take precedence
  • 4. Layout XML merges from all themes in the inheritance chain
  • 5. Use template path hints to identify template locations

Interview Tips

  • • Explain the parent/child inheritance relationship
  • • Know how to override templates and static assets
  • • Discuss when to use Blank vs Luma as parent
  • • Be ready to create a child theme from Luma

Cheat Sheet

Parent theme: <parent>Magento/luma</parent>

Override template: Same relative path in child
Override CSS: web/css/source/_extend.less
Override JS: web/js/module.js
Override layout: view/frontend/layout/handle.xml

Priority: Child > Parent > Blank > Core