He migrado más de una docena de tiendas Shopify a arquitecturas headless durante los últimos tres años. Algunas fueron sin problemas. Algunas fueron pesadillas. La diferencia casi siempre se debió a la planificación — específicamente, si el equipo entendía realmente en qué se estaban metiendo antes de escribir la primera línea de código.

Esta guía cubre todo lo que desearía que alguien me hubiera dicho antes de mi primera migración headless de Shopify: qué framework frontend elegir, cómo preservar tus rankings de SEO, cómo lograr cero tiempo de inactividad durante el cambio, cuánto cuesta realmente, y cronogramas realistas según la complejidad de la tienda. Sin rodeos. Sin "depende" sin explicar de qué depende.

Tabla de Contenidos

Migración de Shopify a Headless: Guía Next.js, Hydrogen y Remix

¿Por Qué Migrar de Shopify a Headless?

Sacuemos esto del camino: Shopify estándar es excelente para la mayoría de tiendas. Si haces menos de $2M/año y tu tema hace lo que necesitas, probablemente no necesites headless. En serio. He disuadido a más gente de esta migración de la que he convencido.

Pero hay razones legítimas para ir headless:

  • Techo de rendimiento: Los temas Liquid tienen un cuello de botella de renderización. Incluso con Online Store 2.0 y Dawn, estás limitado por el pipeline de renderización del lado del servidor de Shopify. Las tiendas headless consistentemente alcanzan puntuaciones LCP de menos de 1 segundo.
  • Experiencias personalizadas: Configuradores de productos, pruebas de AR, filtrado complejo, motores de personalización — estos son difíciles de construir en Liquid.
  • Multi-escaparate: Un backend alimentando tu sitio DTC, portal mayorista, aplicación móvil y tiendas internacionales.
  • Marcas ricas en contenido: Si tu marca se basa fuertemente en contenido editorial, lookbooks y storytelling, acoplar un CMS headless con el motor de comercio de Shopify te da lo mejor de ambos mundos.
  • Experiencia del desarrollador: Tu equipo quiere trabajar en React/TypeScript, no Liquid. Esto importa más de lo que la gente admite.

Las ganancias de rendimiento son reales y medibles. En 2025, los Core Web Vitals de Google impactan directamente tus rankings de búsqueda. Las tiendas que he migrado a headless típicamente ven una mejora del 30-50% en LCP y una mejora del 40-60% en Total Blocking Time. Eso se traduce en mejoras de tasa de conversión medibles — los datos propios de Shopify sugieren que una mejora del 1% en velocidad de página puede aumentar la conversión hasta un 0.7%.

Arquitectura Headless de Shopify Explicada

Cuando la gente dice "Shopify headless", se refieren a desacoplar el frontend (lo que los clientes ven) del backend (motor de comercio de Shopify). Mantienes Shopify para productos, inventario, pedidos, checkout y pagos. Construyes un frontend personalizado que se comunica con Shopify a través de la Storefront API.

Aquí está la arquitectura típica:

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│   Frontend Personalizado│────▶│  Storefront API   │────▶│  Backend Shopify │
│  (Next.js/H2/Remix)│   │  (GraphQL)        │     │  (Productos, Carrito, │
│                 │     │                  │     │   Pedidos, etc.)  │
└─────────────────┘     └──────────────────┘     └─────────────────┘
        │
        ▼
┌─────────────────┐
│  CMS Headless    │
│  (Sanity, Contentful,│
│   Storyblok)     │
└─────────────────┘

Los comerciantes de Shopify Plus obtienen acceso a la API de Extensibilidad de Checkout, que te permite personalizar el checkout sin redirigir al checkout alojado de Shopify. Para tiendas que no son Plus, los clientes aún se redirigen a checkout.shopify.com para la compra real — que honestamente no es una mala experiencia, pero sí es una interrupción de UX.

La Storefront API

Todo se ejecuta a través de la Storefront API de Shopify, un endpoint GraphQL que maneja:

  • Consultas de productos y colecciones
  • Gestión del carrito (crear, actualizar, eliminar artículos de línea)
  • Autenticación del cliente
  • Contenido (metafields, metaobjects)
  • Localización y moneda de la tienda

