Grid With Filters Sidebar
The standard category page, a filter rail with result counts beside a rated product grid.
The standard category page, a filter rail with result counts beside a rated product grid.
Search blocks by description or jump to a page.
The source for every Ecommerce block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Grid With Filters Sidebar is the standard category page, a filter rail built on the ui checkbox primitive with result counts per option, beside a three column grid with ratings and prices. The counts next to every filter are the detail that separates a designed listing from a default one, they tell the shopper what a click costs before they spend it.
Filters and products are two arrays, the checkboxes carry defaultChecked state so the layout reads mid browse.
Reach for this block as the body of any category page with enough products to need narrowing. Under roughly ten products, use the simple grid instead, filters on a small catalog read as aspiration.
A natural flow around it on an Ecommerce Pro page:
Before
After
One strong use is a category with real filter counts. Other rails:
Tip: sorted by bestselling stated in the header is a filter too, defaults are editorial decisions, label them.