Hydrogen + Oxygen
Rodeo Soul Harmony × The Castellows
为 Rodeo Soul Harmony 香水与 The Castellows 联名发布打造的 Hydrogen + Oxygen 无头登陆页。作为 Tru Western 主店子域名构建，购物车与主店实时同步。
访问网站 ↗§01 · 概述
技术栈
- Shopify Hydrogen
- Shopify Oxygen
- Remix
- React
- TypeScript
- Storefront API
- Figma
角色
- 前端开发
- 无头电商
- 购物车集成
时间线
- June 2026
客户
- Tru Western
范围
- 在 Oxygen 运行时上运行的 Hydrogen 店面，作为 Tru Western 主店的子域名
- 基于 Storefront API 的变体识别加购流程
- 跨页面导航同步状态的固定购物车栏
- 视频英雄区，带音频开关和滚动揭示的香气金字塔
- 移动端 Lighthouse 90+ 分
- 从 Figma 到生产部署用时约两个月
§02 · 详情
Rodeo Soul Harmony × The Castellows 是 Tru Western 旗下联名香水的发布登陆页。任务是打造一个快速、品牌主导的发售页面，能够承载视频、香气叙事和清晰的购买流程，并作为现有 Shopify Plus 店铺的子域名运行。
我使用 Shopify Hydrogen 构建了这个页面，运行在 Oxygen 之上。页面是从 Shopify 边缘节点提供的 Remix 应用，但购物车和变体状态必须与 Tru Western 主店目录完美同步。这意味着需要在 Storefront API 之上实现变体识别加购，构建跨导航保持状态的固定购物车栏，以及不破坏结账流程的 Customer Account 切换。
除了电商部分，页面以视频为主导：带音频开关的英雄区，滚动揭示的香气金字塔，编排过的编辑模块，以及一小组不会拖慢页面的动效细节。整个交付期内，移动端 Lighthouse 始终保持在 90 分以上。端到端工作，从 Figma 到生产部署，历时约两个月。