Filters
Color, size, price, stock, and any custom filter — with multiple display styles.
Updated 2026-05-09
Filters are managed at the Shopify level (admin → Online Store → Navigation → Filters), and Dost renders them with the styles you choose in the Product listing block.
Display styles per filter type
| Filter type | Style options |
|---|---|
| Color | swatch (round color swatches) or checkbox (default list) |
| Size | button (rectangular size buttons) or checkbox |
| Price | slider (dual-thumb) or inputs (Min / Max number fields) |
| Other (boolean / list) | checkbox (always) |
| Availability / Stock | checkbox with exclusive selection (only one stock filter active at a time) |
Layout
- Sidebar (default desktop) — filter panel on the left, product grid right
- Mobile sheet — bottom-sheet drawer triggered by the "Filter" button at the top
Auto-apply
Every filter checkbox auto-navigates on change — you don't need to click "Apply". The URL updates and the page reloads with the filter applied. Price filter is the exception: it has a per-filter Apply button (because the slider triggers many input events as the customer drags).
Active filter tags
When filters are active, a row of removable tags appears at the top of the sidebar — click an X on a tag to remove that filter.
A "Clear" link in the sidebar header clears all filters at once.
Out-of-stock filter values
Filter values where count == 0 and not currently selected are rendered with reduced opacity and pointer-events: none (so they appear visible but can't be clicked).
Mobile
Tapping the "Filter" button (count badge if active filters exist) opens a bottom-sheet drawer with the same filter UI as desktop. Swipe-down to close.
Tips
- For fashion catalogs with many size variants, use
buttonstyle for size — much faster to scan than checkbox. - For 30+ values in a filter (e.g., a wide color palette), enable Filter values limit in the listing block to show first N + a "View all" toggle.