Use the Shopify Storefront API search query with ProductFilter input to build a faceted product listing page

In-depth guide

Steps

1. Use the search query in a GraphQL POST to the Storefront API, passing a query string and a productFilters array of ProductFilter input objects; filter types include availability, price, variantOption, tag, productMetafield, and variantMetafield.
2. Request the filters connection on the search result to retrieve available facet options and their counts; render these as interactive checkboxes or sliders in your UI.
3. As users apply filters, append the corresponding ProductFilter objects to productFilters and re-execute the query; results and available filter options update in response.
4. Combine multiple filters in the same request — filters within the same type are OR'd, filters across different types are AND'd (e.g., multiple color variants OR'd, but color AND price AND'd).
5. Implement the Search & Discovery app in the Shopify admin to manage which filters are enabled for your storefront; the app supports availability, price, vendor, product type, tag, and custom metafield-based filters.