hydrogen-cookbooks

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

用于在Shopify Hydrogen店面中构建特定功能的具体分步指南。每篇指南都是独立的实操方案，包含代码、文件修改说明和实现注意事项。

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.

获取Shopify官方最新的Hydrogen指南方案：

bash

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

获取Weaverse专属模式相关内容：

bash

node scripts/search_weaverse_docs.mjs "<topic>"

下方列出的是经过整理的指南，其中可能包含在线文档中没有的Weaverse专属模式。

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

指南	说明
bundles.md	在购物车中展示带标识的商品捆绑包以及捆绑变体明细项
combined-listings.md	处理组合列表：工具函数、筛选器、媒体分组、价格区间展示
customer-account-api.md	通过隧道配置Customer Account API，用于本地开发
hydrogen-react-router.md	导入替换指南：Remix v2 → React Router v7
model-viewer.md	通过ModelViewer组件和AR功能支持3D模型（.glb/.usdz格式）
performance-best-practices.md	缓存策略、流式渲染、延迟数据加载、第三方脚本处理、查询优化
variant-media-grouping.md	按变体选项（例如颜色）对商品媒体资源进行分组
weaverse-hydrogen-integration.md	完整的Weaverse集成方案：组件注册、主题Schema、数据获取

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.

每篇指南都包含以下内容：

功能说明：该特性的作用
前置条件：需要先确认的准备事项
分步实现流程：文件修改、代码片段、差异对比
问题排查：常见问题及解决方案

指南中的文件名参考Hydrogen骨架模板，请根据你的项目结构调整文件路径。