Skip to content
Filter
Overview
A comprehensive filtering system for collection and search pages that provides customers with sorting options and advanced filtering capabilities. The block supports multiple filter types including boolean filters, list filters, and price range sliders with an accordion-style interface for organized presentation.
Common use cases
- Ensure JavaScript functions (handleFilterChange, handleFilterDeleteAll, handlePriceFilterChange) are implemented for full functionality
- Configure border styling and internal padding based on your theme's design system
- Use appropriate gap sizes to maintain visual hierarchy between filter groups
- Test price range filters with your currency formatting and decimal handling
- Consider the number of filter options when deciding on swatch vs standard presentation
- Place this block in collection and search templates for optimal filtering experience
Block settings
General
| Setting | Description | Options |
|---|---|---|
| Show advanced settings | Reveals open filters, and visibility | Checkbox (default: false) |
Content
| Setting | Description | Options |
|---|---|---|
| Enable filters | Enable or disable the filter functionality | Checkbox (default: true) |
| Enable sorting | Enable or disable sorting options | Checkbox (default: true) |
Filter container
| Setting | Description | Options |
|---|---|---|
| Layout | Controls the filter container layout | • Stacked (default) |
| Horizontal alignment | Aligns inline filter buttons | • Left (default) |
| Top spacing | Spacing above the filter container | 0 - 30 px (default: 0) |
| Bottom spacing | Spacing below the filter container | 0 - 30 px (default: 0) |
| Enable horizontal padding | Adds horizontal padding around the container | Checkbox (default: false) |
| Enable internal padding | Adds internal padding to filter items | Checkbox (default: false) |
| Gap size | Spacing between filter items | • None (default) |
| Button color | Color scheme for filter buttons in inline layout | • Primary |
| Button size | Size of filter buttons in inline layout | • Extra small |
| Border color | Color of borders around the filter container | • Body |
| Border position | Position of borders on the filter container | • None (default) |
| Open filters | Comma-separated list of filter labels to open by default | Text input Visible when Layout is stacked and Show advanced settings is on |
Filter items
| Setting | Description | Options |
|---|---|---|
| Filter limit | Maximum number of filter options to display before showing "Show more" | Number input (default: 10) |
| Layout | Controls the layout of filter items | • Stacked (default) |
| Desktop rows | Number of columns per row on desktop | 1 - 4 (default: 2) |
| Mobile rows | Number of columns per row on mobile | 1 - 4 (default: 1) |
| Show filter count | Display the count of items for each filter option | Checkbox (default: true) |
| Show filter swatches | Display color/image swatches for filter options | Checkbox (default: true) |
| Swatch size | Size of color/image swatches | 8 - 256 px (default: 16) |
| Swatch radius | Border radius for color/image swatches | • None |
| Border color | Color of borders around filter items | • Body |
Display
| Setting | Description | Options |
|---|---|---|
| Visibility | Controls when the block is visible | • All (default) Visible when Show advanced settings is on |