How To Use Magento 2 Theme Layout For Your Storefront?

In Magento 2, layout, block, and container are three paths to determine the structure of your storefront page.

The page structure looks the same as the XML (Extensible Markup Language) file that is much like the HTML (HyperText Markup Language) structure to create one or several columns.

This XML file is located in app/design/frontend/your_interface/your_theme/layout/ in the Magento installation page.

If developers understand how to use the layout, instead of buying a free theme, you can create a Magento 2 Theme Layout for your own.

Ready to join us?

Overview of Magento 2 Theme Layout

There are 3 basic components to design your page to represent to your customers that are layouts, containers, and blocks.

Firstly, a layout is a path to show your customers the overall appearance between graphics and information on your website.

The layout uses the XML file, which both identifies containers and blocks composing the page.

Meanwhile, a container is a package including code, configuration, and system libraries to make your website run smoothly.

It helps the layout to build a website appearance, for example, header, left column, main column, and footer.

Last but not least, a block creates a link between the layouts and templates to design your website, including a category list such as a cart, product tags, and product listing.

Magento 2 Layout Instructions

A block is a unit of page output that links layouts and templates in the layout’s XML file. It includes a category list, a cart, product tags, and product listing.

You can check the details of the block below:

<?;block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list" as="product_list" template="Magento_Catalog::product/list.phtml"/>

• Class – It classifies the block of template files.
• Name – It is used to identify the name of the block. The name must be unique or it will automatically turn to the “ANONYMOUS_n” format.
• Template – When we write PHP and HTML code, this is a place where we save the file called PHTML file.

A container is a placeholder including code, configuration, and system we wrote. If the container is empty, the block will be empty either.

<?;container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="div.sidebar.main">
    <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>
</container>

• Name – It is used to address the container in which this attribute is assigned.
• Label – A brand name displays on the website.

Multi-types of Magento 2 Layout

The Magento 2 Layout is divided into 2 majors: page layout file and page configuration file. A page layout file is a .xml file to build a “body” of the website. This file only contains containers.

In contrast, a page configuration file is a .xml file either, but it builds the details of the website such as page header, footer, left column, and more.

How to Create A New Magento 2 Layout?

Sometimes, you want to create and design your website on your own theme? You do not want to use Magento Free Theme due to a lack of some convenience functionality?

I’ll tutor you on how to create a Magento 2 Layout Theme, with this, you don’t need to use Magento Free Theme anymore.

Let’s go!

We’ve already known that Magento’s default has a column, 2 columns with left bar, and 2 columns with right bar.

So, if you want to create it, first, you have to create a custom page .XML file following to this:
app/design/frontend/<VendorName>/<ThemeName>/Magento_Theme/page_layout/3-columns-double-footer.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="3columns"/>
<referenceContainer name="page.wrapper">
<container name="footer-bottom" as="footer-bottom" after="-" label="Footer Bottom" htmlTag="footer" htmlClass="page-footer-bottom"/>
</referenceContainer>
</layout>

Secondly, you add a new page layout to the layouts.xml following to 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="3-columns-double-footer">
<label translate="true">3 Columns Double Footer</label>
</layout>
</page_layouts>

As a result, your new page layout will display below:

You can check on your Admin Panel Configuration Setting to test Magento 2 Theme Layout.

How to Extend a Magento 2 Theme Layout?

Extending layout is used to modify the default instead of copying an extensive layout page or configuration page code.

• To create an extending layout file, you must create a folder with the name of the layout. For example, if the name is catalog_product_view.xml, then you have to add a layout file with the same name you customized: <theme_dir>/Magento_Catalog/layout/catalog_product_view.xml
• The extensive layout will process following to:

<?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

How to Override a Layout in Magento 2?

The extensive layout is not enough if the amount of customization is too large. Therefore, you can use the overriding function for the layout file.

• You put a layout file with the same name:

<?;theme_dir>

   |__/<Namespace_Module>

     |__/layout

       |__/override

          |__/base

            |--<layout1>.xml

            |--<layout2>.xml

• Then, the files of the layout will be below:

<?;module_dir>/view/frontend/layout/<layout1>.xml

<module_dir>/view/frontend/layout/<layout2>.xml

For example, if you created the layout’s name is catalog_product_view_id_number and then we’ll place it in:

<?theme_dir/Namespace_Module/layout/catalog_product_view_id_number.xml

How To Customize the Magento 2 Theme Layout?

#1. Create a container

Using this code to create a container for your website:

<?container name="some.container" as="someContainer" label="Some Container" htmlTag="div" htmlClass="some-container" />

#2. Create a block

You can use code below to create a block

<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.sku" template="product/view/attribute.phtml" after="product.info.type">
<arguments>
<argument name="at_call" xsi:type="string">getSku</argument>
<argument name="at_code" xsi:type="string">sku</argument>
<argument name="css_class" xsi:type="string">sku</argument>
</arguments>
</block>

#3. Rearrange elements

If you want to arrange the order of your page, you can use code to change it.

<?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"/>

    <move element="product.info.review" destination="product.info.main" before="product.info.price"/>

  </body>

</page>

Then, the result will be like this.

Conclusion

There are all about Magento 2 Theme Layout that you need to build your own theme. With this, you do not need to use the theme free anymore.

If you need help, we are 24/7 to answer your questions. Or, you can also write comments on the comment box.

Thank you for reading!