Hydrogen cookbooks

Skill Weaverse/shopify-hydrogen-skills/skills/hydrogen-cookbooks

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.From its SKILL.md

Install

npx -y skills add Weaverse/shopify-hydrogen-skills --skill hydrogen-cookbooks

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

SKILL.md

2.3 KB, 458 tokens by cl100k_base, as published. Nobody here has run it

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:

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.

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.

What ships with it: 8 files

84.6 KB alongside SKILL.md