# Shopify + Hydrogen + Oxygen
URL: https://wwadd.dev/stacks/shopify-hydrogen-oxygen
Last verified: 2026-09-29

A custom React storefront backed by Shopify commerce, with server-rendered pages and a hosted checkout rather than a cart and order system you build yourself.

## When to use it
- Developers publish the site's editorial pages and maintain the storefront in Git
- The site needs products, a cart, and checkout alongside its content
- A custom shopping experience is worth maintaining a frontend application
- A hosted commerce backend is acceptable; owning the entire backend is not a requirement

## How the pieces fit
Shopify owns the catalog and commerce operations. Hydrogen supplies Shopify-aware components and a Storefront API client inside a React Router app; route loaders render product data on the server and cart actions send buyers to Shopify's hosted checkout. Oxygen deploys the storefront with preview environments. Keep developer-written editorial pages in the app's repository, while merchants manage products in Shopify. Treat those as separate publishing workflows, and verify any required app integration before replacing a Shopify theme.

## The tech and its role
- Shopify: Hosted commerce backend and checkout
- Hydrogen: Shopify storefront components and API utilities
- React + TypeScript: Custom storefront and repository-owned editorial pages
- React Router: Routing, server rendering, loaders, and actions
- Storefront API: Product queries and cart operations over GraphQL
- Oxygen: Managed storefront hosting and deployment previews

## Real-world examples
- Patta x Tommy Hilfiger: Shopify's case study describes a campaign store built with Hydrogen and hosted on Oxygen. It documents the implementation at launch, not the current site's framework version or a Git-based editorial workflow. (source: https://www.shopify.com/case-studies/patta-tommy-hilfiger)
- Lady Gaga: Shopify's March 2025 account describes Commerce-UI moving the artist's store from Liquid to Hydrogen, with Sanity for editorial content. Hydrogen + Shopify example; not evidence of Oxygen hosting or content kept in Git. (source: https://www.shopify.com/news/lady-gaga-hydrogen, 2025)

## Skip if
Skip if you need to self-host the commerce backend, or a standard Shopify theme already meets the brief — a custom storefront adds development and integration work.

## Testing and shipping
- [Test the behavior users depend on](https://wwadd.dev/moves/testing-shipping/test-user-behavior)
- [Check keyboard access and automated accessibility](https://wwadd.dev/moves/testing-shipping/keyboard-accessibility-check)
- [Investigate flaky browser tests](https://wwadd.dev/moves/testing-shipping/diagnose-flaky-tests)
- [Verify the production build before release](https://wwadd.dev/moves/testing-shipping/verify-built-release)
- [Keep secrets out of browser bundles](https://wwadd.dev/moves/testing-shipping/keep-secrets-server-side)
- [Make CI validate the same release inputs](https://wwadd.dev/moves/testing-shipping/ci-release-gates)
- [Capture errors with useful context](https://wwadd.dev/moves/testing-shipping/error-reporting-context)
- [Prepare rollback before publishing](https://wwadd.dev/moves/testing-shipping/plan-release-rollback)