Cómo integrar las API de Shopify Storefront con el CMS de Webflow para crear sitios de comercio electrónico escalables basados en contenido

Shopify es excelente en los aspectos del comercio que deben ser precisos: precios, inventario, impuestos y pago. Webflow destaca en lo que convence a alguien para comprar: guías de compra, catálogos, páginas de destino de campañas e historias de productos que el equipo de marketing puede editar sin tener que abrir un ticket.

El problema es que estos dos sistemas suelen vivir separados, por lo que los datos de los productos se copian manualmente y quedan obsoletos en cuanto cambia un precio.

La API Storefront de Shopify cierra esa brecha. Es una API GraphQL que expone productos, colecciones, variantes y precios a cualquier interfaz que quieras construir.

Puedes importar esos datos a Webflow CMS para que tu equipo de contenido trabaje con datos del catálogo en tiempo real en lugar de una hoja de cálculo desactualizada. Cuando la sincronización se ejecuta en Webflow Cloud, todo el proceso reside junto a tu sitio en el edge, manteniendo tus tokens de API en el lado del servidor, donde deben estar.

Esta guía construye un camino concreto de principio a fin: una sincronización programada en el servidor que lee productos de la API Storefront de Shopify y los escribe en una colección de Webflow CMS como elementos editables y en tiempo real.

¿Qué necesitas para integrar la API Storefront de Shopify con Webflow CMS?

Necesitas una tienda Shopify con el canal Headless instalado, un token de acceso a la API Storefront, un sitio de Webflow con una colección CMS diseñada para productos y un proyecto de Webflow Cloud para ejecutar la sincronización.

Ambas plataformas tienen todo lo necesario en sus planes estándar. Aquí tienes la lista completa de lo que debes tener listo antes de empezar.

Una tienda Shopify con el canal Headless

Necesitas una tienda Shopify y el canal de ventas Headless instalado desde la Shopify App Store. El canal Headless es la forma estándar en que Shopify proporciona acceso a la API Storefront para una tienda personalizada.

Una vez instalado, aparece en la sección de canales de venta de tu panel de administración, y cada tienda que crees allí genera los tokens de acceso que requiere la API. No necesitas un plan Shopify Plus para esto; la API Storefront está disponible en los planes estándar de Shopify.

El canal admite hasta 100 tiendas activas por comercio, lo cual es mucho más de lo que necesita una sola integración.

Si todavía usas el antiguo JS Buy SDK, ten en cuenta que Shopify lo retiró a principios de 2025 y ahora dirige todas las nuevas implementaciones directamente a la API Storefront, por lo que empezar aquí te mantiene en el camino correcto y con soporte.

Un token de acceso a la API Storefront con permisos de producto

La sincronización lee productos y colecciones, por lo que necesita un token con el unauthenticated_read_product_listings scope, que otorga acceso a los objetos de Producto y Colección.

El canal Headless emite dos tipos de tokens para cada tienda:

• Un token de acceso público enviado en el X-Shopify-Storefront-Access-Token header
• Un token de acceso privado enviado en el Shopify-Storefront-Private-Token encabezado

El token público está diseñado para exponerse en un navegador, mientras que el privado debe permanecer secreto y en el lado del servidor. Como esta sincronización se ejecuta completamente en el servidor, cualquiera de los dos funciona, y yo uso el token público almacenado como secreto del lado del servidor por su sencillez.

Configuras los alcances exactos por tienda, así que concede solo lo que la sincronización necesite leer.

Una colección de CMS de Webflow modelada para productos

Necesitas un sitio de Webflow con una colección de CMS cuyos campos reflejen los datos de productos de Shopify que pretendes almacenar. Como mínimo, eso significa un nombre, un slug, un precio, una descripción, una imagen de producto y un campo de texto plano para guardar el ID del producto de Shopify, lo que permite que las sincronizaciones repetidas actualicen el artículo correcto en lugar de crear un duplicado.

