Skip to content

How to change the placement of categories filter in Magento 2.4.7 from sidebar to top of catalogue page

i’m working with Magento 2.4.7 and using the Minimog theme from Bluesky. Currently, the categories filter is part of the layered navigation on the left side of the catalog pages. I want to move this filter to the top of the main catalog page to make it more accessible and visible.

this is the xml file that collect the filters and place them at the sidebar app/code/Blueskytechco/LayeredAjax/view/frontend/layout/catalog_category_view_type_layered.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="catalog.leftnav">
            <action method="setTemplate" ifconfig="layered_ajax/general/enable">
                <argument name="template" xsi:type="string">Blueskytechco_LayeredAjax::layer/view.phtml</argument>
            </action>
            <arguments>
                <argument name="view_model" xsi:type="object">BlueskytechcoLayeredAjaxViewModelLayered</argument>
            </arguments>
        </referenceBlock>
        <referenceBlock name="catalog.navigation.renderer">
            <action method="setTemplate" ifconfig="layered_ajax/general/enable">
                <argument name="template" xsi:type="string">Blueskytechco_LayeredAjax::layer/filter.phtml</argument>
            </action>
            <arguments>
                <argument name="view_model" xsi:type="object">BlueskytechcoLayeredAjaxViewModelLayered</argument>
            </arguments>
        </referenceBlock>
        <referenceBlock name="catalog.navigation.state">
            <action method="setTemplate" ifconfig="layered_ajax/general/enable">
                <argument name="template" xsi:type="string">Blueskytechco_LayeredAjax::layer/state.phtml</argument>
            </action>
        </referenceBlock>
        <referenceBlock name="category.products">
            <action method="setTemplate" ifconfig="layered_ajax/general/enable">
                <argument name="template" xsi:type="string">Blueskytechco_LayeredAjax::category/products.phtml</argument>
            </action>
        </referenceBlock>
    </body>
</page>

i need some help so i can make the categories filter render alone and place them at the top of the catalogue page. or maybe there is another way that i didn’t notice if please someone can help me with this. [the current placment of the categories filter]: https://i.sstatic.net/HdNrltOy.png [where i wanna put them]: https://i.sstatic.net/F00uWD9V.png

i need some help so i can make the categories filter render alone then place them at the top of the catalogue page. or maybe there is another way that i didn’t notice if please someone can help me with this.