Shopify headless con Hydrogen: cuándo tiene sentido

Qué significa headless en Shopify

En una tienda Shopify normal, el tema de Online Store 2.0 se encarga de todo lo que ve el cliente: páginas, colecciones, fichas y carrito. Shopify lo sirve, lo cachea y lo conecta con el editor de temas, las apps y los idiomas sin que tengas que pensar en servidores.

En una tienda headless, ese tema desaparece. El frontal es una aplicación independiente que pide los datos a Shopify a través de la Storefront API: productos, colecciones, precios, carrito. Shopify sigue gestionando el catálogo, el inventario, los pedidos y el checkout, pero lo que ve el cliente lo construyes y lo mantienes tú.

Hydrogen y Oxygen

Hydrogen es el framework oficial de Shopify para tiendas headless. Está basado en React y en React Router (antes Remix) y trae piezas preparadas para trabajar con la Storefront API: carrito, consultas de producto, analítica, SEO y caché. Ahorra mucho trabajo frente a montar todo desde cero con otro framework.

Oxygen es la infraestructura de Shopify para alojar tiendas Hydrogen, incluida en la mayoría de planes de pago. No es obligatorio usarla, pero simplifica los despliegues y evita contratar un alojamiento aparte. Si prefieres otro framework, como Next.js, también puedes hacer headless sin Hydrogen, solo que renuncias a esas piezas integradas.

Qué ganas con headless

La gran ventaja es la libertad. Puedes construir experiencias que un tema no permite con facilidad, integrar Shopify con otros sistemas en una sola web o servir varias tiendas desde un mismo frontal.

• Interfaces muy a medida, como configuradores de producto complejos
• Contenido gestionado desde un CMS headless junto al catálogo de Shopify
• Una misma web que mezcla tienda, contenido editorial y aplicaciones propias
• Control total del rendimiento y de cómo se carga cada página
• Un frontal común para varias tiendas o marcas

Qué pierdes o tienes que rehacer

Aquí está la parte que menos se cuenta. Al quitar el tema, pierdes el editor de temas: el equipo de marketing ya no puede mover secciones ni cambiar bloques sin desarrollo, salvo que montes un CMS o uses metaobjetos como fuente de contenido.

Las apps de la App Store que se instalan en el tema con bloques de app, como reseñas, filtros o widgets de fidelización, no funcionan solas en un frontal headless. Cada una hay que integrarla por API, si la app lo permite. Lo mismo pasa con funciones que en un tema vienen dadas, como algunos aspectos de idiomas, mercados o datos estructurados, que tendrás que implementar tú.

Y el coste no termina al publicar. Una tienda headless es una aplicación que hay que mantener: actualizar dependencias, seguir los cambios de la API y corregir lo que se rompa. Necesitas un equipo de desarrollo disponible de forma continua.

El checkout sigue siendo de Shopify

Aunque el frontal sea headless, el pago se hace en el checkout de Shopify. Es una ventaja, porque mantienes Shopify Payments, los métodos de pago, los impuestos y la seguridad del checkout sin desarrollarlos. Las personalizaciones del checkout se hacen igual que en cualquier tienda, con Checkout Extensibility y Shopify Functions, según lo que permita tu plan.

Lo mismo ocurre con el resto del admin: catálogo, inventario, descuentos, pedidos, clientes, Markets y Flow siguen funcionando como siempre. El equipo que gestiona la tienda en el día a día apenas nota el cambio; quien lo nota es quien edita el contenido de la web y quien la mantiene técnicamente.

Alternativas intermedias antes de ir a headless

Entre un tema estándar y una tienda headless completa hay mucho terreno. Muchas de las razones por las que una marca piensa en headless se resuelven sin salir del tema, con menos coste y sin perder el editor.

Un tema de Online Store 2.0 hecho a medida permite diseños totalmente propios, secciones que el equipo combina como quiera y contenido estructurado con metaobjetos. Las experiencias interactivas, como un configurador de producto o un comparador, se pueden construir como componentes dentro del tema, cargando su JavaScript solo en las páginas que lo necesitan.

Otra opción es un enfoque mixto: mantener la tienda en el tema y llevar a una aplicación aparte solo la parte que lo justifica, como una herramienta de diseño personalizado o un área privada para profesionales, conectada a Shopify por API. Así concentras el coste de desarrollo donde aporta y el resto de la tienda sigue siendo fácil de mantener.

• Tema a medida con secciones y bloques propios
• Metaobjetos para contenido editorial estructurado
• Componentes interactivos cargados solo donde se usan
• Aplicación separada para una función concreta, conectada por API

Cuándo tiene sentido y cuándo no

Headless compensa en proyectos con necesidades de experiencia que un tema no cubre, con un equipo técnico propio o un partner estable, y con presupuesto para mantener una aplicación a largo plazo. Marcas grandes con mucho contenido editorial, varias tiendas o experiencias interactivas son el caso típico.

Para la mayoría de tiendas, un tema de Online Store 2.0 desarrollado a medida cubre lo que necesitan: diseño propio, secciones flexibles, metaobjetos, buen rendimiento y compatibilidad con todo el ecosistema de apps. Si lo que buscas es velocidad, un tema bien hecho y sin apps de sobra suele bastar. Antes de ir a headless, pregúntate qué no puedes hacer con un tema y si de verdad compensa lo que cuesta mantenerlo.