Modelar bien esta colección es la diferencia entre una sincronización que se mantiene limpia y una que te dará problemas más adelante, y vale la pena leer la guía sobre cómo estructurar colecciones de CMS antes de comprometerte con un esquema.

Escribir en la colección requiere un token de API con el CMS:write alcance.

Un proyecto de Webflow Cloud para ejecutar la sincronización

Necesitas un proyecto de Webflow Cloud que ejecute una aplicación Next.js, ya sea desplegada o inicializada localmente con la CLI de Webflow. Webflow Cloud ejecuta tu código en Cloudflare Workers en el borde a través del adaptador OpenNext, por lo que la sincronización se ejecuta cerca de tus datos y nunca inicia un servidor tradicional.

Se requiere Node.js 22.13.0 o superior localmente para ejecutar la CLI. Un detalle del entorno de ejecución es importante para el código siguiente: el entorno de Workers admite la API Fetch de forma nativa, pero no proporciona módulos de Node como http o fs, por lo que la sincronización utiliza fetch estándar en lugar de cualquier SDK dependiente de Node. Esta misma restricción define cada integración de Webflow Cloud.

7 pasos para sincronizar productos de Shopify en el CMS de Webflow

La construcción se divide en tres fases. Primero, aprovisionas el acceso en ambas plataformas: un token de API de Storefront de Shopify y un token de sitio más una colección de Webflow. Luego, escribes el lado de lectura, un manejador de rutas (Route Handler) que consulta la API de Storefront mediante GraphQL y pagina el catálogo completo.

Finalmente, escribes el lado de escritura, la lógica de transformación y actualización (upsert) que asigna cada producto de Shopify a un elemento del CMS de Webflow y lo publica en vivo.

Vamos paso a paso.

1. Crea un token de API de Storefront en Shopify

Instala el canal Headless desde la Shopify App Store si aún no está instalado. En tu panel de administración de Shopify, ve a Canales de venta y haz clic en Headless, luego haz clic en Añadir tienda para crear una. Shopify genera automáticamente un token de acceso público y uno privado para esa tienda.

Para establecer los alcances, selecciona el canal Headless, elige tu tienda de la lista y haz clic en Editar junto a los permisos de la API de Storefront. Habilita unauthenticated_read_product_listings para que el token pueda leer productos y colecciones, luego haz clic en Guardar.

Copia el token de acceso público y el dominio de la tienda (por ejemplo, your-store.myshopify.com). Almacena ambos como variables de entorno en el paso 3. El token es lo que autentica cada solicitud a la API de Storefront, y el dominio es parte de la URL del punto de conexión.

Guarda también el token privado; no lo necesitas para esta lectura del lado del servidor, pero lo necesitarás si añades consultas específicas para compradores más adelante.

2. Modela tu colección de CMS de Webflow

En el diseñador de Webflow, crea una colección de CMS llamada Productos. Añade los campos que reflejen los datos de Shopify que planeas sincronizar.

Un esquema inicial funcional consiste en un campo de texto plano para el título del producto asignado al nombre integrado, el slug integrado, un campo numérico para el precio, un campo de texto enriquecido o plano para la descripción, un campo de imagen para la imagen destacada y un campo de texto plano llamado Shopify ID.

Ese último campo es el que la gente suele pasar por alto, y omitirlo provoca la duplicación de elementos en la segunda sincronización. El campo Shopify ID almacena el identificador único del producto que devuelve la API de Storefront, y la sincronización lo utiliza para decidir si un producto ya existe en el CMS.

En cada proyecto, configuro este campo como obligatorio y lo marco como no editable en el Diseñador para que un editor no pueda borrar accidentalmente el valor que mantiene ambos sistemas sincronizados. Una vez creada la colección, abre la configuración de la colección y copia el ID de la colección; lo necesitarás en el siguiente paso.

3. Añade tus credenciales como variables de entorno

La sincronización necesita cuatro valores: el dominio de tu tienda Shopify, el token de la API de Storefront, el token del sitio Webflow y el ID de la colección de Webflow. Genera el token del sitio Webflow desde la configuración de tu sitio en Aplicaciones e integraciones, luego en Acceso a la API, y asígnale el CMS:write ámbito para que pueda crear y actualizar elementos.

