Archived mockup — Storefront filter layout options. Produced while designing issue #23. The option marked as chosen is recorded in the design spec.

Storefront filter layout — which shape fits?

Three filters land on the storefront: category (a tree), tags (multi-select, color-coded), and price range. They differ mainly in how much screen they take from the item grid, and how well they survive on a phone. Click the one you prefer.

A Sidebar filter rail
Redefined Designs DarkCartSign up
All items
▾ Furniture
  ▾ Tables
    Coffee
    Side
▸ Decor
vintage handmade oak restored
$120$800
Oak table$340
Elm slab$520
Walnut$690
Teak low$275
Ash round$410
Pine box$180
Everything visible at once — the tree reads as actual folders, tag colors are on display, no clicking to discover what's filterable. Costs ~25% of the grid width, so cards drop from 4 to 3 per row on desktop. On mobile the rail has to collapse into an accordion above the grid.
B Horizontal filter bar
Redefined Designs DarkCartSign up
Furniture / Tables / Coffee vintageoak $120 – $800 Clear
Oak table$340
Elm slab$520
Walnut$690
Teak low$275
Ash round$410
Pine box$180
Cedar$230
Maple$610
Three compact controls in one row — an antd Cascader for the category tree, a tag multi-select, and a price-range dropdown. Full grid width is preserved (4 cards per row), and the same row wraps naturally on a phone. The tree is only visible once you open the cascader, so the category structure is less discoverable.
C Drawer + active-filter chips
Redefined Designs Filters (3)Cart
Coffee Tables × vintage × $120–$800 ×
Oak table$340
Elm slab$520
Walnut$690
Teak low$275
Ash round$410
Pine box$180
Cedar$230
Maple$610
Filters
All items
▾ Furniture
  ▾ Tables
    Coffee
▸ Decor
vintage handmade oak
$120$800
A "Filters" button opens a slide-over panel holding the full tree, tag pills, and price slider; what's currently applied stays visible as removable chips above the grid. Full grid width, and identical behaviour on desktop and mobile. Trade-off: filtering is a two-step interaction, and nothing hints at the category structure until you open the drawer.

Same for all three

Filters combine with AND (category and tags and price). Multiple selected tags are the one open sub-question — "has any of these tags" vs "has all of them" — I'll ask that next. Filtering happens server-side via query params on /api/items, so the result set stays correct no matter how many items exist.