Skip to main content

Smart filters

Smart filters add a block of clickable filter cards to category pages. Each card shows an image and a title and takes shoppers straight to a pre-applied filter combination (for example, Red, In Stock, or Under $50), turning your most useful filters into visual shortcuts.

This section describes the store-wide settings that control whether the block is shown and how it looks. They are located in Stores -> Configuration -> Smart Filters.

The cards themselves are created and managed per category under Content -> Layered Navigation -> Smart filters — see manage smart filters.

tip

After saving the configuration, clear the Magento cache to apply changes.

General​

  • Enable smart filters: shows a block of smart filter cards on category pages. When set to No, no cards are displayed regardless of how many are configured.

Display Settings​

Appearance settings that apply to both the grid and slider layouts.

  • Display mode: how the cards are laid out.
    • Grid: a fixed, wrapping rows layout.
    • Slider: a horizontal, scrollable strip with navigation arrows.
  • Show title: displays the filter card title below the image.
  • Show image: displays images on the cards. When disabled, no image or placeholder is shown and only titles remain.
  • Gap between items (px): space between cards, in pixels, for both grid and slider modes (default: 16).
  • Item min-width (px): minimum card width for desktop grid columns; it is also used as the base slide width when the slider runs in auto mode (default: 120).
    note

    On mobile, the grid always shows 4 equal-width columns regardless of this value.

  • Image size (px): image container width and height, in pixels. Leave empty to let the image fill the card width (default: 80). Available only when Show image is set to Yes.
  • Image border radius (px): rounded corner radius for the card images (default: 4). Available only when Show image is set to Yes.
  • Title font size (px): font size for the card titles, in pixels (default: 14). Available only when Show title is set to Yes.

Slider Settings​

These options appear only when Display mode is set to Slider.

  • Slides per view: number of slides visible at once. Enter a number (for example, 4), or auto for fixed-width cards (default: auto).
  • Show navigation arrows: displays previous/next navigation buttons beside the slider.
  • Show pagination: displays pagination dots below the slider.

Advanced Settings​

These options appear only when Display mode is set to Slider. Leave any field empty to use the theme default.

  • Navigation arrows color: color of the prev/next navigation arrows.
  • Active pagination dot color: color of the currently active pagination dot.
  • Inactive pagination dot color: color of the inactive pagination dots.
  • Pagination dot hover color: color of a pagination dot on hover.