Añade los cuatro valores a .env.local para el desarrollo local y a las variables de entorno de tu proyecto de Webflow Cloud para la producción:

SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
SHOPIFY_STOREFRONT_TOKEN=your_public_storefront_access_token
WEBFLOW_SITE_TOKEN=your_webflow_site_token
WEBFLOW_COLLECTION_ID=your_products_collection_id

Ninguno de estos necesita un  prefijo, porque cada valor se lee en el servidor dentro del manejador de rutas y nunca llega al navegador. En tu panel de control de Webflow Cloud, activa la opción de secreto en  y NEXT_PUBLIC_SHOPIFY_STOREFRONT_TOKENWEBFLOW_SITE_TOKEN para que se cifren en reposo y se oculten en los registros de compilación.

Leer estos valores dentro de los cuerpos de las funciones en lugar de al principio de un módulo es el patrón seguro en Webflow Cloud, y los asistentes que aparecen a continuación lo siguen.

Almacenar los tokens en el lado del servidor es exactamente la protección que una integración basada en navegador no puede ofrecer, y crear envoltorios de API del lado del servidor es una razón recurrente por la que los equipos eligen Webflow Cloud en primer lugar.

4. Consulta la API de Shopify Storefront desde un manejador de rutas

Crea un manejador de rutas que lea el catálogo. La API de Storefront es solo GraphQL, por lo que cada solicitud es un POST a https://{store}.myshopify.com/api/{version}/graphql.json con una consulta en el cuerpo.

Fija la versión de la API en lugar de usar el latest alias, porque Shopify lanza una nueva versión cada trimestre y admite cada una durante al menos doce meses; fijarla significa que una nueva versión no cambiará tus respuestas a menos que decidas actualizar.

El asistente a continuación obtiene los productos en páginas de 50 y sigue el cursor hasta agotar el catálogo:

// lib/shopify.ts

const API_VERSION = '2026-07'

type ShopifyProduct = {
  id: string
  title: string
  handle: string
  description: string
  featuredImage: { url: string; altText: string | null } | null
  priceRange: { minVariantPrice: { amount: string; currencyCode: string } }
}

const PRODUCTS_QUERY = `
  query Products($cursor: String) {
    products(first: 50, after: $cursor) {
      pageInfo { hasNextPage endCursor }
      edges {
        node {
          id
          title
          handle
          description
          featuredImage { url altText }
          priceRange { minVariantPrice { amount currencyCode } }
        }
      }
    }
  }
`

export async function fetchAllProducts(): Promise<ShopifyProduct[]> {
  const domain = process.env.SHOPIFY_STORE_DOMAIN!
  const token = process.env.SHOPIFY_STOREFRONT_TOKEN!
  const endpoint = `https://${domain}/api/${API_VERSION}/graphql.json`

  const products: ShopifyProduct[] = []
  let cursor: string | null = null
  let hasNext = true

  while (hasNext) {
    const response = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Storefront-Access-Token': token,
      },
      body: JSON.stringify({ query: PRODUCTS_QUERY, variables: { cursor } }),
    })

    if (!response.ok) {
      throw new Error(`Storefront API error ${response.status}`)
    }

    const { data } = await response.json() as {
      data: {
        products: {
          pageInfo: { hasNextPage: boolean; endCursor: string }
          edges: { node: ShopifyProduct }[]
        }
      }
    }

    products.push(...data.products.edges.map((edge) => edge.node))
    hasNext = data.products.pageInfo.hasNextPage
    cursor = data.products.pageInfo.endCursor
  }

  return products
}

El bucle de paginación es importante para la escala. La API de Storefront limita cada consulta a una página de resultados, por lo que un catálogo de cualquier tamaño real llega a través de varias solicitudes, y el  de una página se convierte en el endCursorafter argumento de la siguiente.

