Skip to main content

Shopify Hydrogen

Overview​

Hydrogen is Shopify’s React-based storefront toolkit for building custom headless commerce experiences on top of the Storefront API. It provides routing, caching, cart primitives, and Oxygen deployment patterns tailored to Shopify’s data model.

Key concepts​

  • Storefront API — GraphQL access to products, collections, cart, checkout URLs.
  • Oxygen — Shopify’s hosting for Hydrogen apps (also self-hostable with adapters).
  • Caching — Subrequest caching strategies for fast SSR at the edge.
  • Cart state — Client/server cart synchronization patterns.
  • Hydrogen + Remix — Framework alignment evolves; follow current Shopify docs.

Storefront data flow​

Sample: GraphQL intent (illustrative)​

query Product($handle: String!) {
  product(handle: $handle) {
    id
    title
    variants(first: 10) {
      nodes {
        id
        title
        price {
          amount
          currencyCode
        }
      }
    }
  }
}

References​