Skip to content
所有作品案例研究 · 2026
Hydrogen + Oxygen2026

Rodeo Soul Harmony × The Castellows

为 Rodeo Soul Harmony 香水与 The Castellows 联名发布打造的 Hydrogen + Oxygen 无头登陆页。作为 Tru Western 主店子域名构建,购物车与主店实时同步。

Rodeo Soul Harmony × The Castellows 无头登陆页,2026 年 6 月 11 日发布

Rodeo Soul Harmony × The Castellows 无头登陆页,2026 年 6 月 11 日发布

§01概述
案例研究 · 2026在线访问 ↗
技术栈
  • Shopify Hydrogen
  • Shopify Oxygen
  • Remix
  • React
  • TypeScript
  • Storefront API
  • Figma
角色
  • 前端开发
  • 无头电商
  • 购物车集成
时间线
2026年6月
范围
  • ·在 Oxygen 运行时上运行的 Hydrogen 店面,作为 Tru Western 主店的子域名
  • ·基于 Storefront API 的变体识别加购流程
  • ·跨页面导航同步状态的固定购物车栏
  • ·视频英雄区,带音频开关和滚动揭示的香气金字塔
  • ·移动端 Lighthouse 90+ 分
  • ·从 Figma 到生产部署用时约两个月
Rodeo Soul Harmony × The CastellowsJAIMEBUILDS · 2026
§02简介

Rodeo Soul Harmony × The Castellows 是 Tru Western 旗下联名香水的发布登陆页。任务是打造一个快速、品牌主导的发售页面,能够承载视频、香气叙事和清晰的购买流程,并作为现有 Shopify Plus 店铺的子域名运行。

我使用 Shopify Hydrogen 构建了这个页面,运行在 Oxygen 之上。页面是从 Shopify 边缘节点提供的 Remix 应用,但购物车和变体状态必须与 Tru Western 主店目录完美同步。这意味着需要在 Storefront API 之上实现变体识别加购,构建跨导航保持状态的固定购物车栏,以及不破坏结账流程的 Customer Account 切换。

除了电商部分,页面以视频为主导:带音频开关的英雄区,滚动揭示的香气金字塔,编排过的编辑模块,以及一小组不会拖慢页面的动效细节。整个交付期内,移动端 Lighthouse 始终保持在 90 分以上。

端到端工作,从 Figma 到生产部署,历时约两个月。

想为你的品牌做类似的工作?

预约 20 分钟沟通