shopify-storefront-api

Use the @shopify/storefront-api-client package with a Storefront Access Token to query products and manage carts via GraphQL. Fetch product data at build time with SSG or ISR, and redirect customers to Shopify's hosted checkoutUrl for payment.

Public tokens are safe to expose in browser JavaScript and allow storefront-scoped operations at lower rate limits. Private tokens offer higher rate limits (1000 req/s vs 100 req/s) and must only be used server-side, never shipped to the client.

Add the @inContext directive to your GraphQL query, for example @inContext(country: $country), passing the buyer's ISO country code. Shopify returns priceRange and variant price fields converted to that country's currency.

The cart ID is not persisted across sessions. Store the cartId returned by cartCreate in localStorage or a cookie, read it on initialization, and reuse it with cartLinesAdd instead of creating a new cart each visit.

Mobile Safari blocks programmatic navigation from async callbacks. Assign window.location.href = checkoutUrl inside a synchronous user gesture handler such as a click event, not inside a Promise.then() or after an await.

Compare all selectedOptions on each variant against the user's selections, such as both Size and Color. Matching on a single option can return the wrong variant when products have multiple option axes.