← Todos los trabajos
Hydrogen + Oxygen Caso de estudio · 2026

Rodeo Soul Harmony × The Castellows

Landing headless en Hydrogen + Oxygen para el lanzamiento de la fragancia Rodeo Soul Harmony con The Castellows. Construida como subdominio sobre el framework de React de Shopify, con sincronización completa del carrito hacia la tienda principal.

Ver sitio en vivo ↗
§01 · Resumen
Stack
  • Shopify Hydrogen
  • Shopify Oxygen
  • Remix
  • React
  • TypeScript
  • Storefront API
  • Figma
Rol
  • Frontend Development
  • Headless Commerce
  • Cart Integration
Plazo
  • June 2026
Cliente
  • Tru Western
Alcance
  • Storefront Hydrogen sobre el runtime de Oxygen, en subdominio de la tienda principal Tru Western
  • Flujo de Add to Cart con detección de variantes sobre la Storefront API
  • Barra de carrito persistente que sincroniza estado entre navegaciones
  • Hero con video, toggle de audio y revelación por scroll de la pirámide olfativa
  • Lighthouse 90+ en mobile
  • De Figma a producción en aproximadamente dos meses
§02 · Detalle

Rodeo Soul Harmony × The Castellows es la landing del lanzamiento de una fragancia co-branded bajo Tru Western. El brief era una página rápida y dirigida por la marca, capaz de mostrar video, narrar la historia olfativa y entregar un flujo de compra limpio, alojada como subdominio de una tienda Shopify Plus existente.

La construí sobre Shopify Hydrogen con Oxygen como runtime. La página es una app Remix servida desde el edge de Shopify, pero tiene que sincronizar el estado de carrito y variantes con el catálogo principal de Tru Western. Eso significa un Add to Cart con detección de variantes sobre la Storefront API, una barra de carrito persistente que mantiene el mismo estado entre navegaciones, y un hand-off de Customer Account que no rompe el checkout.

Más allá de la parte comercial, la página está dirigida por video: hero con toggle de audio, pirámide olfativa que se revela con el scroll, bloques editoriales y un conjunto pequeño de detalles de motion que aterrizan sin frenar la página. Lighthouse se mantuvo en 90+ en mobile durante toda la entrega. Trabajo de extremo a extremo. De Figma a producción en aproximadamente dos meses.

¿Tienes un proyecto así?