Skip to content
Todos los trabajosCaso de estudio · 2026
Hydrogen + Oxygen2026

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.

Rodeo Soul Harmony × The Castellows, landing headless, lanzada el 11 de junio de 2026

Rodeo Soul Harmony × The Castellows, landing headless, lanzada el 11 de junio de 2026

§01Resumen
CASO DE ESTUDIO · 2026Ver en vivo ↗
Stack
  • Shopify Hydrogen
  • Shopify Oxygen
  • Remix
  • React
  • TypeScript
  • Storefront API
  • Figma
Rol
  • Desarrollo Frontend
  • Comercio Headless
  • Integración de Carrito
Plazo
junio de 2026
Scope
  • ·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
Rodeo Soul Harmony × The CastellowsJAIMEBUILDS · 2026
§02Resumen

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.

¿Quieres este tipo de trabajo para tu marca?

Agenda 20 minutos