Magento 2: Add custom category layout to multiple categories

Question

I am trying to add a custom category layout to my theme. I have the standard catalog_category_view.xml and have got the update for 1 category using catalog_category_view_id_[id].xml.

I want to apply the update to multiple categories (around 30) without having to create multiple catalog_category_view_id_[id].xml for each category. Any further updates would have to be made across every file.

Is there a way to have a layout update in the design section?

Answer 1

Override vendor layouts.xml into your theme:

\vendor\magento\module-theme\view\frontend\layouts.xml

into

app/design/frontend/[Vendor_Name]/[Theme]/Magento_Theme/layouts.xml

Add the below code into layouts.xml for the custom category layout.

<layout id="custom-category-layout">
    <label translate="true">Custom category layout</label>
</layout>

Create custom-category-layout.xml file in your theme by copy code 2columns-left.xml:

app/design/frontend/[Vendor_Name]/[Theme]/Magento_Theme/page_layout/custom-category-layout.xml

Finally, create catalog_category_view.xml in your theme: app/design/frontend/[Vendor_Name]/[Theme]/Magento_Catalog/layout/catalog_category_view.xml

Update the layout name just like below:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="custom-category-layout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

Now select a custom theme and category layout from admin for multiple categories.

Note: Due to custom layout, body class page-layout-2columns-left will be updated with a new one and the sidebar will not display. For that, you can add CSS by checking the two-column page layout and it will work.

Hope it will help!

Answer 2

I used 'Vikram Kumar' answer but this didnt fully work for me in 2023. So i wanted to add here what i did different to make it work. Credits for some steps go to him!

1. Override vendor layouts.xml into your theme:

   \vendor\magento\module-theme\view\frontend\layouts.xml

into

app/design/frontend/[Vendor_Name]/[Theme]/Magento_Theme/layouts.xml

Add the below code into layouts.xml for the custom category layout.

<layout id="categorynotitle">
    <label translate="true">Category No Title</label>
</layout>

2. Created the following file:

   app/design/frontend/[Vendor_Name]/[Theme]/Magento_Theme/page_layout/categorynotitle.xml

    <layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <update handle="2columns-left"/>
   
    <referenceContainer name="page.wrapper">
        <referenceBlock name="page.main.title" remove="true"/>
    </referenceContainer>
   
   
   </layout>
   

3. Set the new layout as a setting under the specific category.