Magento 2 Theme .xml File Basic Guide

Magento 2 theme .xml file basic guide

Now you probably are creating a custom theme to a Magento 2 website. In Magento 2 theme, .xml files usually determine the layout of web pages. This article gives you a basic knowledge of .xml files including function, location, and processing.

Magento 2 theme .xml file function

According to W3School, XML stands for eXtensible Markup Language, designed to store and transport data.

According to, XML is a simple text-based format for representing structured information: documents, data, configuration, books, transactions, invoices, and much more.

According to Wikipedia, XML is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable.

In Magento 2, the majority of .xml files represent the structure of the pages layout. Because XML does not carry any information about how to be displayed, the same XML data can be used in many different presentation scenarios in a Magento 2 site.

Magento 2 theme .xml file types

In Magento 2, .xml files are divided into 2 types: page layout and page configuration. These 2 file types make up the layout of any particular page of a Magento 2 website.

The Page layout file defines the page wireframe inside the <body> section of the HTML page markup. It divides the page into different blocks of container. Note that, page layout .xml files feature only containers.

On the other hand, page configuration .xml file defines detailed structure (page header, footer, etc.), contents and page meta information, including the page layout used.

Magento 2 theme .xml file location

In Magento 2, theme is one of the modules. However, while the .xml files in theme folder are used globally in all pages, .xml files in module folder are declared only in pages where the module is activated. Basically, .xml files are located in <module_directory>/view/frontend/layout/

Theme layout

The basic view of all Magento storefront pages is defined in two page configuration layout files located in the Magento_Theme module:

  • Page layout file: <Magento_Theme_module_dir>/view/frontend/layout/default.xml: defines the page layout. For example, vendor/magento/module-theme/view/frontend/layout/default.xml
    Magento 2 theme xml page layout file

  • Page configuration file: <Magento_Theme_module_dir>/view/frontend/layout/default_head_blocks.xml: defines the scripts, images, and meta data included in pages’ <head> section. For example, vendor/magento/module-theme/view/frontend/layout/default_head_blocks.xml
    Magento 2 theme page configuration xml file

In other Magento modules and in Magento themes, these basic page configuration layouts are extended.

Module layout

  • Page layout files: <module_dir>/view/frontend/page_layout.
  • Page configuration files: <module_dir>/view/frontend/layout. For example, vendor/magento/module-swagger/view/frontend/layout
    Magento 2 theme module lay out configuration xml file

Magento 2 .xml file processing

The Magento application processes .xml layout files in the following order:

  • Collects all layout files from modules, including theme, in the order determined in the module list from app/etc/config.php.
  • Identify the sequence of inherited themes [<parent_theme>, …, <parent1_theme>] <current_theme>
  • Repeat the sequence of themes from last ancestor to current:
    • Adds all extending theme layout files to the list.
    • Replaces overridden layout files in the list.
  • Merges all layout files from the list.

Magento 2 .xml file: in conclusion,

This article provides very basic information regardings Magento 2 theme .xml file. For more information about Magento 2 Layout, you can check out Magento DevDocs.

So do you have any question regarding .xml file in Magento 2? Let us know in the comment section below!

About Claire Parsons

Nice to meet you. I'm a copywriter, content writer & digital marketer living in Southend-on-Sea, U.K.
Previous 6 Fundamental Views Any Magento Theme Design Needs
Next [2018 Updated] Guide to Choose Premium Theme Designs for Magento 2 Websites

Check Also


5 Magento 2 eBay Theme You Should Never Miss!

If you are pursuing the dream, which is to construct a popular marketplace on your …

Leave a Reply

Your email address will not be published. Required fields are marked *