Debido a que la API de Storefront se escala con el tráfico de compradores en lugar de imponer una cuota de solicitud fija, esta lectura del catálogo completo se ejecuta cómodamente sin una limitación especial. Leer el token dentro de la función lo mantiene fuera del alcance del módulo, que es lo que espera Webflow Cloud.

5. Asigna los productos de Shopify a los campos del CMS de Webflow

Shopify y Webflow describen un producto de manera diferente, por lo que necesitas una pequeña transformación que convierta un nodo de producto de Storefront en la fieldData forma que acepta la API del CMS de Webflow.

Aquí es también donde conviertes los tipos, porque Shopify devuelve los precios como cadenas de texto y un campo numérico de Webflow espera un número:

// lib/mapProduct.ts
import type { ShopifyProduct } from './shopify'

export function toWebflowFieldData(product: ShopifyProduct) {
  return {
    name: product.title,
    slug: product.handle,
    price: parseFloat(product.priceRange.minVariantPrice.amount),
    description: product.description ?? '',
    'featured-image': product.featuredImage
      ? { url: product.featuredImage.url, alt: product.featuredImage.altText ?? product.title }
      : null,
    'shopify-id': product.id,
  }
}

Las claves de campo a la izquierda deben coincidir con los slugs que Webflow generó para los campos de tu colección, no con sus nombres para mostrar. Webflow pone el nombre del campo en minúsculas y reemplaza los espacios con guiones, por lo que un campo etiquetado como Imagen destacada se convierte en  y el ID de Shopify se convierte en featured-imageshopify-id.

Reutilizar el  de Shopify como el slug de Webflow es deliberado: mantiene las URL de tus productos alineadas con Shopify y te ofrece rutas estables y legibles para humanos de forma gratuita. Almacenar el  completo de Shopify en handleIDshopify-id es sobre lo que se basa la inserción en el siguiente paso, por lo que esta asignación es el eje sobre el que gira toda la sincronización.

6. Sincroniza productos en el CMS de Webflow

Ahora, escribe los productos en el CMS. Una sincronización robusta nunca crea elementos a ciegas, porque ejecutarla dos veces duplicaría tu catálogo. En su lugar, realiza una operación "upsert": lee los elementos existentes una vez, crea un mapa que vincula el ID de Shopify con el ID del elemento en Webflow y, luego, actualiza el elemento existente o crea uno nuevo.

Este mapeo de IDs es la misma disciplina que mantiene sincronizada cualquier fuente externa y refleja el enfoque utilizado para sincronizar datos en el CMS desde otros sistemas:

// app/api/sync/route.ts
import { NextResponse, type NextRequest } from 'next/server'
import { fetchAllProducts } from '@/lib/shopify'
import { toWebflowFieldData } from '@/lib/mapProduct'

const WF_BASE = 'https://api.webflow.com/v2'

async function loadExistingItems(collectionId: string, token: string) {
  const map = new Map<string, string>()
  let offset = 0

  while (true) {
    const res = await fetch(
      `${WF_BASE}/collections/${collectionId}/items?limit=100&offset=${offset}`,
      { headers: { Authorization: `Bearer ${token}` } }
    )
    const { items, pagination } = await res.json() as {
      items: { id: string; fieldData: Record<string, unknown> }[]
      pagination: { total: number }
    }

    for (const item of items) {
      const sid = item.fieldData['shopify-id'] as string | undefined
      if (sid) map.set(sid, item.id)
    }

    offset += items.length
    if (offset >= pagination.total || items.length === 0) break
  }

  return map
}