La API tiene límites de velocidad — 50 puntos de costo por segundo para una sola aplicación. En la práctica, esto rara vez es un problema si estás almacenando en caché correctamente, pero puede afectarte durante ventas relámpago si no has planeado para ello.

# Ejemplo: Obtener un producto con variantes
query ProductQuery($handle: String!) {
  product(handle: $handle) {
    id
    title
    descriptionHtml
    priceRange {
      minVariantPrice {
        amount
        currencyCode
      }
    }
    variants(first: 100) {
      edges {
        node {
          id
          title
          availableForSale
          price {
            amount
          }
          selectedOptions {
            name
            value
          }
        }
      }
    }
    images(first: 10) {
      edges {
        node {
          url
          altText
          width
          height
        }
      }
    }
  }
}

Elegir Tu Frontend: Next.js vs Hydrogen vs Remix

Aquí es donde la mayoría de equipos se atascan. Aquí está mi opinión honesta después de construir tiendas de producción con los tres.

Característica Next.js 15 Hydrogen 2024.10+ Remix (Shopify)
Madurez del framework Muy madura, ecosistema masivo Madurando, específico de Shopify Madura (fusionada en React Router 7)
Integración Shopify Manual a través de Storefront API Hooks de primera parte, integrados Buena vía Hydrogen UI
Hosting Vercel, Netlify, auto-alojado Oxygen (Shopify) o auto-alojado En cualquier lugar, pero optimizado para Oxygen
Curva de aprendizaje Moderada Moderada-Alta Moderada
Comunidad/contratación Masiva Pequeña pero creciente Mediana
Flexibilidad SSR/SSG Excelente (App Router) Enfocada en SSR (streaming) Enfocada en SSR (loaders)
Control de caché ISR, revalidación bajo demanda Almacenamiento en caché de sub-solicitud de Oxygen Almacenamiento en caché HTTP estándar
Mejor para Equipos con experiencia React, necesidades complejas de contenido Equipos nativos de Shopify, tiendas simples a medianas Equipos que desean la ruta recomendada de Shopify

Next.js: La Opción Segura

Next.js es lo que recomiendo para la mayoría de equipos, especialmente si estás emparejando Shopify con un CMS headless como Sanity o Contentful. El ecosistema es enorme, la contratación es más fácil, y obtienes una flexibilidad increíble con los componentes del servidor del App Router.

La desventaja? Tienes que hacer el cableado de la integración de Shopify tú mismo. No hay SDK oficial de Shopify para Next.js (aunque los paquetes comunitarios como @shopify/hydrogen-react te dan hooks de carrito y utilidades). Pasarás más tiempo en boilerplate.

Construimos muchas tiendas headless de Shopify con Next.js en Social Animal — es nuestro stack más solicitado para proyectos de comercio electrónico.

Hydrogen: El Propio Framework de Shopify

Hydrogen es el framework headless oficial de Shopify, construido sobre Remix (ahora React Router 7). Viene con componentes preconstruidos para productos, carritos y SEO — además de integración estrecha con Oxygen, la plataforma de hosting de borde de Shopify.

El atractivo es claro: menos boilerplate, almacenamiento en caché optimizado para Shopify, e historia de implementación que simplemente funciona en Oxygen. El lanzamiento 2024.10 trajo mejoras significativas incluyendo mejor soporte TypeScript y actualizaciones de UI optimistas para operaciones de carrito.

¿Las desventajas? Comunidad más pequeña, menos recursos cuando estás atascado, y estás algo bloqueado en el ecosistema de Shopify. Si alguna vez quieres cambiar backends de comercio, estás reescribiendo mucho más código de lo que lo harías con Next.js.

Remix / React Router 7

Aquí está la parte confusa: Remix ha sido fusionada con React Router 7. Hydrogen está construido sobre Remix. Entonces "Remix para Shopify" efectivamente significa Hydrogen en la mayoría de contextos.

Si quieres usar React Router 7 sin las abstracciones específicas de Shopify de Hydrogen, puedes. Obtendrás los mismos patrones de loader/action, el mismo SSR de streaming, y control total sobre tu integración de Shopify. Esto tiene sentido si ya eres un equipo de Remix y quieres máxima flexibilidad.

