Themes in Magento 2: Creation, Inheritance and Hierarchy

There is a hereditary relationship between the themes (inheritance fallback mechanism) in Magento 2. This connection gives the advantage of easy editing and maintaining the themes during Magento 2 development. For example, you can create a theme with certain decorations, based on the basic design. Instead of copying the extensive theme files and changing what you want to change, you can add overriding and extending files.

The essence of the inheritance fallback mechanism is that if the view files are not found in the current theme, the system looks for these files in parent themes, modules or libraries.

Parent & Child theme

Parent theme is a common theme, e.g. Magento_blank theme, which comes with Magento 2 and does not have its parent theme. Or it’s a theme from which all the files for the child theme will be inherited.

A child theme is a theme whose files are inherited from a Parent theme. A Parent theme is specified in the child theme.xml file:

/app/design/frontend/(vendor)/(theme_name)/theme.xml

(<parent>Magento/Blank</parent>).

Unlike Magento 1, the number levels of inheritance in Magento 2 is not restricted. Let’s take a look at several examples of how to extend or override child theme files.

Layout files

The processing mechanism for layout files in the fallback system is not involved. The system collects layout in the following order:

1. Current theme layouts: <theme_dir>/<Vendor>_<Module>/layout/
2. Ancestor themes layouts, starting from the most distant ancestor, recursively until a theme with no parent is reached: <parent_theme_dir>/<Vendor>_<Module>/layout/
3. Module layouts for the frontend area: <module_dir>/view/frontend/layout/
4. Module layouts for the base area: <module_dir>/view/base/layout/

Unlike templates files, layout files can be easily supplemented. All you need is to create a new .xml file in the child theme in the layout folder of the required module.

For example, if you want to move the page title to the content block on the product catalog page, you need to create the catalog_product_view.xml file at \app\design\frontend\vendor_name\theme_name\Magento_Catalog\layout\catalog_category_view.xml and add the following content:

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Andrey

This will extend the layout, without overriding any other rules.

But if you still need to override the .xml file, you need to create a file with the same name as the overridden file at:

theme_dir/vendor_module/layout/override/theme/vendor_name/<ancestor_theme>

Template Files

The fallback scheme for templates is the following:

1. Current theme templates: <theme_dir>/<Namespace>_<Module>/templates
2. Ancestors themes templates, recursively, until a theme with no ancestor is reached: <parent_theme_dir>/<Namespace>_<Module>/templates
3. Module templates: <module_dir>/view/frontend/templates

If you need to override a template file, for example, a product directory file, you need to copy the file:

Magento_Catalog_module_dir\view\frontend\templates\product\list.phtml

along the way:

app\design\frontend\vendor_name\theme_name\Magento_Catalog\templates\product\list.phtml

and make the necessary changes to it. The same applies to static files (js, css, images, fonts and .less).

The specific directories, in which the system searches during the backup, depend on whether the module context for the file is known.

If the module context is not defined for the file:

1. Current theme static files for a specific locale (the locale set for the storefront): theme_dir/web/i18n/<locale>
2. Current theme static files: theme_dir/web/
3. Ancestor’s static files, recursively, until a theme with no parent is reached:
   • parent_theme_dir/web/i18n/<locale>
   • parent_theme_dir/web/
4. Library static view files: lib/web/

If the module context is defined:

1. Current theme and current locale module static files: theme_dir/Namespace_Module/web/i18n/<locale>/
2. Current theme module static files theme_dir/Namespace_Module/web/. Example: app/design/frontend/BelVg/BelvgTheme/Magento_Catalog/web/
3. Ancestor themes module static files, recursively, until a theme with no ancestor is reached:
   • parent_theme_dir/Namespace_Module/web/i18n/<locale>/
   • parent_theme_dir/Namespace_Module/web/
4. Module static view files for the current locale and frontend area: module_dir/view/frontend/web/i18n/<locale>/
5. Module static view files for the current locale and base area: module_dir/view/base/web/i18n/<locale>/
6. Module static view files for the frontend area: module_dir/view/frontend/web/
7. Module static view files for the base area: module_dir/view/base/web/

That’s it, thanks for reading. Hope the article has provided a deeper insight into the theme structure of Magento 2.