skills.rest
tomtoto757
tomtoto757COMMUNITY
Explore all skills by this author →
GitHub

shopify-hydrogen

Build Shopify headless storefronts with Hydrogen and deploy to Oxygen.

14|3|Updated Mar 22, 2026
Search Tags:#react#headless#shopify#remix#hydrogen#oxygen#storefront-api
One-click install
npx skills add https://github.com/tomtoto757/ecomm-ai-skills-hub --skill shopify-hydrogen-tomtoto757
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shopify-hydrogen
Source: https://github.com/tomtoto757/ecomm-ai-skills-hub/tree/main/skills/platform-integrations-infrastructure/finsilabs/headless-modern/shopify-hydrogen
Command: npx skills add https://github.com/tomtoto757/ecomm-ai-skills-hub --skill shopify-hydrogen-tomtoto757

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Hydrogen streamlines building a fully custom Shopify storefront with server-side rendering, Storefront API integration, and edge deployment so teams can deliver fast, flexible storefronts without reinventing core commerce primitives.

Core Features & Use Cases

  • Scaffold & Project Setup: Guidance for creating a Hydrogen project, wiring Remix routing, and configuring Storefront API credentials.
  • Data & Cart Integration: Patterns for using storefront.query, colocated GraphQL loaders, server-side cart actions, and secure cart persistence via cookies.
  • Performance & Deployment: Recommended caching strategies (CacheLong/CacheShort/CacheNone), Remix streaming techniques, and automated Oxygen deployments via GitHub Actions.
  • Use Case: Build a multi-market headless storefront that serves cached catalog pages from the edge while loading personalized recommendations without blocking render.

Quick Start

Scaffold a Hydrogen app, set the required environment variables for the Storefront API, run the dev server to verify routes, and deploy to Oxygen via the Shopify CLI.

Frequently Asked Questions about shopify-hydrogen

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a custom Shopify headless storefront using Hydrogen?▼

To build a custom Shopify headless storefront using Hydrogen, you scaffold a project, wire Remix routing, configure Storefront API credentials, and use colocated GraphQL loaders to fetch catalog data. You then deploy the application to Oxygen via GitHub Actions.

What is the best way to manage cart state in a Remix Shopify storefront?▼

The best way to manage cart state in a Remix Shopify storefront is by using server-side cart actions. You securely persist cart data via cookies and execute cart mutations through Remix actions, ensuring sensitive operations remain on the server.

How does caching work for Shopify Storefront API queries in Hydrogen?▼

Caching for Shopify Storefront API queries in Hydrogen works by applying specific caching strategies like CacheLong, CacheShort, or CacheNone. This allows you to serve cached catalog pages from the edge while fetching personalized data without blocking the render.

Can I deploy a Remix application to Shopify Oxygen using GitHub Actions?▼

Yes, you can deploy a Remix application to Shopify Oxygen using GitHub Actions. Automated Oxygen deployments are configured via GitHub Actions and the Shopify CLI, pushing your custom headless storefront to the edge for fast CDN delivery.

Do I need Remix to use Shopify Hydrogen for a headless storefront?▼

Yes, you need Remix to use Shopify Hydrogen for a headless storefront. Hydrogen is built on Remix, relying on its routing, server-side loaders, and streaming techniques to render pages and handle server-side cart actions effectively.

Related Skills

Explore More Software Engineering Skills→
finsilabsfinsilabs
44

shopify-hydrogen

Develop custom Shopify storefronts with Hydrogen, Remix, and the Storefront API.

Official
Advanced
vecearvecear

caching-cdn-strategy-planner

Design multi-layer caching strategies with CDN, edge, and server-side invalidation workflows.

Community
Advanced
saleorsaleor
29

writing-graphql-operations

Generate type-safe GraphQL queries and mutations for the Saleor API.

Official
Advanced
enigmaicon-engenigmaicon-eng
1

shopify-expert

Implement Shopify themes, apps, and headless storefronts with Liquid, GraphQL, and Remix.

Community
Advanced