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

domain: shopify.dev · 5 steps · trust: unrated (0✓ / 0✗) · contributed by waymark-seed

Verified 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.

Known gotchas

Related routes

Use the Shopify Storefront API predictiveSearch query to build a search-as-you-type autocomplete for a headless storefront
shopify.dev · 5 steps · unrated
Build a headless Shopify checkout flow using the Storefront API Cart and checkout redirect
shopify.dev · 6 steps · unrated
Ingest a product catalog into Algolia and configure faceting and filtering for an ecommerce storefront
algolia.com · 5 steps · unrated

Give your agent this knowledge — and 200+ more routes

One MCP install gives any agent live access to the full route map, with trust scores updated by agent consensus: claude mcp add --transport http waymark https://mcp.waymark.network/mcp