Mi Recomendación

Para marcas ricas en contenido con layouts de página complejos: Next.js + CMS headless. Para tiendas DTC simples que desean el camino más rápido a producción: Hydrogen en Oxygen. Para equipos ya invertidos en el ecosistema de Remix: React Router 7 con componentes de Hydrogen UI.

Migración de Shopify a Headless: Guía Next.js, Hydrogen y Remix - arquitectura

El Proceso de Migración Paso a Paso

Aquí está el proceso que sigo para cada migración. Es aburrido. Funciona.

Fase 1: Auditoría y Planificación (2-3 semanas)

  1. Rastrear el sitio existente — Usa Screaming Frog o Sitebulk para catalogar cada URL, redirección, etiqueta canónica y bloque de datos estructurados. Expórtalo. Lo necesitarás después.
  2. Documentar todas las integraciones — Klaviyo, reseñas de Yotpo, programas de lealtad, aplicaciones de suscripción (Recharge, Loop), gateways de pago. Todas y cada una.
  3. Mapear estructuras de URL — ¿Coincidirán tus nuevas URLs con las antiguas? Shopify usa /products/product-handle y /collections/collection-handle. Si cambias estos, necesitas redirecciones.
  4. Identificar funcionalidad personalizada — Cualquier cosa más allá de examinar y comprar estándar. Tarjetas de regalo, paquetes, precios al por mayor, multi-moneda, B2B.
  5. Elegir tu stack — Framework frontend, CMS, hosting, CDN.

Fase 2: Construir el Frontend (6-12 semanas)

Aquí es donde sucede el desarrollo real. Áreas clave:

  • Páginas de producto con selección de variante, galerías de imágenes, integración de reseñas
  • Páginas de colección con filtrado, ordenamiento, paginación
  • Carrito con verificaciones de inventario en tiempo real y upsells
  • Búsqueda — API de Búsqueda Predictiva de Shopify o terceros como Algolia
  • Cuentas de cliente — login, historial de pedidos, gestión de direcciones
  • Páginas impulsadas por CMS — inicio, acerca de, páginas de destino
  • Redirección de checkout — manejar la entrega a checkout de Shopify
// Ejemplo: Página de producto Next.js con ISR
import { getProduct } from '@/lib/shopify'
import { ProductDetails } from '@/components/product-details'

export async function generateStaticParams() {
  const products = await getAllProductHandles()
  return products.map((handle) => ({ handle }))
}

export default async function ProductPage({ 
  params 
}: { 
  params: { handle: string } 
}) {
  const product = await getProduct(params.handle)
  
  if (!product) notFound()

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(generateProductJsonLd(product)),
        }}
      />
      <ProductDetails product={product} />
    </>
  )
}

export const revalidate = 60 // ISR: revalidar cada 60 segundos

Fase 3: Integración y QA (2-4 semanas)

Conecta todos los servicios de terceros. Prueba todo. Y quiero decir todo:

  • Realiza pedidos de prueba en todos los métodos de pago
  • Prueba códigos de descuento, tarjetas de regalo, descuentos automáticos
  • Verifica el rastreo de análisis (GA4, Meta Pixel, TikTok Pixel)
  • Prueba de carga las llamadas de la Storefront API bajo tráfico esperado
  • Prueba en dispositivos reales, no solo Chrome DevTools

Fase 4: Cambio (1-2 días)

El cambio real. Más sobre esto en la sección de cero tiempo de inactividad a continuación.

Preservación de SEO Durante la Migración

Aquí es donde las migraciones salen mal. He visto tiendas perder el 40% del tráfico orgánico porque alguien olvidó las redirecciones de URL. No seas ese equipo.

Mapeo de URL

Crea un documento de mapeo de URL completo antes de escribir una sola regla de redirección. Cada URL en el sitio antiguo necesita un destino en el sitio nuevo.

ANTIGUA: /collections/summer-2024
NUEVA: /collections/summer-2024  ← ¿Igual? Genial, no se requiere redirección.