export async function POST(request: NextRequest) {
  if (request.headers.get('authorization') !== `Bearer ${process.env.SYNC_SECRET}`) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
  }

  const collectionId = process.env.WEBFLOW_COLLECTION_ID!
  const token = process.env.WEBFLOW_SITE_TOKEN!

  const products = await fetchAllProducts()
  const existing = await loadExistingItems(collectionId, token)

  let created = 0
  let updated = 0

  for (const product of products) {
    const fieldData = toWebflowFieldData(product)
    const itemId = existing.get(product.id)

    if (itemId) {
      await fetch(`${WF_BASE}/collections/${collectionId}/items/live`, {
        method: 'PATCH',
        headers: {
          Authorization: `Bearer ${token}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ items: [{ id: itemId, fieldData }] }),
      })
      updated++
    } else {
      await fetch(`${WF_BASE}/collections/${collectionId}/items/live`, {
        method: 'POST',
        headers: {
          Authorization: `Bearer ${token}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ fieldData }),
      })
      created++
    }
  }

  return NextResponse.json({ created, updated })
}

Dos detalles hacen que esto sea seguro para producción. Primero, el controlador escribe en los /items/live endpoints, que crean y publican en una sola llamada, para que los productos aparezcan en el sitio en vivo sin necesidad de un paso de publicación adicional.

Segundo, una SYNC_SECRET verificación de token (bearer check) protege la sincronización, de modo que solo tu programador pueda activar una escritura completa del catálogo. Añade SYNC_SECRET a tus variables de entorno junto con las otras cuatro. Los conteos de created y updated en la respuesta te dan una señal rápida de que la sincronización hizo lo que esperabas en cada ejecución.

7. Automatiza la sincronización mediante un calendario

Activar la sincronización manualmente está bien mientras construyes, pero una tienda basada en contenido necesita que el CMS rastree Shopify sin que nadie tenga que recordar presionar un botón. Dos activadores cubren casi todos los casos.

Para mantener la frescura programada, apunta un programador (scheduler) a tu endpoint de sincronización para que envíe el mismo POST autenticado cada hora, lo que mantiene los precios y el inventario actualizados dentro de un margen predecible.

Para una precisión casi en tiempo real, registra un webhook de Shopify en los temas products/update y products/create que apunte a una versión más ligera de este controlador, de modo que un solo producto modificado se sincronice en el momento en que cambia en Shopify.

Puedes iniciar una ejecución manual para confirmar que todo el proceso funciona antes de configurar cualquier automatización:

curl -X POST https://your-app.webflow.io/api/sync \
  -H "Authorization: Bearer your_sync_secret"

La respuesta informa cuántos elementos se crearon y actualizaron. Abre tu colección del CMS de Webflow y confirma que los productos aparecen con sus precios, imágenes y el ID de Shopify correspondiente en cada uno.

Una vez que la ejecución manual sea correcta, el activador programado ejecutará el mismo código por su cuenta. Para la mayoría de las tiendas basadas en contenido, configuro un horario cada hora para el catálogo completo y añado un webhook de actualización de productos para los pocos SKUs que cambian con frecuencia, lo que equilibra la frescura con la cantidad de escrituras.

¿Qué puede romper una sincronización entre Shopify y el CMS de Webflow?

La mayoría de los fallos de sincronización se deben a unas pocas causas predecibles: un token de Storefront al que le falta el alcance (scope) de productos, claves de campo que no coinciden con los slugs de la colección, slugs duplicados que chocan al escribir, alcanzar el límite de tasa de la API de Webflow durante una sincronización grande, o un SDK dependiente de Node que no se ejecutará en el edge.

Cada uno falla de una manera reconocible, lo que los hace fáciles de diagnosticar una vez que conoces la señal.

Aquí te explico cómo reconocer cada uno y qué corregir.

La API de Storefront devuelve una lista de productos vacía

Si tu consulta GraphQL tiene éxito pero products.edges regresa vacía, casi siempre es porque al token le falta el alcance correcto. La API de Storefront no arroja un error por un alcance que no puede servir; simplemente no devuelve nada para los objetos que el token no puede leer.

Abre el canal Headless en tu panel de administración de Shopify, selecciona la tienda, haz clic en Editar junto a los permisos de la API de Storefront y confirma que unauthenticated_read_product_listings esté habilitado. Guarda y vuelve a ejecutar la consulta.

Una segunda causa común es consultar una tienda sin productos publicados, ya que la API de Storefront solo expone los productos publicados en el canal Headless. Confirma que los productos estén activos y disponibles en ese canal antes de asumir que el problema es el token.

