When building a Magento 2 store, customizing the layout is crucial for creating a unique user experience. In this tutorial, we’ll explore how to create a new layout in Magento 2, as well as extend and override existing ones to meet your store’s specific design needs. Let’s dive into the process of Magento 2 create new layout to enhance your storefront’s functionality and appearance.
Magento 2 Create New Layout: 3 Easy Steps
Table of Contents
In Magento 2, you can create a custom layout in the custom theme or in the custom module. Please follow these steps to create a new layout in Magento 2:
Step 1: Create a page layout
You need to create the layout-new.xml file:
In the custom module:
Namespace/Module/view/frontend/page_layout/layoutnew.xml
In the custom theme:
app/design/frontend/<VendorName>/<ThemeName>/Magento_Theme/page_layout/layoutnew.xml
<?xml version="1.0"?> <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="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/> <container name="page.top" as="page_top" label="After Page Header" after="header.container"/> </layout>
Step 2: Add this new layout to the layouts.xml file
Trong custom module:
Namespace/Module/view/frontend/layouts.xml
Trong custom theme:
app/design/frontend/<VendorName>/<ThemeName>/Magento_Theme/layouts.xml
<?xml version="1.0" encoding="UTF-8"?> <page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd"> <layout id="layoutnew"> <label translate="true">New layout</label> </layout> </page_layouts>
Step 3: Flush cache and check the result
Go to Admin System Cache Management > Flush Magento Cache to flush cache or use this command:
command: bin/magento cache:clean
The new page layout is displayed in the drop-down list of the layout option.
>>> READ MORE: Magento Tutorial For Beginners: Everything You Need to Know
Magento 2 Extend Layout
You’ll have to tweak the layout a lot in Magento 2. Layout customization entails several jobs that allow you to modify any element on your site. Create extending and overriding layout files in your custom theme to change your layout. All of these chores are simple to complete.
Extend layout is used to modify default files without any replacement.
In Magento 2, this is how to extend a layout.
#1. Create the extend file in the theme
- Add the extending file to page configuration or generic layout
To extend the layout, you need to place the layout file in the following position:
<theme_dir> |__/<Namespace>_<Module> |__/layout |--<layout1>.xml
For example: You want to modify this layout file:
vendor/magento/module-customer/view/frontend/layout/customer_account.xml
It is necessary to add a layout file with a similar name in the custom theme:
<theme_dir>/module-customer/layout/customer_account.xml
- Add the extending page layout file
You will place the page layout extend file in the following position:
<theme_dir> |__/<Namespace>_<Module> |__/page_layout |--<layout1>.xml
#2. Extend layout in custom module
You can extend the layout of the module by creating the same layout file with the identical name in your custom module.
For example, You want to change the title of the “Create New Customer Account” page.
Step 1: Determine the layout file to be extended is the following file:
vendor/magento/module-customer/view/frontend/layout/customer_account_create.xml
Step 2: Create a layout extend file in custom module that has the same name as the above layout file.
Namespace/module/view/frontend/layout/customer_account_create.xml
Then change the title in the layout file to “Create New Customer Account custom module”.
<?xml version="1.0"?> <!-- /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ --> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <title>Create New Customer Account custom module</title> </head> </page>
Step 3: Clear cache and check the result
3. Process the extend layout
Magento merges the layout files as below:
- For each layout in the list:
+ Loads layout handle declaration and layout instructions.
+ The results will be added 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>
In which: id is defined by the name of the corresponding layout file and the handle attributes are determined at the root layout’s attributes
- Replace the base URL placeholders in the result.
Magento 2 Override Layout
Typically, the file layout extension is sufficient to address the majority of the tasks that developers confront. However, if you need to make a lot of modifications or if the layout file contains an instruction that we can’t change in the file extension, overriding the file will be your only choice.
Moreover, not all layout customizations can be implemented by extending the layout. If the number of customizations is large, you can use the override function for the layout file. It means that the new file you created in the theme will be used instead of the layout files in the parent theme of the base layout file.
To override, you must create a layout override file in your theme directory. Although you can override the base layout and theme layout with the same mechanism, there are some differences.
#1. Override base layouts
To add a base layout override file (Overwrite the base layout provided by the module):
- Create a layout file with the same name in the following location:
<theme_dir> |__/<Namespace_Module> |__/layout |__/override |__/base |--<layout1>.xml |--<layout2>.xml
- This file will overwrite the layout file:
<module_dir>/view/frontend/layout/<layout1>.xml
For example:
In case you desire to override the layout file:
vendor/magento/module-catalog/view/frontend/layout/catalog_category_view.xml
It is necessary to add a layout file with a similar name in the custom theme:
<theme_dir>/Magento_Catalog/layout/override/base/catalog_category_view.xml
#2. Override theme layouts
Let’s follow these instructions to override the theme file:
- Create a layout file with the same name in the following location:
<theme_dir> |__/<Namespace_Module> |__/layout |__/override |__/theme |__/<Parent_Vendor> |__/<parent_theme> |--<layout1>.xml
- This file will overwrite the layout file:
<parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml
For example: You want to override this file:
vendor/magento/theme-frontend-luma/Magento_Catalog/layout/catalog_product_view.xml
Then you have to create a file with the same name in your theme directory as below:
<theme_dir>/Magento_Checkout/layout/override/theme/Magento/luma/catalog_product_view.xml
Impacts of overriding
When upgrading Magento, the original files of the modules can be updated. New blocks and containers may appear. If you have overwritten a file in which the block or container appeared in the update, the overridden modules cannot access them, leading to errors during running modules.
Hence, it is a must to add new changes to your files so that you can avoid that issue. Besides, please remember that you override some layout files in your theme and prepare to update Magento later.
Although the override mechanism provides flexibility for customization, it can be used to add unrelated changes logically. We strongly recommend that you not make the following changes:
- Do not change the name and aliases of the block
- Do not change handling inheritance
Conclusion About Magento 2 Layout Tutorial
Mastering Magento 2 layout customization is key to creating a store that looks great and functions seamlessly. By learning how to Magento 2 create new layout, extend the existing one, and override defaults, you gain full control over your store’s design.
If you need expert assistance or want to streamline the Magento 2 custom page layout process, BSS Commerce offers professional solutions and Magento extensions to help you achieve your goals faster. Don’t hesitate to contact our team for customized support to elevate your Magento 2 store to the next level. Let us help you bring your vision to life!