Shopify sin cabeza con hidrógeno: cuándo y cómo
La mayoría de las tiendas Shopify no necesitan ser sin cabeza. Esa afirmación va en contra de la narrativa predominante en los círculos de desarrolladores de Shopify, donde la tecnología sin cabeza a menudo se posiciona como la evolución inevitable de toda marca de comercio electrónico seria. La realidad tiene más matices: Shopify sin cabeza es la opción correcta para un perfil específico de comerciante, y la opción equivocada para muchos otros que gastarían mucho más para lograr resultados marginalmente mejores.
Esta guía explica lo que realmente significa Shopify sin cabeza, cuándo Hydrogen (el marco sin cabeza oficial de Shopify basado en React) es la opción adecuada, cómo construir con él y cómo hacer una evaluación honesta de costo-beneficio antes de comprometerse.
Conclusiones clave
- Headless Shopify desacopla el escaparate (frontend) del motor de comercio (backend de Shopify) a través de la Storefront API
- Hydrogen es el marco oficial de Shopify basado en React para escaparates sin cabeza, creado en Remix
- La mayoría de las tiendas con ingresos anuales de menos de 5 millones de dólares se benefician mejor de los temas optimizados de Shopify 2.0 que de la arquitectura sin cabeza.
- Headless se justifica cuando: requisitos de UX altamente personalizados, integración de comercio de contenido, publicación multicanal o requisitos de rendimiento extremos
- Oxygen es la plataforma de alojamiento de Shopify para aplicaciones de Hydrogen: implementación sin configuración con red de borde global
- El costo total de propiedad de Headless es de 3 a 5 veces mayor que el de Shopify temático para mantenimiento continuo.
- La API Storefront de Shopify brinda acceso a productos, colecciones, carritos, pagos y datos del cliente.
- Remix (subyacente Hydrogen) permite la representación del lado del servidor y la transmisión de HTML para obtener excelentes Core Web Vitals
Lo que realmente significa Shopify sin cabeza
En una tienda Shopify tradicional, todo se ejecuta en la plataforma de Shopify: datos del producto, el tema del escaparate, el carrito de compras, el pago, las cuentas de los clientes y la gestión de pedidos. El lenguaje de plantilla Liquid representa las páginas de productos en el lado del servidor en la infraestructura de Shopify.
En una arquitectura Shopify sin cabeza:
- Motor de comercio (Shopify): gestiona productos, inventario, pedidos, clientes, pagos y cumplimiento, sin cambios.
- Storefront (tu interfaz personalizada): una aplicación independiente (React, Next.js, Hydrogen o cualquier marco web) que obtiene datos de Shopify a través de la API de Storefront y ofrece la experiencia de cara al cliente.
La interfaz puede ejecutarse en cualquier lugar: Vercel, Netlify, Cloudflare Workers, la propia plataforma Oxygen de Shopify o su propia infraestructura. El backend comercial sigue siendo Shopify.
¿Por qué harías esto?
La motivación para no tener cabeza es siempre una o más de:
- UX personalizado que no se puede lograr en la arquitectura del tema de sección/bloque de Shopify
- Integración de comercio de contenido: incorporar productos dentro de un CMS como Contentful, Sanity o Prismic
- Publicación multicanal: los mismos datos de producto que impulsan un sitio web, una aplicación móvil, señalización digital y comercio por voz.
- Rendimiento: control total sobre el paquete de JavaScript, la carga de componentes y la estrategia de renderizado.
- Preferencia del equipo técnico: un equipo de desarrolladores de React que encuentran incómodas las plantillas de Liquid
Hidrógeno: marco oficial sin cabeza de Shopify
Hydrogen es el marco de trabajo basado en React de Shopify para construir escaparates Shopify sin cabeza. Está construido sobre Remix (el marco React, ahora parte de React Router 7) y optimizado para la API Storefront de Shopify.
Qué aporta el hidrógeno
| Característica | Qué incluye |
|---|---|
| Cliente API de escaparate | Cliente GraphQL preconfigurado para datos de Shopify |
| Capa de almacenamiento en caché | Almacenamiento en caché inteligente con estrategia obsoleta mientras se revalida |
| Utilidades SEO | Gestión de metaetiquetas, URL canónicas, ayudantes de datos estructurados |
| Gestión de carritos | Gestión del estado del carrito con la API del carrito de Shopify |
| Transmisión de RSS | React streaming con Remix para cargas iniciales rápidas de la página |
| Análisis de Shopify | Seguimiento de eventos analíticos integrados |
| API de cuenta de cliente | Flujos de autenticación de clientes sin cabeza |
| Búsqueda predictiva | Búsqueda de Shopify con resultados mecanografiados anticipadamente |
Oxígeno: Alojamiento Edge de Shopify para Hidrógeno
Oxygen es la plataforma de implementación global de Shopify para aplicaciones de Hydrogen. Está incluido con Shopify Plus sin costo adicional. Oxygen implementa su aplicación Hydrogen en la red de borde global de Cloudflare, la misma infraestructura que utilizan las propias tiendas de Shopify.
Beneficios de Oxygen frente al alojamiento de terceros:
- Implementación sin configuración a través de Shopify CLI
- HTTPS automático en su dominio personalizado
- CDN global con almacenamiento en caché perimetral
- Integración de primera clase con la infraestructura de datos de Shopify (latencia API reducida)
- Sin salida ni cálculo de precios para volúmenes de tráfico típicos
La razón principal para elegir Vercel o Netlify en lugar de Oxygen: necesitas una función de alojamiento que Oxygen no admite (conexiones de bases de datos, integraciones de API externas que requieren tiempo de ejecución fuera del borde, etc.) o no estás en Shopify Plus.
La API de Shopify Storefront: a qué puedes acceder
La Storefront API es la API pública que Hydrogen (y cualquier implementación sin cabeza) utiliza para recuperar datos. Es una API GraphQL con tokens de acceso público: no se requiere ningún secreto del lado del servidor para las operaciones básicas.
Recursos disponibles
| Recurso | Operaciones disponibles |
|---|---|
| Productos | Buscar por identificador, ID, colección, búsqueda; variantes, metacampos, imágenes |
| Colecciones | Buscar por identificador, ID; filtrar y clasificar productos dentro de colecciones |
| Carrito | Crear, agregar/actualizar/eliminar artículos, aplicar descuentos, estimar el pago |
| Pagar | Crear pago desde el carrito (para pago fuera de Shopify) |
| Cliente | Inicio de sesión, registro, gestión de cuentas, historial de pedidos |
| Metaobjetos | Tipos de contenido estructurado personalizado |
| Búsqueda predictiva | Búsqueda en tiempo real con sugerencias |
| Blog/Artículos | Publicaciones de blog y artículos para la integración de contenido y comercio |
| Menús | Estructura de navegación |
| Tienda | Almacenar metadatos, políticas |
Lo que la API Storefront no puede hacer
| Operación | API requerida |
|---|---|
| Crear o actualizar productos | API de administración (del lado del servidor, requiere credenciales de administrador) |
| Acceder a los detalles del pedido (nivel de administrador) | API de administración |
| Crear cumplimientos | API de administración |
| Acceda a los datos personales del cliente en detalle de administrador | API de administración |
| Gestionar descuentos | API de administración |
Para obtener una funcionalidad comercial completa en una configuración headless, normalmente necesita tanto la API Storefront (pública, del lado del cliente) como la API Admin (privada, solo del lado del servidor) para operaciones de nivel de administrador.
Construyendo un escaparate de hidrógeno: conceptos básicos
Creación de proyecto
npm create @shopify/hydrogen@latest
# Select: Connect to existing Shopify store
# Enter your myshopify.com domain
# The CLI creates a Hydrogen project with Storefront API connected
Esto estructura un proyecto completo de Hidrógeno con:
- Enrutamiento Remix v2 (enrutamiento basado en archivos en
/app/routes/) - Cliente API Shopify Storefront preconfigurado
- Ejemplos de rutas de productos, recogida y carritos.
- Configuración de implementación de oxígeno.
Patrones de arquitectura central
Hydrogen utiliza el patrón de carga de Remix para la recuperación de datos del lado del servidor:
En la ruta del producto (/app/routes/products.$handle.tsx), la función del cargador obtiene datos del producto de la API Storefront en el servidor, los procesa con React y transmite la respuesta HTML. Esto es fundamentalmente diferente de la representación SPA del lado del cliente: el HTML está completo cuando llega al navegador, lo cual es fundamental para SEO y Core Web Vitals.
El carrito: complejidad del lado del cliente
El carrito en Hydrogen utiliza la API de carrito de Shopify (un carrito persistente en el servidor, no basado en almacenamiento local). Hydrogen proporciona un contexto CartProvider y un gancho useCart que administra el estado del carrito y se sincroniza con la API del carrito de Shopify. Las operaciones del carrito (agregar, actualizar, eliminar) son optimistas: la interfaz de usuario se actualiza inmediatamente y la llamada a la API se realiza en segundo plano.
Redireccionamiento de pago
El flujo de pago estándar de Hydrogen redirige a los clientes a la URL de pago alojada de Shopify. Esto significa que tu interfaz personalizada maneja la experiencia de la tienda, pero el proceso de pago en sí aún se ejecuta en la infraestructura de Shopify (con todos los pagos de Shopify, la confianza y la optimización del proceso de pago integrados).
Para los comerciantes de Shopify Plus que también desean un pago totalmente personalizado, la extensibilidad del pago es el camino adecuado, no crear un pago personalizado fuera de Shopify.
Cuando vale la pena sin cabeza
Utilice este marco de decisión:
| Consideración | ¿Justificado sin cabeza? |
|---|---|
| Ingresos anuales | Por debajo de 5 millones de dólares: probablemente no. Más de 10 millones de dólares: evaluar seriamente |
| Requisitos de UX personalizados | Si se puede lograr en los temas de Shopify 2.0: no. Si es verdaderamente único: sí |
| Integración de plataforma de contenidos | Contentful/Sanity/Prismic como CMS: headless es el enfoque correcto |
| Necesidades de datos multicanal | Mismos datos para web, aplicación, quiosco: headless habilita esto |
| Equipo de desarrolladores | Comodidad de la plantilla líquida: mantente nativo. Equipo React: viable sin cabeza |
| Requisitos de rendimiento | El tema estándar obtiene buenas puntuaciones: no. SLA de desempeño específico: evaluar |
| Presupuesto de mantenimiento | Puede soportar un costo de desarrollo continuo entre 3 y 5 veces mayor: considérelo. No puedo: seguir siendo nativo |
El argumento del desempeño: a menudo exagerado
Muchos defensores de los acéfalos citan el desempeño como la principal justificación. Pero el tema Dawn de Shopify (y los temas premium bien optimizados) logran excelentes puntuaciones en Core Web Vitals. La diferencia en el límite de rendimiento entre un tema nativo bien optimizado y una aplicación Hydrogen bien optimizada suele ser marginal para el tráfico del mundo real.
Donde sin cabeza realmente gana en rendimiento: páginas de catálogo de productos muy pesadas con filtrado complejo, experiencias editoriales ricas en medios con video y animación, y sitios que requieren estrategias agresivas de almacenamiento en caché que la CDN de Shopify por sí sola no puede optimizar.
El argumento de la integración de contenido y comercio: a menudo infraponderado
El argumento más sólido a favor de la tecnología headless es la integración del comercio de contenidos. Las marcas que publican contenido editorial junto con productos (lookbooks, recetas, guías prácticas que incorporan productos) se benefician enormemente de un modelo de contenido unificado. Un CMS Contentful o Sanity con referencias de productos extrae datos de productos de la API Storefront de Shopify y presenta contenido editorial y comercial en una página unificada y optimizada para SEO. Esto no se puede lograr en Shopify nativo sin compromisos importantes.
Tema sin cabeza versus tema nativo: comparación de costos totales
| Factor de costo | Tema nativo de Shopify | Hidrógeno sin cabeza |
|---|---|---|
| Desarrollo inicial | $5,000–$25,000 (compra del tema + personalización) | $50 000–$200 000 |
| Alojamiento | Incluido en la suscripción a Shopify | Oxígeno (incluido en Plus) o Vercel/Netlify ($50–$500/mes) |
| Compatibilidad de aplicaciones | Ecosistema completo de aplicaciones Shopify | Limitado: muchas aplicaciones requieren compatibilidad nativa con Liquid |
| Mantenimiento continuo | Bajo: Shopify mantiene la infraestructura | Alto: su equipo mantiene la infraestructura frontend |
| Actualizaciones de la plataforma Shopify | Automático | Debe implementar cambios importantes en la API manualmente |
| Disponibilidad del desarrollador | Muchos desarrolladores de temas de Shopify | Menos desarrolladores específicos de hidrógeno (tarifas diarias más altas) |
| Hora de lanzar | 4 a 12 semanas | 16–52 semanas |
La diferencia de costos es real y significativa. Para una marca con ingresos anuales de 2 millones de dólares, Shopify sin cabeza podría costar 150.000 dólares en desarrollo inicial y 50.000 dólares al año en mantenimiento, eclipsando el costo de la suscripción a Shopify Plus. El cálculo del ROI debe mostrar un impacto significativo en los ingresos de la UX mejorada para justificarlo.
Compatibilidad de aplicaciones: el desafío oculto sin cabeza
El ecosistema de la aplicación Shopify está diseñado principalmente para escaparates nativos basados en Liquid. Muchas aplicaciones populares de Shopify inyectan JavaScript en el tema Liquid; no tienen un equivalente de Storefront API.
Aplicaciones que funcionan sin cabeza
| Aplicación | Compatible sin cabeza | Cómo |
|---|---|---|
| Klaviyo | Sí | Seguimiento de eventos del lado del servidor mediante API |
| Recargar | Sí | Integración de API de escaparate |
| Reseñas de Yotpo | Parcial | API Storefront para lecturas; escritura limitada |
| Gorgias | Sí | Widget de JavaScript integrado en cualquier interfaz |
| Juez.me | Sí | Integración API Storefront disponible |
| Recomprar | Sí (parcial) | Recomendaciones de API de escaparate |
Aplicaciones que no funcionan sin cabeza
La mayoría de las aplicaciones de Shopify que utilizan la integración de temas de Liquid, ScriptTag o checkout.liquid no son compatibles con escaparates sin cabeza. Esto incluye muchas herramientas de CRO, algunas aplicaciones de fidelización y plataformas de revisión heredadas.
Antes de quedarse sin cabeza, audite toda la pila de aplicaciones para verificar la compatibilidad. Cada aplicación incompatible requiere: (1) encontrar una alternativa compatible sin cabeza, (2) crear una funcionalidad personalizada o (3) aceptar la pérdida de esa funcionalidad.
Alternativa: el enfoque "híbrido"
En lugar de estar totalmente autónomos, muchos comerciantes se benefician de un enfoque híbrido:
- Tema estándar de Shopify para la mayor parte de la tienda (alta compatibilidad de aplicaciones, bajo mantenimiento)
- Aplicación React personalizada para páginas específicas de alto valor (página de inicio, páginas de productos) donde la experiencia de usuario única importa
- API Storefront de Shopify que impulsa los componentes personalizados dentro del tema nativo
Este modelo híbrido reduce el costo y la complejidad al tiempo que ofrece una experiencia de usuario personalizada donde más importa.
Preguntas frecuentes
¿Necesito Shopify Plus para una implementación headless de Hydrogen?
No: Hydrogen y Storefront API están disponibles en todos los planes de Shopify. El hosting de Oxygen (la plataforma perimetral de Shopify para Hydrogen) requiere Shopify Plus. En otros planes, aloja la aplicación Hydrogen en Vercel, Netlify, Cloudflare Workers o cualquier host compatible con Node.js. El acceso a Storefront API y el marco Hydrogen están completamente disponibles independientemente del plan.
¿Cómo funciona el SEO en una tienda headless de Hydrogen?
Hydrogen utiliza la representación del lado del servidor de Remix, que produce HTML completo en el servidor, el mismo enfoque que los temas Liquid nativos de Shopify. Los rastreadores de los motores de búsqueda reciben HTML completamente renderizado con todo el contenido del producto visible. Hydrogen incluye utilidades de SEO para metaetiquetas, URL canónicas y datos estructurados. La ventaja de SEO frente a las SPA de CSR (representación del lado del cliente) es significativa; frente a los temas nativos de Shopify, la diferencia es marginal si ambos están configurados correctamente.
¿Cuál es la diferencia entre Hydrogen y Next.js Commerce para Shopify?
Ambos son marcos basados en React para Shopify sin cabeza. Hydrogen es el marco oficial de Shopify, construido sobre Remix, con integración de primera clase de Shopify Storefront API, alojamiento de Oxygen y ayudantes específicos de Shopify (carrito, pago, análisis). Next.js Commerce es el kit de inicio de código abierto de Vercel para comercio electrónico sin cabeza que admite múltiples plataformas, incluido Shopify. Hydrogen tiene una optimización más profunda específica de Shopify; Next.js Commerce ofrece más flexibilidad si puede cambiar de plataforma comercial o necesita funciones específicas de Next.js.
¿Puedo usar el proceso de pago de Shopify con una interfaz headless?
Sí, este es el patrón estándar sin cabeza. Su interfaz personalizada de Hydrogen maneja el escaparate y, en el momento del pago, redirige a la URL de pago alojada de Shopify (generada a partir del campo checkoutUrl de la API del carrito). Esto le brinda una experiencia de usuario completa y personalizada para el descubrimiento de productos y el carrito, y el proceso de pago optimizado y probado en conversión de Shopify para el paso de pago. Checkout Extensibility (Shopify Plus) permite personalizar el proceso de pago de Shopify con extensiones.
¿Cuánto tiempo suele tardar una implementación de Hidrógeno?
Un escaparate de Hydrogen completamente personalizado que reemplaza un tema maduro de Shopify: de 16 a 52 semanas, según la complejidad. Una implementación de Hydrogen más sencilla para el lanzamiento de una nueva tienda sin complejidades heredadas: de 8 a 16 semanas. Los factores clave del cronograma son: complejidad del diseño personalizado, cantidad de tipos de productos y tamaño del catálogo, reemplazos necesarios del ecosistema de aplicaciones y experiencia del equipo con Hydrogen específicamente.
Próximos pasos
Headless Shopify with Hydrogen es una arquitectura poderosa para el comerciante adecuado, pero la decisión requiere una evaluación honesta de sus requisitos de UX, capacidad de desarrollador, presupuesto y dependencias del ecosistema de aplicaciones.
Los servicios Shopify Plus de ECOSIRE incluyen consultoría de arquitectura sin cabeza, desarrollo de escaparates de Hydrogen, integración de API de Storefront e implementación de Oxygen. Ayudamos a los comerciantes a evaluar si la tecnología headless es la opción correcta y a ejecutar la implementación cuando lo sea, incluidos enfoques híbridos que ofrecen una experiencia de usuario personalizada a un costo menor que la tecnología headless.
Programe una consulta sobre arquitectura headless para evaluar sus requisitos específicos y obtener una recomendación honesta sobre si Shopify headless es la inversión adecuada para su tienda.
Escrito por
ECOSIRE Research and Development Team
Construyendo productos digitales de nivel empresarial en ECOSIRE. Compartiendo perspectivas sobre integraciones Odoo, automatización de eCommerce y soluciones empresariales impulsadas por IA.
Artículos relacionados
Case Study: eCommerce Migration to Shopify with Odoo Backend
How a fashion retailer migrated from WooCommerce to Shopify and connected it to Odoo ERP, cutting order fulfillment time by 71% and growing revenue 43%.
Composable Commerce: The Future of eCommerce Architecture
Explore composable commerce and MACH architecture—how API-first, headless components are replacing monolithic platforms and enabling faster, more flexible eCommerce.
Integrating GoHighLevel CRM with eCommerce Stores
Step-by-step guide to integrating GoHighLevel CRM with Shopify and WooCommerce. Sync orders, automate post-purchase flows, and recover abandoned carts at scale.