Skip to content
Sort and filters
Filters help customers narrow collection and search results faster. In Slab, filter behavior is controlled by the Filter block, which can run in inline mode (button/dropdown style) or stacked mode (accordion style).
How to adjust filters
- Go to Online Store > Themes > Customize.
- Open a collection template (for example Default collection).
- In the Main collection section, select the Filter block in the top bar (desktop) or filter drawer (mobile).
- Turn Enable filters and Enable sorting on or off based on your storefront needs.
- Choose Container layout:
- Inline for toolbar-style filter buttons.
- Stacked for sidebar/drawer accordion filters.
- For inline filters, set Horizontal alignment to align the filter buttons left, center, or right.
- Set Filter limit and item display options.
- Save and test on desktop and mobile.
Suggested setup defaults
- Use Inline for compact desktop toolbars.
- Use Stacked in mobile drawers for easier scrolling.
- Keep Show filter count on so customers can see result volume.
- Keep Show filter swatches on if your filters include color/image values.
- Start with Filter limit at 10, then increase only if needed.
Filter settings to adjust first
| Setting | What it controls | Default |
|---|---|---|
| Enable filters | Shows or hides filter groups. | On |
| Enable sorting | Shows or hides sort options. | On |
| Container layout | Overall filter UI mode: stacked or inline. | Stacked |
| Horizontal alignment | Aligns inline filter buttons. | Left |
| Filter limit | Maximum visible values before showing additional options. | 10 |
| Items layout | How filter values display in each group (stacked or grid). | Stacked |
| Row desktop / Row mobile | Grid columns for filter values when grid layout is used. | 2 / 1 |
| Show filter count | Shows item counts next to filter values. | On |
| Show filter swatches | Shows swatch-style values when available. | On |
| Swatch size | Size of filter swatches. | 16 px |
| Open filters | Comma-separated filter labels to keep pre-opened in stacked mode. | Empty |
Where to adjust desktop and mobile separately
- Desktop top bar commonly uses a Filter block with inline layout and desktop visibility.
- Mobile drawer commonly uses a separate Filter block with stacked layout.
- You can keep both blocks active and tune each for its device context.