ANTIGUA: /blogs/news/our-story
NUEVA: /journal/our-story  ← ¿Diferente? Se requiere redirección 301.

ANTIGUA: /pages/about-us
NUEVA: /about  ← ¿Diferente? Se requiere redirección 301.

Datos Estructurados

Los temas de Shopify incluyen datos estructurados básicos. Cuando vas headless, eres responsable de implementarlo tú mismo. Como mínimo:

  • Schema Product con offers, aggregateRating
  • BreadcrumbList para navegación
  • Organization para tu marca
  • WebSite con SearchAction para búsqueda de sitelinks
  • FAQPage donde sea aplicable

Etiquetas Meta y Canónicas

Cada página necesita <title> apropiado, <meta description>, URL canónica y etiquetas Open Graph. En Next.js, usa la API de Metadata:

export async function generateMetadata({ params }): Promise<Metadata> {
  const product = await getProduct(params.handle)
  
  return {
    title: product.seo.title || product.title,
    description: product.seo.description || product.description,
    openGraph: {
      images: [product.featuredImage?.url],
    },
    alternates: {
      canonical: `https://yourstore.com/products/${params.handle}`,
    },
  }
}

Mapa del Sitio XML

Genera tu mapa del sitio dinámicamente desde los datos de Shopify. Incluye productos, colecciones y páginas de CMS. Envíalo a Google Search Console inmediatamente después de la migración.

Lista de Verificación Pre-Migración de SEO

  • Documento de mapeo de URL completo
  • Redirecciones 301 configuradas y probadas
  • Datos estructurados implementados y validados
  • Etiquetas meta extrayendo de campos SEO de Shopify
  • Mapa del sitio XML generado dinámicamente
  • robots.txt configurado correctamente
  • Google Search Console notificada de cambio de dominio (si aplica)
  • Enlaces internos actualizados a nueva estructura de URL
  • Textos alternativos de imagen preservados de Shopify

Estrategia de Migración con Cero Tiempo de Inactividad

Cero tiempo de inactividad no es magia. Es gestión de DNS y preparación.

El Enfoque de Implementación Azul-Verde

  1. Construir e implementar el sitio nuevo en un dominio de staging (p. ej., new.yourstore.com)
  2. Ejecutar ambos sitios simultáneamente durante al menos una semana, probando minuciosamente el sitio nuevo
  3. Configurar tu CDN/DNS para soportar cambio instantáneo (Cloudflare, Vercel, o Netlify todos lo soportan)
  4. Cambiar DNS para apuntar al nuevo frontend — TTL debe establecerse en 60 segundos con anticipación
  5. Monitorear todo: tasas de error, 404s, tasas de conversión, Core Web Vitals

El Enfoque de Proxy (Aún Más Seguro)

Para tiendas que hacen más de $1M/mes, prefiero una migración basada en proxy:

  1. Pon un proxy inverso (Cloudflare Workers, Vercel Edge Middleware) frente a ambos sitios antiguo y nuevo
  2. Enruta tráfico página por página — comienza con una página de bajo riesgo como /about
  3. Mueve gradualmente páginas al nuevo frontend durante 2-4 semanas
  4. Monitorea el rendimiento de cada página antes de mover el lote siguiente
  5. Las páginas de producto y colección van al final (mayor riesgo de ingresos)

Este enfoque añade complejidad pero te permite detectar problemas antes de que afecten toda tu tienda.

// Ejemplo de Vercel Edge Middleware para migración gradual
import { NextResponse } from 'next/server'

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl
  
  // Páginas ya migradas al nuevo frontend
  const migratedPaths = ['/about', '/contact', '/journal']
  
  if (migratedPaths.some(path => pathname.startsWith(path))) {
    return NextResponse.next() // Servir desde nuevo frontend
  }
  
  // Todo lo demás hace proxy a la vieja tienda Shopify
  return NextResponse.rewrite(
    new URL(pathname, 'https://old-store.myshopify.com')
  )
}

Desglose de Precios y Cronogramas

Hablemos números reales. Estos se basan en proyectos que he visto en 2025, que van desde tiendas DTC simples hasta operaciones complejas de múltiples mercados.

