Skip to main content

How to change the position of the smart filters block

By default, the smart filters block is shown on category pages at full page width, below the category title and description and above the sidebar and the product list. There is no admin setting for its position: the block is placed with layout XML, so to move it (for example, into the main column right above the products, or below a promo banner) you add a small layout file to your theme.

The block is named mst-nav.smart-filter. By default, it is placed in the columns.top container, after category.view.container (the block with the category image, description, and CMS block).

note

Add the file to your own theme, a child of Luma or Hyvä. Do not edit the files of the extension or of the parent theme, because they are overwritten on upgrade.

1. Create the layout file​

The file name depends on the theme your store uses:

  • Luma and other Luma-based themes: app/design/frontend/<Vendor>/<theme>/Mirasvit_SmartFilter/layout/catalog_category_view.xml
  • Hyvä themes: app/design/frontend/<Vendor>/<theme>/Mirasvit_SmartFilter/layout/hyva_catalog_category_view.xml
warning

On Hyvä themes, use the hyva_catalog_category_view.xml file name. On Hyvä, the extension wraps the block in its own container in that layout handle, which runs after catalog_category_view, so a <move> placed in catalog_category_view.xml has no effect.

2. Move the block​

Put a <move> instruction for mst-nav.smart-filter into the file. The example below moves the block into the main column, above the product list:

<?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>
        <move element="mst-nav.smart-filter" destination="content" before="-"/>
    </body>
</page>

The same content works for both file names. Change the attributes to place the block elsewhere:

  • destination: the container the block is moved into, for example content (the main column) or columns.top (the full-width area above the columns).
  • before / after: the position inside that container. Use - to put the block first (before="-") or last (after="-"), or the name of another block to put it next to that block. For example, to show the cards below a promo banner block, use after="<banner block name>" with the name of the block that renders the banner.

3. Clear the cache​

Run the following command from the Magento root directory, then reload the category page:

php -f bin/magento cache:clean
tip

To hide the block instead of moving it, set Enable smart filters to No in Stores -> Configuration -> Smart Filters. See smart filters.