Allow Cookies
We use cookies to improve your experience, offer personalized recommendations.
For more details, please see our Cookie Policy.
Advanced options
Cookies setting

Cookies help us enhance your experience on our site by storing information about your preferences and interactions. You can customize your cookie settings by choosing which cookies to allow. Please note that disabling certain cookies might impact the functionality and features of our services, such as personalized content and suggestions. Cookie Policy

Cookie Policy
Essential cookies

These cookies are strictly necessary for the site to work and may not be disabled.

Information
Always enabled
Advertising cookies

Advertising cookies deliver ads relevant to your interests, limit ad frequency, and measure ad effectiveness.

Information
Analytics cookies

Analytics cookies collect information and report website usage statistics without personally identifying individual visitors to Google.

Information
mageplaza.com
  1. Home
  2. Blog
  3. How to Extend Layout - Mageplaza

How to Extend a Layout in Magento 2

Vinh Jacker | 03-17-2025

How to Extend Layout - Mageplaza

In Magento 2, you will have to work with the layout frequently. Layout customization includes multiple tasks that help you change any elements in your pages. To customize your layout, create extending and overriding layout files in your custom theme. All of these tasks can be done easily.

In today’s article, I will show you how to extend a layout in Magento 2.

Hire Magento Developers

What you need to do is only describing desired features of the Magento website, we will help you to build the store that ticks all the boxes!

Get Started
hire magento developers

How to Extend Layout in Magento 2 in 2 steps

Step 1: Create theme extending file

In the system of Magento 2, instead of going through various steps including copping extensive page layout or page configuration code, modifying things you want to change, you can just create an extending layout file that has all the changes that you want to make.

Add an extending page configuration or a generic layout file

For an extended page configuration or a generic layout file be added, the layout needs to be placed in the following location:

<theme_dir>
 |__/<Namespace>_<Module>
   |__/layout
     |--<layout1>.xml
     |--<layout2>.xml

Here is an example, if you want to customize the layout that is defined in <Magento_Catalog_module_dir>/view/frontend/layout/catalog_product_view.xml, a layout file with the same name need to be added in your custom theme, for example, <theme_dir>/Magento_Catalog/layout/catalog_product_view.xml

Example:

<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
       <move element="product.info.stock.sku" destination="product.info.price" after="product.price.final"/>
   </body>

Add extending page layout file

For an extended page layout file to be added, you need to put that file in the location down here:

<theme_dir>
 |__/<Namespace>_<Module>
   |__/page_layout
     |--<layout1>.xml
     |--<layout2>.xml

For example:

To customize the page layout defined in /view/frontend/page_layout/1column.xml, you should create a layout file with the same name (1column.xml) in your custom theme directory at /Magento_Theme/page_layout/1column.xml. You can then apply your desired modifications directly within that XML file.

Example:

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
   <update handle="empty"/>
   <referenceContainer name="page.wrapper">
       <container name="page.top.after" label="After Page Top" after="page.top"/>
   </referenceContainer>
</layout>

Step 2: Processing extending layouts

The following is how Layout files are merged by Magento:

#1. For each layout file that is included in the list

  • Layout handle declaration and layout instructions are loaded.
  • The result is appended in the following format:
<layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <handle id="checkout_cart_index" label="Shopping Cart" type="page" parent="default">
        <!-- Layout instructions from checkout_cart_index.xml -->
    </handle>
    <handle id="checkout_onepage_index" label="One Page Checkout" type="page" parent="default">
        <!-- Layout instructions from checkout_onepage_index.xml -->
    </handle>
    <!-- ... -->
</layouts>

The corresponding layout file’s name defines a handle ID, and the the root layout node’s attributes of this layout file define handle attributes.

#2. Finally, replace the base URL placeholders in the result.

Conclusion

Above, I have just provided two steps on how to extend a layout in Magento 2. Hope this post is helpful for you. If you have any questions or new ideas, feel free to leave a comment below.

Thank you for reading!

Jacker
Vinh Jacker

Jacker is the Chief Technology Officer (CTO) at Mageplaza, bringing over 10 years of experience in Magento, Shopify, and other eCommerce platforms. With deep technical expertise, he has led numerous successful projects, optimizing and scaling online stores for global brands. Beyond his work in eCommerce development, he is passionate about running and swimming.

Related Post

July 2025

July 2025

6 mins read | 07-30-2025
June 2025

June 2025

1 min read | 06-30-2025
July 2025

July 2025

6 mins read | 07-30-2025