メニュー
Core Shopify Hydrogen APIs — createHydrogenContext, cart handler, CartForm, caching strategies, pagination, SEO, variant selection, analytics, and CSP.
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 | shopify-hydrogen |
| description | Core Shopify Hydrogen APIs — createHydrogenContext, cart handler, CartForm, caching strategies, pagination, SEO, variant selection, analytics, and CSP. |
Hydrogen is Shopify's opinionated stack for headless commerce, built on React Router v7. It provides utilities, handlers, and components for building storefronts on top of the Shopify Storefront API.
All exports come from @shopify/hydrogen, which re-exports everything from @shopify/hydrogen-react.
Source: https://github.com/Shopify/hydrogen/tree/main/packages/hydrogen/src
For the most up-to-date Hydrogen API docs, use the search script:
node scripts/search_shopify_docs.mjs "<query>"
This queries Shopify's developer docs (shopify.dev) directly and returns the latest API references, code examples, and guides for Hydrogen.
Examples:
node scripts/search_shopify_docs.mjs "createHydrogenContext"
node scripts/search_shopify_docs.mjs "CartForm actions"
node scripts/search_shopify_docs.mjs "caching strategies"
node scripts/search_shopify_docs.mjs "getSeoMeta"
node scripts/search_shopify_docs.mjs "Pagination component"
For offline/cached reference, see the references/ folder below.
The single entry point to set up all Hydrogen services in server.ts. Creates and wires together storefront, customerAccount, and cart.
PUBLIC_STORE_DOMAIN, PUBLIC_STOREFRONT_API_TOKEN, PRIVATE_STOREFRONT_API_TOKEN, PUBLIC_STOREFRONT_ID, PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID, SHOP_ID{ storefront, customerAccount, cart }| Strategy | maxAge | staleWhileRevalidate | Use for |
|---|---|---|---|
CacheNone() | — | — | User-specific or real-time data |
CacheShort() | 1s | 9s | Frequently changing data |
CacheLong() | 1hr | 23hr | Stable data (shop info, menus) |
CacheCustom({...}) | custom | custom | Fine-grained control |
createCartHandler provides all cart operations: get, create, addLines, updateLines, removeLines, updateDiscountCodes, addGiftCardCodes, updateBuyerIdentity, updateNote, setMetafields, and more.
Form component for cart mutations. Uses CartForm.ACTIONS enum (LinesAdd, LinesUpdate, LinesRemove, DiscountCodesUpdate, etc.) and submits via React Router's useFetcher.
Applies pending cart mutations locally for instant UI feedback. Requires selectedVariant in LinesAdd inputs.
getPaginationVariables(request, { pageBy }) + <Pagination connection={...}> component. GraphQL query must include pageInfo { hasPreviousPage hasNextPage startCursor endCursor }.
getSeoMeta(...) generates React Router meta arrays. Supports title, titleTemplate, description, url, media, jsonLd, robots, alternates. jsonLd is concatenated across routes.
getSitemapIndex + getSitemap — two-level sitemap generation. Requires Storefront API 2024-10+.
createContentSecurityPolicy({ shop: { checkoutDomain, storeDomain } }) returns { nonce, header, NonceProvider }.
For offline/cached reference when the search script is unavailable:
| File | Contents |
|---|---|
| references/01-setup.md | Full server.ts setup, env vars, session, createHydrogenContext options |
| references/02-caching.md | Cache strategies, AllCacheOptions type, generateCacheControlHeader |
| references/03-cart.md | Cart route setup, CartForm examples, useOptimisticCart patterns |
| references/04-ssr-performance.md | SSR bundle diet (worker inlines dynamic imports — resolveId stub pattern), bundle audit, TTFB measurement methodology |