Complejidad de Tienda Cronograma Costo de Agencia Costo de Freelancer
Simple (< 50 productos, páginas básicas, checkout estándar) 8-12 semanas $40,000 - $75,000 $20,000 - $40,000
Media (50-500 productos, CMS, suscripciones, multi-moneda) 12-20 semanas $75,000 - $150,000 $40,000 - $80,000
Compleja (500+ productos, B2B+DTC, checkout personalizado, múltiples integraciones) 20-32 semanas $150,000 - $300,000+ $80,000 - $150,000

Costos Continúos

No olvides los gastos recurrentes:

  • Shopify Plus: $2,300/mes (requerido para extensibilidad de checkout, recomendado para headless)
  • Hosting: $20-500/mes (Vercel Pro es $20/usuario, Oxygen se incluye con Shopify)
  • CMS Headless: $0-500/mes (Sanity, Contentful, Storyblok todos tienen capas gratuitas)
  • Búsqueda: $0-500/mes si usas Algolia o similar
  • Mantenimiento: Presupuesta 10-15% del costo de construcción inicial anualmente

Para equipos explorando cuál sería el costo de una migración headless de Shopify para su situación específica, desglosamos nuestro enfoque de precios aquí. También estamos felices de delimitar las cosas en una llamada rápida.

Errores Comunes en la Migración

1. Subestimar el Carrito

El carrito parece simple hasta que factores en: códigos de descuento, descuentos automáticos, tarjetas de regalo, propiedades de artículos de línea, notas de carrito, envío estimado, cálculos de impuestos, y metafields a nivel de carrito. Presupuesta el doble del tiempo que crees que necesitas para funcionalidad de carrito.

2. Olvidar Sobre las Aplicaciones

Ese ecosistema de aplicaciones de Shopify en el que confías? La mayoría de aplicaciones inyectan JavaScript en tu tema Liquid. Ir headless significa que necesitas alternativas basadas en API o implementaciones personalizadas para reseñas, listas de deseos, programas de lealtad, y más.

3. Personalización de Checkout

Sin Shopify Plus ($2,300/mes), no puedes personalizar la experiencia de checkout. Los clientes serán redirigidos al checkout alojado de Shopify, lo que crea una desconexión visual. Los comerciantes de Plus pueden usar Checkout Extensibility, pero sigue siendo más limitado que un checkout completamente personalizado.

4. No Probar Rendimiento Temprano

La Storefront API añade latencia. Si estás haciendo 8 llamadas de API para renderizar una página de producto, lo sentirás. Almacena en caché agresivamente, usa fragmentos de GraphQL para minimizar over-fetching, e implementa SSR de streaming donde sea posible.

5. Ignorar al Equipo de Contenido

Tu equipo de marketing gestionaba contenido en el admin de Shopify. Ahora necesitan un CMS headless. Presupuesta tiempo para entrenamiento y construir una experiencia de edición de contenido que sea realmente agradable de usar. Aquí es donde la experiencia en desarrollo de CMS headless realmente importa.

Cuándo Headless No es la Opción Correcta

Seré directo contigo: headless Shopify no es para todos. No migres si:

  • Tu tienda hace menos de $1M/año y no tienes necesidades complejas de personalización
  • No tienes presupuesto para desarrollo y mantenimiento continuo
  • Tu equipo no tiene desarrolladores React (o presupuesto para contratarlos)
  • Estás feliz con el rendimiento y características de tu tema actual
  • Estás principalmente buscando una historia "tech cool" en lugar de resolver problemas de negocio reales

Shopify's Online Store 2.0 con un tema bien optimizado puede puntuar 90+ en Lighthouse. A veces la respuesta correcta es optimizar lo que tienes en lugar de reconstruir desde cero.

Si estás indeciso, considera comenzar con un enfoque híbrido: mantén tu tema de Shopify pero construye páginas específicas de alto impacto (como tu página de inicio o páginas de destino) como headless. Puedes usar la Storefront API de Shopify junto con tu tema existente. Esto te permite probar valor antes de comprometerte con una migración completa.

Preguntas Frecuentes

