Shopify Hydrogen Storefront

Build headless Shopify storefronts with Hydrogen. Generates product pages, cart logic, checkout flows, collection filters, and Storefront API queries with server-side rendering on Oxygen or Vercel.

This skill helps you build custom Shopify storefronts using Hydrogen, Shopify's React-based headless framework. It generates product detail pages, collection grids with filtering, cart management with optimistic updates, checkout integration, and SEO-optimized routes using Shopify's Storefront API.

When to use

Use when building custom Shopify storefronts that need more design freedom than Liquid themes, creating headless commerce experiences, or migrating from Liquid to a React-based storefront.

Examples

Product page with variants

Build a product detail page with variant selection

Create a Hydrogen product page with variant selector, image gallery, add-to-cart with optimistic UI, and related products section

Collection with filters

Build a filterable product collection page

Build a Hydrogen collection page with price range, vendor, and availability filters using Storefront API filter inputs