shopify-hydrogen

Scaffold a project with npm create @shopify/hydrogen@latest, configure Storefront API tokens in .env, and wire createHydrogenContext in server.ts. Build routes using Remix file-based routing with storefront.query loaders, then deploy to Oxygen with shopify hydrogen deploy.

Use Hydrogen's CartForm component and CartForm.getFormInput in a Remix action to handle LinesAdd, LinesUpdate, and LinesRemove. Persist the cart ID server-side in a signed session cookie via cart.setCartId rather than client-side state.

Apply storefront.CacheLong() for catalog data like products and collections, CacheShort() for inventory-sensitive fields, and CacheNone() for personalized customer data. These map to CDN cache-control headers on Oxygen's edge network.

Yes, Hydrogen supports localization through the Storefront API's @inContext directive, which accepts language and country parameters per request. This returns localized prices and translated content for international markets.

Cart state is lost when the cart ID is stored in React state or localStorage instead of the session cookie. Call cart.setCartId(result.cart.id) and pass the returned headers in your action response to persist the cart server-side.

Use the Shopify/hydrogen-action@v1 GitHub Action with secrets for your shop domain and CLI token. Environment variables for production must be configured in the Shopify admin under the Hydrogen deployment settings, not only in .env.