Magento 2 - Custom page layout destroys view

Question

I added a new page layout which inherits from the page layout 1column:

THEME\Magento_Theme\layouts.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="1column"/>
</layout>

THEME\Magento_Theme\page_layout\hf-grouped-product-big-1col.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="hf-grouped-product-big-1col">
        <label translate="true">Hf Grouped Product (Big) -- 1 Col</label>
    </layout>
</page_layouts>

If I look at the product without changing the layout to my new page layout, then it looks good:

↑ It also looks like this if I set the page layout to 1column

If I change the page layout to my new layout, then it looks like this:

Why does it look different, even though my page layout inherits 1column page layout?

I tested grouped products and simple products. It looks the same everywhere.

Answer 1

You have created new page layout wrongly. Please follow below steps.

You need to create two files for custom layout

1 - Create layouts.xml

app/design/frontend/Vendor/yourtheme/Magento_Theme/layouts.xml

This file will registered 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="hf-grouped-product-big-1col">
        <label translate="true">Hf Grouped Product (Big) -- 1 Col</label>
    </layout>
</page_layouts>

After creating above file you can check your custom layout in admin panel.

2 - Create custom.xml

app/design/frontend/Vendor/yourtheme/Magento_Theme/page_layout/custom.xml

This file will manage design for your layout page.

<?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="1column"/>
</layout>

Now, flush the cache and check the new custom layout in admin panel configuration setting.

After that , please select newly created page layout in product. You will get proper design for it.