Qué es headless commerce
En una tienda tradicional (Shopify con tema Liquid, WooCommerce con un theme), el frontend y el backend forman un solo sistema acoplado. El motor de la tienda genera y sirve el HTML directamente, lo que limita diseño, rendimiento y libertad técnica.
En headless commerce, frontend y backend se separan:
- El backend (Shopify, BigCommerce, Commerce Layer, Medusa, Saleor) sigue gestionando catálogo, inventario, pedidos, pagos y cliente.
- El frontend se construye con cualquier framework moderno (Astro, Next.js, Nuxt, SvelteKit) y se comunica con el backend mediante APIs como la Shopify Storefront API.
El término “headless” viene de que el backend pierde su “cabeza” (la capa de presentación). Se queda con la lógica de negocio y deja la cara visible en manos del frontend.
Ventajas
- Velocidad real: un frontend en Astro o Next con renderizado estático y CDN edge entrega HTML en milisegundos, frente a temas Shopify o WooCommerce que arrastran JS y CSS innecesarios.
- Libertad de diseño total: cualquier UI, animación o flujo de compra es posible. No estás atado a los componentes del tema.
- Mejor SEO técnico: control absoluto sobre HTML, metas, schema, canonical, velocidad y Core Web Vitals.
- Reutilización omnicanal: el mismo backend alimenta web, app móvil, kiosco físico o marketplace.
- Independencia del proveedor: cambiar de plataforma de pago, de checkout o de tema no obliga a rehacer el frontend si la API se respeta.
- Stack moderno: trabajas con React, Vue, Svelte o Astro en lugar de Liquid o PHP de tema.
Desventajas y trade-offs
- Más complejidad técnica: dos sistemas en lugar de uno, dos despliegues, dos puntos de fallo.
- Coste inicial más alto: el proyecto cuesta más que instalar un tema y configurar colores.
- Algunas funcionalidades requieren reescribir UI: filtros de búsqueda, recuperación de carrito, login social.
- Apps del marketplace (especialmente en Shopify) pueden no aparecer automáticamente: muchas dependen de inyectar HTML/JS en el tema. Hay que validar app por app.
- Mantenimiento dividido: actualizaciones del backend y del frontend en ciclos independientes.
- Equipo técnico necesario: ya no basta con cambiar un tema desde el panel.
Cuándo merece la pena
Headless tiene sentido cuando:
- La marca quiere una experiencia de compra muy diferenciada que un tema estándar no cubre.
- El rendimiento es decisivo (mucho tráfico orgánico, anuncios pagados con CAC sensible al CR).
- Hay omnicanal real: web, app, físico, marketplaces, integraciones.
- El catálogo es estable y el ROI de mejorar conversión compensa el coste de desarrollo.
- El equipo (interno o externo) puede mantener un frontend custom.
No merece la pena cuando:
- La tienda factura poco y un tema cuidado ya cumple.
- No hay equipo técnico ni presupuesto para mantenimiento.
- El catálogo es muy cambiante y nadie va a tocar el frontend cada semana.
Stack típico
Una combinación habitual y probada:
- Backend: Shopify (catálogo, pagos, checkout, fiscalidad).
- Frontend: Astro con islands para piezas interactivas (carrito, buscador), prerender estático del catálogo.
- APIs: Storefront API de Shopify, Cart API.
- Hosting: Cloudflare Pages o Vercel.
- Contenido editorial: CMS headless tipo Sanity, Storyblok o Contentful para landings, blog y campañas.
- Checkout: alojado en Shopify (PCI, fraude, métodos de pago locales sin reinventar nada).
Alternativas a Shopify para headless
- Commerce Layer: API-first puro.
- Medusa: open source, autoalojable.
- Saleor: GraphQL nativo, headless desde el día 1.
- BigCommerce: tiene su propia Storefront API.
- Swell: para SaaS, suscripciones y modelos no convencionales.
Errores típicos
- Subestimar el checkout: querer reescribir el checkout completo es la decisión más cara y rara vez justificada.
- No medir velocidad: si el frontend headless acaba siendo más lento que el tema original, se ha perdido el sentido.
- Olvidar las apps del marketplace que el cliente usaba.
- No tener plan de redirects desde la tienda antigua: lee 301 redirect y migración SEO antes de cambiar URLs.
En IMPERO
Si tu tienda Shopify se ha quedado corta en diseño o velocidad y los temas no son suficientes, montamos el frontend en Astro consumiendo la Storefront API. Servicio dedicado: Shopify a Astro headless, con redirects, schema de producto y validación post-lanzamiento.