2

I'm just diving into template/block/layout customization in Magento 2.2 and I'd like to move my category title from being left aligned to being aligned above the description.

Currently it's like this:

_________________________________
|                               |
| Page Title                    |
|_______________________________|
|          |                    |
|(sidebar) | (main content)     |
|          |                    |
|          |                    |
|__________|____________________|

I'd like for it to be like this:

_________________________________
|          |                    |
|          | Page Title         |
|          |                    |
|(sidebar) | (main content)     |
|          |                    |
|          |                    |
|__________|____________________|

Thank you.

0

There are two ways to achieve this.

  1. If you want it to affect all of your category pages for that create your own theme at below location

app/design/frontend/Package/theme in that create a file with name catalog_category_view.xml at below location

app/design/frontend/Package/theme/Magento_Catalog/view/frontend/layout

And put this code there in the file catalog_category_view.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
    <move element="columns.top" destination="content" before="-"/>
    </body>
</page>
  1. To just have this change in to a single category do following tasks

Just go to you admin & traverse at below location

Catalog > Category > Your Category > Design

At there do following changes

  • set Layout > 2 Columns with left bar
  • Put below content at Layout Update XML
<page>
    <body>
       <move element="columns.top" destination="content" before="-"/>
    <body>
</page>

If still facing some issue do mention below

Note: Don't forget to make catch disabled when doing this task otherwise perform the following command into your terminal from your magento root directory

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f

Thank You Happy Coding!

  • Please accept & upvote also if my answer helped you in solving your problem – Abhishek Tripathi Feb 20 '18 at 4:57
1
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
            <move element="page.main.title" destination="content" before="category.products"/>
            <move element="category.description" destination="page.main.title" after="-" />
        </body>
    </page>

Please add xml code below file.

\app\design\frontend\Magento\theme\Magento_Catalog\layout\catalog_category_view.xml

0

To display page title on top of sidebar and content you have to move it to columns.top where Category Description and Image are displayed. To move page title to column.top you have to override below file

/your_magento/vendor/magento/module-catalog/view/frontend/layout/catalog_category_view.xml

In this file you can use below code to move page title

<move element="page.main.title" destination="columns.top" before="category.image"/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.