메뉴
Step-by-step implementation guides for building features in a Shopify Hydrogen storefront — bundles, combined listings, customer accounts, 3D models, performance, variant media, and Weaverse integration.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Set up, create, scaffold, or clone a new Weaverse Hydrogen storefront locally from a Weaverse theme. Use CLI-first setup, boot a live demo-store preview before asking for Shopify credentials, then make it the merchant's own with env, GitHub, and Builder preview connection.
End-to-end analytics & conversion tracking on Shopify Hydrogen — GTM, GA4 (browser + Measurement Protocol), Meta Pixel + CAPI, Google Ads, consent mode, CSP, Oxygen full-page cache. Real-world patterns from production deployments.
Use when reading or updating live Weaverse content programmatically — pulling projects/pages/theme settings, bulk-editing page content, pushing AI-generated copy, deleting pages, or uploading media to Shopify for use in Weaverse. Triggers on requests to update a Weaverse project via API, push content to a live project, run bulk content edits, or upload images/assets to Shopify from automation.
Build Shopify Hydrogen storefronts with Weaverse — components, schemas, loaders, theming, data fetching, React Router v7, deployment, and advanced features.
Use when recreating a Figma design as Hydrogen + Weaverse pages in this repo — turning a Figma file, frame, or flow into reusable Weaverse sections. Triggers on a figma.com URL, "build this design", "implement this Figma", or "create the storefront from the design". The Figma counterpart of cloning-websites-to-weaverse.
Use when generating Weaverse project export JSON for import into the Weaverse editor. Triggers on requests to create, build, or produce a Weaverse project JSON file from a site migration, design spec, page layout description, or existing export. Also use when converting section plans into importable project and pages data.
| name | hydrogen-cookbooks |
| description | Step-by-step implementation guides for building features in a Shopify Hydrogen storefront — bundles, combined listings, customer accounts, 3D models, performance, variant media, and Weaverse integration. |
Concrete, step-by-step guides for building specific features in a Shopify Hydrogen storefront. Each cookbook is a self-contained recipe with code, file changes, and implementation notes.
For the latest Hydrogen cookbook recipes from Shopify:
node scripts/search_shopify_docs.mjs "hydrogen cookbook <topic>"
For Weaverse-specific patterns:
node scripts/search_weaverse_docs.mjs "<topic>"
The references below are curated guides that may include Weaverse-specific patterns not available in the live docs.
| Cookbook | Description |
|---|---|
| bundles.md | Display product bundles with badges and bundled variant line items in the cart |
| combined-listings.md | Handle combined listings — utilities, filters, media grouping, price range display |
| customer-account-api.md | Set up the Customer Account API with tunnel for local dev |
| hydrogen-react-router.md | Import replacement guide: Remix v2 → React Router v7 |
| model-viewer.md | 3D model support (.glb/.usdz) with ModelViewer component and AR |
| performance-best-practices.md | Caching strategies, streaming, deferred data, third-party scripts, query optimization |
| variant-media-grouping.md | Group product media by variant option (e.g. Color) |
| weaverse-hydrogen-integration.md | Complete Weaverse integration: component registration, theme schema, data fetching |
Each cookbook describes:
Recipe file names reference the Hydrogen skeleton template. Adapt file paths to match your project's structure.