mcpField
H
hydrogen-cookbooks

hydrogen-cookbooks

github.com/weaverseDevelopment92149 installsUpdated 2w ago
Repository

About hydrogen-cookbooks

A collection of step-by-step recipes for implementing features in Shopify Hydrogen storefronts. Each guide includes prerequisites, code and file changes, implementation notes, and troubleshooting, with offline references and documentation search helpers.

Key features

  1. 01Self-contained feature recipes
  2. 02Step-by-step code and file changes
  3. 03Prerequisites and implementation notes
  4. 04Troubleshooting guidance
  5. 05Offline references and documentation search

Use cases

  1. 01Adding product bundle displays
  2. 02Setting up Customer Account API
  3. 03Migrating from Remix v2 to React Router v7
  4. 04Implementing performance or media features

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/weaverse/shopify-hydrogen-skills --skill hydrogen-cookbooks

After installing, type/hydrogen-cookbooksin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
bundles.md
combined-listings.md
customer-account-api.md
hydrogen-react-router.md
model-viewer.md
performance-best-practices.md
variant-media-grouping.md
weaverse-hydrogen-integration.md

Details

From the project README

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

Run these from this skill's own folder. The helpers ship inside the sibling shopify-hydrogen skill, so ../shopify-hydrogen/scripts/ exists whenever the whole pack is installed.

If you installed this skill on its own, that folder is absent and the commands below fail with MODULE_NOT_FOUND. Add the helpers once:

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

The references/ files in this skill remain a usable offline fallback if you would rather not install it.

For the latest Hydrogen cookbook recipes from Shopify:

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

For Weaverse-specific patterns:

node ../shopify-hydrogen/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

CookbookDescription
bundles.mdDisplay product bundles with badges and bundled variant line items in the cart
combined-listings.mdHandle combined listings — utilities, filters, media grouping, price range display
customer-account-api.mdSet up the Customer Account API with tunnel for local dev
hydrogen-react-router.mdImport replacement guide: Remix v2 → React Router v7
model-viewer.md3D model support (.glb/.usdz) with ModelViewer component and AR
performance-best-practices.mdCaching strategies, streaming, deferred data, third-party scripts, query optimization
variant-media-grouping.mdGroup product media by variant option (e.g. Color)
weaverse-hydrogen-integration.mdComplete 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.

Comments

Markdown supported