Los desarrolladores de WooCommerce que han creado frontends personalizados en React o Vue impulsados por la API REST de WooCommerce tienen una opción paralela en Shopify: el comercio headless mediante la Storefront API de Shopify y el framework Hydrogen. Esta guía abarca la arquitectura técnica para desarrolladores que evalúan si optar por headless en Shopify tras la migración.

WooCommerce headless — el patrón existente

Las configuraciones headless de WooCommerce suelen usar:

WooCommerce REST API: Productos, carrito, pedidos, clientes — todo mediante REST
WordPress + WPGraphQL: Capa GraphQL sobre los datos de WordPress/WooCommerce (muy popular con Next.js)
CoCart: Extensión de la API REST específicamente para la gestión del carrito desacoplado (gestiona las sesiones sin el login de WordPress)
Frontend: Next.js, Nuxt.js, Gatsby o SPA personalizada en React
Alojamiento: Frontend en Vercel/Netlify, backend de WordPress en servidor independiente

Opciones headless en Shopify

1. Shopify Hydrogen (basado en Remix)

Hydrogen es el framework React oficial de Shopify para headless, construido sobre Remix. Lanzado en 2022, con una actualización significativa en 2023 con la reconstrucción en Remix.

React + Remix (enrutamiento basado en archivos, renderizado en el servidor, streaming)
Utilidades integradas para la obtención de datos de la Storefront API de Shopify
Componentes específicos de Shopify: ProductProvider, CartProvider, ShopPayButton, etc.
Desplegado en Oxygen (el alojamiento edge de Shopify) — incluido en todos los planes de Shopify
Implementación completa de carrito y checkout incluida en la plantilla de inicio de Hydrogen

Hydrogen es el camino recomendado para el desarrollo headless de Shopify desde cero.

2. Next.js personalizado + Storefront API de Shopify

El patrón más común para desarrolladores que ya trabajan con Next.js:

Usa el paquete npm @shopify/storefront-api-client (oficial)
Consultas GraphQL a la Storefront API para productos, colecciones, carrito y checkout
Despliega en Vercel (despliegue estándar de Next.js)
Más flexibilidad que Hydrogen, menos opinionado

3. Plataformas headless de terceros

Builder.io: CMS visual + backend de Shopify. Drag-and-drop para los responsables de marketing, capa de datos de Shopify para productos.
Nacelle: Plataforma headless específica para comercio con sincronización de Shopify y componentes React prediseñados.
Contentful/Sanity + Shopify: El CMS gestiona el contenido, Shopify gestiona el comercio — vinculados por IDs de producto.

Storefront API de Shopify

La Storefront API es la API GraphQL de solo lectura (+ mutaciones de carrito) que impulsa los escaparates headless. A diferencia de la Admin API, está diseñada para el uso en el frontend: pública, accesible desde navegadores.

// Token de acceso a la Storefront API (público, solo lectura)
const client = createStorefrontApiClient({
  storeDomain: 'tu-tienda.myshopify.com',
  apiVersion: '2024-01',
  publicAccessToken: 'storefront_xxx',
});

// Consultar productos
const { data } = await client.request(`
  query {
    products(first: 10) {
      nodes {
        id title handle
        priceRange { minVariantPrice { amount currencyCode } }
        images(first: 1) { nodes { url altText } }
        variants(first: 100) {
          nodes {
            id title availableForSale
            price { amount }
            selectedOptions { name value }
          }
        }
      }
    }
  }
`);

Gestión del carrito en la Storefront API

// Crear carrito
mutation cartCreate($input: CartInput!) {
  cartCreate(input: $input) {
    cart { id checkoutUrl lines { nodes { id quantity } } }
  }
}

// Añadir al carrito
mutation cartLinesAdd($cartId: ID!, $lines: [CartLineInput!]!) {
  cartLinesAdd(cartId: $cartId, lines: $lines) {
    cart { id totalQuantity cost { totalAmount { amount } } }
  }
}

El campo cart.checkoutUrl redirige al checkout alojado de Shopify: los escaparates headless suelen usar el checkout de Shopify (no un checkout personalizado) para gestionar el cumplimiento de PCI. Shopify Plus permite personalizar el checkout de forma extensa.

WPGraphQL + WooCommerce frente a la Storefront API de Shopify

