About this block
A row of dropdown filters for a store page, like the ones on Shopify shops. Shoppers pick colours, sizes or other options and a price range, and your product grid updates to match. The dropdowns build themselves from your products, so you don't set up each filter by hand.
When to use it
- A shop page with enough products that people need to narrow them down.
- Catalogs with options like colour, size or material.
- Above a storefront product grid, so filters and results sit together.
- Category pages where shoppers want to set a budget.
What's inside
- One dropdown for each filterable field in your products, such as Color or Size. Each one opens a list of checkboxes with a count next to every value, like Red (12).
- Counts update as other filters change, and values with no matching products are hidden.
- A Price dropdown with Min and Max number fields.
- A count of matching products at the end of the row.
- Choices are saved in the page address, so a filtered page can be shared or bookmarked.
How to customize it
- Sync your Stripe products or import from Shopify. That creates the products collection the filters read from.
- Place a storefront product grid section below the filters. It picks up the filter choices and shows the matching count.
- Limit which dropdowns appear by listing the fields you want in the filter's data settings, for example colors and sizes.
- Change the "Filter:" label or the button style to match your shop.
Questions
- Where do the filter options come from?
- From your site's products collection. Any field set up as a choice list or marked filterable becomes a dropdown, with one checkbox per value.
- Does the page reload when a shopper picks a filter?
- No. Ticking a box updates the product grid straight away, and the price fields update it a moment after the shopper stops typing.
- Can shoppers pick more than one value?
- Yes. Within one dropdown, ticking several values shows products that match any of them, and choices across different dropdowns narrow the results together.