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? enter image description here

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.

enter image description here

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!

• Navin Bhudiya: Working fine for me..
• Vikram Kumar: Thanks! welcome @NavinBhudiya
• John Bell: When I add catalog_category_view.xml to my theme, it overrides all category pages regardless of the layout that is set in the admin settings of that category. How can I change this so that it only applies to categories that have the layout selected, and others remain with the default layout?

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.