How to Add New Page Layout Option in Magento 2?

May 26, 2020

If you already run an eCommerce store, then you know that the product pages are the most important pages of any eCommerce store.

It’s where customers either decide to make a purchase or leave. So, it’s imperative to optimize all product pages to provide better customer experience and increase your sales.

Now, in Magento 2, you can change the complete layout of your eCommerce store by changing the theme from its backend.

But, what if you only want to make changes in your product page layout?

In this tutorial, we will show you exactly how you can add a new frontend page layout option so that you can boost your sales and improve customer experience.

There are a total of 4 different types of layout types in Magento 2.

1 Column
2 Columns with left bar
2 Columns with right bar
3 Columns

If you want to get detailed information about each of these 4 layout types, you can find it in the Official Magento 2 Docs.

Steps to Add New Page Layout Option in Magento 2

Below, we will show you how to add a new layout type in your Magento 2 based online store with step by step process.

Step 1

First, we will need to create a layouts.xml file in app/design/frontend/Vendor/<your_theme>/Magento_Theme/ directory to register a custom layout.

<?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="custom">
        <label translate="true">custom page layout</label>
    </layout>
</page_layouts>

Step 2

Next, we will need to create a custom.xml file in app/design/frontend/Vendor/<your_theme>/Magento_Theme/page_layout/ directory and add the following code.

<?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"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
    </referenceContainer>
</layout>

And it’s done!

Now, all you need to do is flush the cache and verify this new layout option in your design layout drop-down list.

Also read: How to Change Product View Page Layout Based on Price in Magento 2?