¿Cuánto tiempo toma migrar de Shopify a headless? Para una tienda de complejidad media típica, espera 12-20 semanas desde el inicio hasta el lanzamiento. Las tiendas simples con menos productos y funcionalidad básica pueden lanzarse en 8-12 semanas. Las tiendas complejas de múltiples mercados con checkout personalizado e integraciones extensas a menudo toman 20-32 semanas. La fase de auditoría y planificación sola debe ser 2-3 semanas — no la saltes.

¿Perderé mis rankings de SEO cuando migre de Shopify a headless? No si lo haces bien. Las claves son: mantener la misma estructura de URL (u configurar redirecciones 301 apropiadas), implementar datos estructurados en cada tipo de página, preservar meta tags y URLs canónicas, y enviar un mapa del sitio actualizado a Google Search Console inmediatamente después del lanzamiento. Típicamente veo una fluctuación de 1-2 semanas en rankings post-migración, seguido de mejora una vez que Google reconoce las mejores puntuaciones de Core Web Vitals.

¿Necesito Shopify Plus para headless? Técnicamente, no. La Storefront API está disponible en todos los planes de Shopify. Sin embargo, Shopify Plus te da Checkout Extensibility (personaliza la experiencia de checkout), límites de tasa de API más altos, y acceso al hosting de Oxygen. Para proyectos headless serios, Plus a $2,300/mes casi siempre vale la pena.

¿Cuál es la diferencia entre Hydrogen y usar Next.js con Shopify? Hydrogen es el framework headless oficial de Shopify construido sobre Remix/React Router 7. Incluye componentes, hooks y utilidades específicos de Shopify de inmediato, más implementación optimizada en Oxygen. Next.js requiere que construyas la integración de Shopify tú mismo pero te da un ecosistema más grande, más opciones de hosting, y mejor soporte para arquitecturas de contenido complejas. La mayoría de agencias, incluyendo la nuestra, tienen opiniones fuertes aquí basadas en los requisitos específicos del proyecto.

¿Puedo migrar a headless Shopify con cero tiempo de inactividad? Sí, usando una implementación azul-verde (cambio de DNS) o una migración gradual basada en proxy. El enfoque azul-verde cambia todo el tráfico de una vez vía DNS, mientras que el enfoque proxy migra páginas incrementalmente durante semanas. Ambos funcionan. El enfoque proxy es más seguro para tiendas de ingresos altos pero añade complejidad.

¿Cuánto cuesta una migración headless de Shopify? Los costos de agencia típicamente varían de $40,000 para una tienda simple a $300,000+ para operaciones complejas de múltiples mercados. Las tasas de freelancer son aproximadamente 50-60% de los costos de agencia pero pueden venir con menos estructura de gestión de proyecto y menos especialistas. Los costos continúos incluyen Shopify Plus ($2,300/mes), hosting ($20-500/mes), CMS ($0-500/mes), y mantenimiento (10-15% del costo de construcción anualmente).

¿Debería usar Astro en lugar de Next.js o Hydrogen para headless Shopify? Astro es una excelente opción para sitios ricos en contenido con islas de interactividad, y hemos construido varios escaparates impulsados por Astro. Funciona bien para tiendas de estilo de catálogo donde la mayoría de páginas son estáticas y solo necesitas React (o Svelte, Vue) para componentes interactivos como el carrito. Sin embargo, para tiendas con mucha interactividad del lado del cliente — inventario en tiempo real, filtrado complejo, búsqueda instantánea — el tiempo de ejecución completo de React de Next.js o Hydrogen es generalmente un mejor ajuste.

¿Qué sucede con mis aplicaciones de Shopify después de migrar a headless? La mayoría de aplicaciones de Shopify que inyectan código frontend (popups, widgets, pantallas de reseña) no funcionarán de inmediato. Necesitarás usar la API de la aplicación directamente, encontrar una alternativa compatible con headless, o construir implementaciones personalizadas. Las aplicaciones que solo operan en el backend (gestión de inventario, envío, integraciones ERP) típicamente continúan funcionando sin cambios. Siempre audita tu stack de aplicaciones durante la fase de planificación.