Shopify Hydrogen

Overview

Hydrogen is Shopify's official React-based framework for building headless storefronts, built on top of Remix and deployed to Oxygen (Shopify's edge hosting). It provides first-class primitives for the Storefront API — product queries, cart management, customer accounts — alongside Shopify-specific components and hooks that handle caching, streaming, and SEO automatically. This skill covers scaffolding a Hydrogen project, querying the Storefront API, implementing cart functionality, and deploying to Oxygen.

When to Use This Skill

• When building a custom Shopify storefront with full design and UX control
• When the default Shopify Online Store theme is too limiting for your design requirements
• When you need server-side rendering, streaming, and edge-deployed performance
• When integrating third-party services (loyalty, CMS, personalization) directly into the storefront
• When you want a Shopify-managed backend with a completely custom frontend stack

Prerequisites & Platform Notes

This skill is written for custom/headless storefronts (Node.js, Python, or similar backend). The code examples use TypeScript/Node.js and can be adapted to any stack.