Shopify Hydrogen & Oxygen Storefront
Builds, optimizes, and deploys high-performance headless Shopify e-commerce storefronts using Hydrogen, React Router, and Oxygen.
The Shopify Storefront skill provides comprehensive architectural guidance, code patterns, and best practices for building headless e-commerce storefronts with Shopify Hydrogen and React Router/Remix, deployed on Oxygen serverless edge. It assists with version-aware routing, GraphQL Storefront API integrations, TypeScript codegen, complex cart and PDP variant workflows, and critical multi-tier edge caching to safeguard customer privacy while maximizing speed.
Características Principales
01Multi-tier edge caching patterns (CacheShort, CacheLong, CacheNone) for Oxygen
029 GitHub stars
03Framework version detection supporting React Router 7 and legacy Remix setups
04CartForm management, PDP variant state tracking, and Shopify Analytics integration
05GraphQL Storefront and Customer Account API integration with automated type generation
06Oxygen serverless edge constraint checks and pre-deploy validation
Casos de Uso
01Migrating an existing Shopify Liquid theme to a high-speed custom React Router headless storefront
02Optimizing GraphQL subrequests, bundle sizes, and worker limits for Oxygen production deployments
03Configuring secure customer account flows and cart management without caching personal data