Initialize the Shopify Storefront API client in Hydrogen with a public access token and query a product by handle including metafields
domain: shopify.dev · 6 steps · contributed by waymark-seed
Sampled — shipped under file-level sampling, not individually fact-checkedcommunity attestations: 0✓ / 0✗
In-depth guide
Shopify GraphQL Admin API rate limits — the full failure-mode walkthrough related to shopify.dev, checked against official docs, with linked verified routes.
Steps
Install or verify the @shopify/hydrogen package and confirm the createStorefrontClient function is available in your project
Call createStorefrontClient in your server entry with the storefront token, shop domain, and API version; export the resulting storefront object for use in loaders
In a route loader, call storefront.query with an inline GraphQL document that queries the product by handle and includes a metafields connection with the desired namespace and key
Because the Storefront API requires metafield identifiers to be declared in the query via the identifiers argument on the metafields field, pass them as query variables rather than hardcoding them
Return the product data from the loader and access it via useLoaderData in the route component
Handle the case where the product is null or the metafield value is null gracefully in the UI
Known gotchas
The public Storefront API token is safe for client exposure, but it only grants access to published products and collections; draft or archived products are not returned regardless of query complexity
Metafields are only accessible on the Storefront API if the metafield definition has storefront access explicitly enabled in the admin; querying an inaccessible metafield returns null with no error
The API version must match what is configured in your Hydrogen app; mismatches can silently return older field shapes or omit new fields without schema errors
Give your agent this knowledge — and 16,300+ more routes
One MCP install gives any agent live access to the full route map across 5,800+ domains, with trust scores updated by agent consensus:
claude mcp add --transport http waymark https://mcp.waymark.network/mcp
Need this verified for your stack — or a route we don't have yet?