Webflow rechaza la escritura debido a una discrepancia en los campos

Una respuesta 400 de la API de CMS de Webflow al crear o actualizar suele significar que una clave en tu no coincide con el slug de un campo en la Colección. La API valida los slugs exactos que generó Webflow, no los nombres visibles que ves en el Diseñador.fieldData

Abre la Configuración de la Colección, haz clic en cada campo y lee el slug del campo en lugar de asumir cuál es basándote en la etiqueta.

Un campo que aparece como Featured Image casi siempre es , y un campo personalizado puede añadir un sufijo numérico como si creaste y eliminaste un campo con un nombre similar anteriormente. Hacer coincidir el mapeo del Paso 5 con los slugs reales soluciona esto de inmediato.featured-imageprice-2

Los slugs duplicados chocan en la segunda sincronización

Webflow requiere que cada slug de elemento en una Colección sea único, por lo que si dos productos de Shopify comparten un identificador (handle), o si un elemento manual ya reclamó un slug, la escritura falla por conflicto. La operación upsert del Paso 6 evita la versión más común de esto al actualizar elementos existentes en lugar de recrearlos, pero una colisión real de identificadores en Shopify aún debe gestionarse.

Mi solución es recurrir a añadir el último segmento del ID de Shopify al slug cuando se detecta un conflicto, lo que garantiza la unicidad sin perder el identificador legible para los productos que no colisionan.

Mantener el ID de Shopify como la clave real y tratar el slug como una comodidad visual evita toda esta clase de problemas.

La sincronización alcanza el límite de tasa de la API de Webflow

Un catálogo grande escrito elemento por elemento puede exceder el límite de tasa de la API de datos de Webflow: 60 solicitudes por minuto en sitios Starter y Basic, y 120 solicitudes por minuto en planes CMS, Business y Ecommerce.

Cuando lo superas, la API devuelve un error 429 con una cabecera . La solución es respetar esa cabecera y espaciar las escrituras en lugar de lanzarlas tan rápido como permite el bucle.Retry-After

Para catálogos de unos pocos miles de artículos, agrupar las escrituras y hacer pausas entre lotes te mantiene por debajo del límite, y leer de cada respuesta te permite reducir la velocidad antes de llegar a cero. En una importación grande de una sola vez, ejecuto la sincronización en bloques en lugar de en una sola pasada.X-RateLimit-Remaining

Un SDK exclusivo de Node falla al ejecutarse en el edge

Si tu compilación arroja errores sobre un módulo , o faltante, algo en tu árbol de dependencias espera APIs de Node.js que el entorno de ejecución de Cloudflare Workers no proporciona. El SDK heredado es el culpable habitual, ya que es anterior al edge y utiliza componentes internos de Node.httphttpsfsshopify-buy

La solución es el enfoque que ya utiliza esta guía: llamar a la Storefront API con un simple y una cadena GraphQL, lo cual no necesita ningún SDK y se ejecuta de forma nativa en el entorno de Workers. La misma regla se aplica al lado de Webflow, donde una solicitud directa a la API de datos es más ligera y fiable en el edge que cualquier envoltorio dependiente de Node.fetchfetch

Dale a tu contenido de producto un hogar que tu equipo pueda gestionar

A partir de aquí, el siguiente paso natural es decidir hasta qué punto quieres que Webflow se involucre en el comercio. Si solo necesitas el contenido del producto y rediriges a los compradores a Shopify para la compra, esta sincronización de solo lectura es todo lo que necesitas.

Si quieres gestionar el pago dentro de tu propia experiencia, añadir Stripe Checkout en Webflow es un siguiente nivel habitual, junto con desarrollos más grandes que combinan autenticación, base de datos y pagos , los cuales muestran cómo varios servicios conviven en un mismo proyecto de Webflow Cloud.

Para una visión más amplia de dónde encaja este patrón, nuestra guía de comercio headless analiza las ventajas y desventajas frente a una tienda tradicional.