hydrogen-cookbooks

Original：🇺🇸 English

Translated

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.

2installs

Sourceweaverse/shopify-hydrogen-skills

Added on2026-04-09

NPX Install

npx skill4agent add weaverse/shopify-hydrogen-skills hydrogen-cookbooks

SKILL.md Content

View Translation Comparison →

Hydrogen Cookbooks

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.

Live Documentation

For the latest Hydrogen cookbook recipes from Shopify:

bash

node scripts/search_shopify_docs.mjs "hydrogen cookbook <topic>"

For Weaverse-specific patterns:

bash

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.

Available Cookbooks

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

How to Use

Each cookbook describes:

What the feature does
Prerequisites to check first
Step-by-step implementation — file changes, code snippets, diffs
Troubleshooting — common issues and fixes

Recipe file names reference the Hydrogen skeleton template. Adapt file paths to match your project's structure.