Build product listing and detail pages

Outcome: a product list and detail page that use one explicit Storefront context and handle missing price or availability safely.

Prerequisites

Use a prepared store, price channel, currency, country, and locale. The project must contain an active product and variant published to the store’s distribution channel.

1. List products

GraphQL

Code in graphql

Start with first: 20 and after: null. Fetch the next page only while hasNextPage is true, passing the returned endCursor. Render an empty state when nodes is empty; do not treat that as a transport failure.

2. Load detail by slug

Call product with the same context and the selected slug. Request product copy, ordered variant media, assignments, variant selected values, price, and availability fields needed by the UI. Build the option selector from returned variants rather than constructing SKUs from labels.

3. Handle commercial empty states

A visible product can have no eligible price for the requested context, and a priced variant can be unavailable. Disable purchase when availableForPurchase is false. If price is absent, show an explicit unavailable-price state rather than reusing a price from another request context.

Verify

Change one context dimension at a time—locale, country, currency, or price channel—and confirm the page updates from the new response. Then add the selected variant to a cart with the same store and price context.

See Storefront request context, Prices and price selection, and the products query.