Aspecto	WPGraphQL + WooCommerce	Storefront API de Shopify
Esquema	Automático a partir del modelo de datos de WooCommerce	Esquema fijo de Shopify (pero completo)
Campos personalizados	Campos ACF expuestos automáticamente mediante el plugin WPGraphQL ACF	Metacampos expuestos mediante la Storefront API (con lista de permitidos)
Carrito	Basado en sesión de WooCommerce (CoCart para headless)	Cart API — sin estado, basado en ID, sin sesión
Checkout	Página de checkout personalizada en el frontend (compleja)	Checkout alojado de Shopify mediante checkoutUrl
Inventario en tiempo real	Sondeo REST o suscripciones personalizadas	Campo availableForSale, quantityAvailable por variante
Auth/clientes	Tokens JWT de WordPress	Tokens de acceso de cliente mediante la Storefront API
Límites de velocidad	Depende del servidor	1000 unidades de coste/segundo (basado en el coste de GraphQL)
Alojamiento del backend	Servidor de WordPress	Shopify (sin servidor que gestionar)

¿Deberías optar por headless después de migrar a Shopify?

El comercio headless añade una complejidad de desarrollo significativa. Considéralo solo si:

Necesitas un frontend completamente personalizado que un tema de Shopify no puede ofrecer (configuradores de producto complejos, patrones de UX muy personalizados)
Necesitas una integración profunda con un CMS (Contentful, Sanity, Storyblok) para tiendas con mucho contenido
Tu equipo está familiarizado con React/Next.js y GraphQL
Necesitas un rendimiento que supere al de los temas de Shopify optimizados (rara vez es el cuello de botella)

Para la mayoría de las migraciones desde WooCommerce, un tema de Shopify bien configurado tiene un rendimiento excelente y requiere mucho menos trabajo de desarrollo. Los temas oficiales de Shopify (Dawn, Sense) están muy optimizados y son personalizables con Liquid y secciones del tema.

Si optaste por WooCommerce headless por razones de rendimiento, un tema de Shopify optimizado a menudo tiene un rendimiento comparable o superior: la CDN y la optimización de imágenes de Shopify pueden igualar el rendimiento headless personalizado en páginas de comercio típicas.

Migración de un frontend WooCommerce headless a Shopify

Si tienes un frontend WooCommerce headless existente (Next.js + WPGraphQL) y quieres mantener la misma arquitectura de frontend:

Reemplaza la capa de datos: Cambia las consultas de WPGraphQL por consultas a la Storefront API de Shopify. Mapeo de campos conforme a la tabla de correspondencias WooCommerce → Shopify.
Reescribe el carrito: Carrito basado en sesión de WooCommerce (CoCart) → Cart API de Shopify. El enfoque sin estado es más sencillo.
Redirección al checkout: Reemplaza la página de checkout de WooCommerce con una redirección a cart.checkoutUrl.
Auth: Reemplaza la autenticación JWT de WP por los tokens de acceso de cliente de la Storefront API de Shopify.
Metacampos: Los metacampos de producto deben estar en la lista de permitidos en Shopify Admin → Configuración → Datos personalizados → Acceso a Storefront para que la Storefront API pueda leerlos.

Inicio rápido de Hydrogen para desarrolladores de WooCommerce

npx degit Shopify/hydrogen/templates/skeleton mi-tienda-hydrogen
cd mi-tienda-hydrogen
npm install
cp .env.example .env

# Añade a .env:
# SESSION_SECRET=xxx
# PUBLIC_STOREFRONT_API_TOKEN=storefront_xxx
# PUBLIC_STORE_DOMAIN=tu-tienda.myshopify.com

npm run dev

La plantilla de inicio de Hydrogen incluye un listado de productos completo, página de detalle del producto, carrito y redirección al checkout. Compara esto con el significativo boilerplate necesario para una configuración headless de WooCommerce: Hydrogen gestiona el carrito y el checkout de serie sin necesidad de CoCart ni soluciones similares.

Para la mayoría de los desarrolladores de WooCommerce que evalúan Shopify: empieza con un tema normal de Shopify. Opta por headless solo si tienes requisitos específicos que los temas genuinamente no pueden satisfacer, no por rendimiento, no por "control", sino por requisitos de frontend verdaderamente personalizados.

Shopify headless para desarrolladores de WooCommerce (2026)