← All work
Hydrogen + Oxygen Case study · 2026

Rodeo Soul Harmony × The Castellows

Hydrogen + Oxygen headless landing for the Rodeo Soul Harmony fragrance launch with The Castellows. Built as a subdomain on Shopify's React framework with full cart round-trip to the parent store.

Visit live ↗
§01 · Overview
Stack
  • Shopify Hydrogen
  • Shopify Oxygen
  • Remix
  • React
  • TypeScript
  • Storefront API
  • Figma
Role
  • Frontend Development
  • Headless Commerce
  • Cart Integration
Timeline
  • June 2026
Client
  • Tru Western
Scope
  • Hydrogen storefront on Oxygen runtime, subdomain of the parent Tru Western store
  • Variant-aware Add to Cart flow on the Storefront API
  • Sticky cart bar that syncs state across page navigations
  • Video hero with audio toggle and scroll-reveal scent pyramid
  • Lighthouse 90+ on mobile
  • Figma handoff to production deploy in roughly two months
§02 · Summary

Rodeo Soul Harmony × The Castellows is the launch landing for a co-branded fragrance under Tru Western. The brief was a fast, brand-led drop page that could carry video, scent storytelling, and a clean buy-now flow, hosted as a subdomain of an existing Shopify Plus store.

I built it on Shopify Hydrogen with Oxygen as the runtime. The page is a Remix app served from Shopify’s edge, but it has to round-trip cart and variant state cleanly back to the parent Tru Western catalog. That meant a variant-aware Add to Cart on top of the Storefront API, a sticky cart bar that keeps the same state across navigations, and a Customer Account hand-off that does not break checkout.

Beyond the commerce plumbing, the page is video-led: hero with audio toggle, scroll-reveal scent pyramid, sectioned editorial blocks, and a small set of motion details that land without slowing the page down. Lighthouse stayed at 90+ on mobile through delivery. End-to-end work, Figma handoff to production deploy, ran roughly two months.

Got a project like this?