Search

Search is a Storefront API query — your theme owns the page and the UX, the platform does the matching.

query Search($query: String!, $first: Int) {
  search(query: $query, first: $first) {
    id
    handle
    title
    images {
      id
      url
      altText
      width
      height
    }
    priceRange {
      min {
        amount
        currencyCode
      }
    }
  }
}

A search route reads the term from the URL, queries, and renders the grid:

export async function loader({ request, context }: Route.LoaderArgs) {
  const q = new URL(request.url).searchParams.get("q") ?? "";
  if (!q) return { q, products: [] };
  const { search } = await context.storefront.query<SearchQueryData>(SEARCH_QUERY, {
    variables: { query: q, first: 24 },
  });
  return { q, products: search };
}

Keep the query in the URL (/search?q=…) so results are shareable and the back button works. For a type-ahead, debounce the same query with a small first and render a compact overlay — it is the identical API, just called from the client through your own route.