Use the Shopify Storefront API predictiveSearch query to build a search-as-you-type autocomplete for a headless storefront

In-depth guide

Steps

1. Authenticate with a Storefront API access token (public or private); include it in every request as the X-Shopify-Storefront-Access-Token header.
2. Send a GraphQL POST to https://{shop}.myshopify.com/api/{version}/graphql.json with the predictiveSearch query, passing the search {query} variable and a types argument listing the resource types to include (e.g., [PRODUCT, COLLECTION, PAGE]).
3. Parse PredictiveSearchResult from the response: it contains products, collections, pages, articles, and queries arrays; render each group with appropriate UI (product thumbnail + title, collection name, query chips).
4. Control result quantity per type using limit and limitScope — when limitScope is EACH, the limit applies individually to each resource type; when ALL, it applies to the total.
5. Debounce user input and cancel in-flight requests when a new keystroke arrives to avoid race conditions and excessive API calls.