Cómo crear un portal mayorista B2B con Shopify y Webflow

Imagina que un comprador inicia sesión y ve su tarifa negociada. Otro inicia sesión y ve una distinta. Un visitante que no ha iniciado sesión no debería ver ninguna de las dos, y ninguna de esas tres respuestas puede reutilizarse para nadie más.

Ese requisito es lo que diferencia esta implementación de una integración normal entre Shopify y Webflow. Las páginas de catálogo público pueden obtenerse una vez y reutilizarse; una lista de precios mayoristas pertenece a una sola empresa y debe obtenerse de forma actualizada, por comprador, cada vez.

Esta guía cubre lo que te ofrece Shopify B2B, qué partes dependen de tu plan y cómo colocar un front-end de Webflow delante sin filtrar los precios de un cliente a otro.

¿Qué necesitas para crear un portal mayorista B2B con Shopify y Webflow?

Necesitas una tienda Shopify con B2B configurado, cuentas de cliente en lugar de inicios de sesión heredados, un token de la API de Storefront y una capa de servidor para las llamadas autenticadas. El requisito de las cuentas de cliente es donde se atascan la mayoría de las migraciones.

Ten esto listo antes de empezar:

• Una tienda Shopify con un plan que admita las funciones B2B que necesitas, con al menos una empresa y una ubicación de empresa creadas

• Cuentas de cliente habilitadas, ya que Shopify indica claramente que B2B solo funciona con cuentas de cliente y el código de inicio de sesión heredado debe reemplazarse

• Un token de acceso a la API de Storefront, además de acceso a la API de cuentas de cliente para el flujo de inicio de sesión del comprador

• Un proyecto de Webflow Cloud que ejecute una aplicación Next.js, además de Node.js 22.13.0 o superior localmente, el requisito mínimo establecido por Webflow CLI 2.0

La cuestión del plan merece más que una línea en una lista de verificación, porque los consejos habituales están desactualizados y determinan si los precios por cliente son siquiera posibles.

¿Qué plan de Shopify necesita un portal mayorista B2B?

Shopify B2B ya no está restringido a Plus. Funciona en Basic, Grow, Advanced y Plus, y la mayoría de las funciones principales vienen incluidas en todos ellos, lo que cambia el enfoque de muchos proyectos mayoristas.

Lo que sigue diferenciando los niveles es qué tan específicos pueden ser tus precios. Por debajo de Plus, puedes asignar hasta tres catálogos B2B activos en tus mercados; en Plus, obtienes catálogos ilimitados y, lo que es más importante, la capacidad de asignar un catálogo directamente a una empresa o ubicación de empresa.

Aquí es donde se trazan las líneas:

Si tu modelo mayorista consiste en unos pocos niveles de precios que comparten muchos clientes, puedes configurarlo por debajo de Plus. Si cada cuenta tiene tarifas negociadas individualmente, los catálogos directos de empresa son la solución, y son una función exclusiva de Plus.

Ten en cuenta también que usar las funciones de catálogo B2B por debajo de Plus requiere que la tienda esté en el nuevo Shopify Markets.

5 pasos para crear el portal mayorista en Webflow Cloud

La estructura consiste en un flujo de autenticación, un selector de ubicación y un conjunto de consultas de productos que incluyen el contexto del comprador. Cada consulta devuelve datos para un solo cliente.

Síguelos en orden, ya que cada paso genera un valor que el siguiente necesita.

1. Autentica al comprador a través de cuentas de cliente

Los precios B2B solo son visibles para un comprador autenticado, así que el inicio de sesión es lo primero. La guía de Shopify para B2B headless indica que el B2B funciona con cuentas de cliente, y debes actualizar cualquier código existente escrito para cuentas de cliente heredadas antes de que todo esto funcione.

Este flujo genera un token de acceso de Cuentas de cliente, al que el resto de la configuración se refiere como el . Representa a una persona en una empresa, y lo obtienes al final de un flujo de autorización que ellos completan, en lugar de crearlo en el lado del servidor.customerAccessToken

Trata ese token como una credencial desde el momento en que lo recibas. Nunca debe aparecer en una URL ni en una línea de registro, y si lo guardas en una cookie de sesión HTTPOnly en lugar de pasarlo desde el navegador, tampoco llegará nunca al JavaScript del cliente.

Completa este paso cuando un comprador que haya iniciado sesión genere un token que tu servidor pueda conservar durante toda su sesión.

2. Recupera la ubicación de la empresa para la que el comprador está realizando el pedido

Un token por sí solo no proporciona suficiente contexto. Una misma persona puede comprar para varias sedes de una misma empresa, y cada ubicación puede tener precios distintos, por lo que Shopify necesita saber a cuál de ellas pertenece este pedido.

Consulta la API de cuentas de cliente para obtener las ubicaciones a las que el cliente tiene acceso y preséntalas mediante un selector si hay más de una. Almacena la elegida para el resto de la sesión, ya que cada solicitud contextualizada la necesita junto con el token.companyLocationId

Si un comprador tiene una única ubicación, selecciónala automáticamente, pero mantén el valor en el mismo lugar en lugar de crear una excepción. Un paso completado con éxito termina con un token y un ID de ubicación guardados juntos como el contexto del comprador.

3. Contextualiza las consultas de productos

Aquí es donde aparecen los precios mayoristas. Añadir un argumento a la directiva indica a la Storefront API en nombre de qué cliente y ubicación se realiza la consulta, y la respuesta cambia en consecuencia.buyer@inContext

Una consulta contextualizada devuelve el precio negociado en lugar del minorista. Te da acceso a las reglas de cantidad y a los descuentos por volumen que hacen posible la venta al por mayor: mínimos, máximos, incrementos de pedido y las tarifas escalonadas que premian las cantidades mayores.

La siguiente consulta solicita los tres:

# Without the buyer argument this returns public retail pricing.
# With it, you get the pricing this company location has negotiated.
query B2BProduct(
  $handle: String!
  $customerAccessToken: String!
  $companyLocationId: ID!
) @inContext(
  buyer: {
    customerAccessToken: $customerAccessToken
    companyLocationId: $companyLocationId
  }
) {
  product(handle: $handle) {
    title
    variants(first: 20) {
      nodes {
        id
        title
        price {
          amount
          currencyCode
        }
        quantityRule {
          minimum
          maximum
          increment
        }
        quantityPriceBreaks(first: 10) {
          nodes {
            minimumQuantity
            price {
              amount
              currencyCode
            }
          }
        }
      }
    }
  }
}

Ejecuta la misma consulta sin el argumento del comprador para obtener los precios minoristas públicos; es una forma útil de confirmar que el contexto se está aplicando y no asumiendo. Cuando este paso es correcto, dos compradores diferentes que solicitan el mismo producto reciben precios distintos.

4. Sirve las consultas desde una ruta que no se pueda almacenar en caché

Todo lo anterior genera una respuesta que pertenece a una sola empresa, lo que convierte al almacenamiento en caché en el error más peligroso que puedes cometer en este desarrollo. Shopify lo advierte directamente: si guardas estas respuestas en caché, otros usuarios podrían ver los precios B2B de otro cliente, por lo que debes desactivar la caché en las rutas que devuelven datos específicos del comprador.

Esa advertencia es aún más crítica en Webflow Cloud que en un servidor tradicional, ya que se ejecuta en Cloudflare Workers, donde el framework, una función fetch o un proxy pueden introducir una caché sin que nadie decida añadirla. Una ruta mayorista almacenada en caché no falla de forma evidente; simplemente sirve las tarifas negociadas de un cliente a quienquiera que realice la siguiente consulta.

Marca la ruta como dinámica, pasa al fetch ascendente y envía encabezados de caché privada:cache: 'no-store'

// app/api/catalog/[handle]/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { cookies } from 'next/headers'

// This route returns one buyer's negotiated pricing. It must never be
// cached, at the edge or anywhere else.
export const dynamic = 'force-dynamic'

export async function GET(
  request: NextRequest,
  { params }: { params: Promise<{ handle: string }> }
) {
  const { handle } = await params
  // Read the buyer context from an httpOnly session cookie rather than
  // from client-supplied headers, so the token never touches the browser.
  const jar = await cookies()
  const token = jar.get('sl_customer_token')?.value
  const locationId = jar.get('sl_company_location')?.value

  if (!token || !locationId) {
    return NextResponse.json({ error: 'No buyer context' }, { status: 401 })
  }

  const res = await fetch(
    `https://${process.env.SHOPIFY_DOMAIN}/api/2026-07/graphql.json`,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Storefront-Access-Token': process.env
          .SHOPIFY_STOREFRONT_TOKEN as string,
      },
      body: JSON.stringify({
        query: B2B_PRODUCT_QUERY,
        variables: {
          handle,
          customerAccessToken: token,
          companyLocationId: locationId,
        },
      }),
      cache: 'no-store',
    }
  )

  const data = await res.json()

  return NextResponse.json(data, {
    headers: { 'Cache-Control': 'private, no-store' },
  })
}

Los dos primeros se solapan por diseño, ya que ya establece cada fetch en el segmento como no-store, por lo que la opción explícita es una medida de seguridad adicional más que un segundo requisito. El encabezado de respuesta es realmente independiente, porque informa a un proxy o CDN intermedio.force-dynamic

Ten en cuenta también que en Next.js 16 con los componentes de caché habilitados, la exportación se elimina y la ruta debe excluirse mediante fetch y el encabezado.dynamic

Verifícalo en lugar de confiar ciegamente: inicia sesión como dos compradores con precios distintos y confirma que el segundo nunca ve las cifras del primero.

5. Crea el carrito con la identidad del comprador adjunta

Un catálogo contextualizado es solo la mitad del trabajo. El carrito debe llevar la misma identidad, o el comprador navegará con tarifas mayoristas y pagará con precios minoristas.

Pasa el y el como identidad del comprador al crear el carrito, y actualiza un carrito existente con el mismo par si el comprador cambia de ubicación a mitad de la sesión.customerAccessTokencompanyLocationId

Esto traslada las reglas y precios B2B hasta el proceso de pago, razón por la cual no puedes simplemente reutilizar un carrito creado antes de iniciar sesión una vez que ya lo has hecho.

Prueba el flujo completo, no solo el catálogo. El paso se completa cuando el precio de pago de un artículo coincide con el precio que el comprador vio en la página del producto para un usuario cuya tarifa no es la pública.

¿Qué hace que un portal B2B de Shopify falle en Webflow Cloud?

Vale la pena revisar cuatro fallos primero: precios minoristas donde deberían ir los mayoristas, una respuesta en caché que muestra al cliente equivocado, un plan que no permite precios por empresa y una compilación interrumpida por una directiva de tiempo de ejecución.

Es fácil confundir los problemas de precios entre sí, así que revísalos en este orden:

Los compradores ven precios minoristas en lugar de los suyos

Causa: La consulta no está contextualizada. O falta el argumento en la directiva, o falta uno de sus dos valores, ya que un comprador con acceso a más de una ubicación de empresa necesita el ID de ubicación para determinar qué precio se aplica.buyer@inContext

Solución: Confirma que tanto el como el llegan a la consulta, luego compara la misma solicitud con y sin el argumento del comprador. Si ambas devuelven precios idénticos, el contexto no se está aplicando en absoluto, no es que se aplique incorrectamente, lo que apunta a la solicitud y no a la configuración del catálogo en Shopify.customerAccessTokencompanyLocationId

Aprovecha para comprobar que el token no haya caducado, ya que un token expirado falla de la misma manera silenciosa y produce el mismo precio minorista por defecto en lugar de un error de autenticación.

Un cliente ve los precios de otro cliente

Causa: Una respuesta en caché. Shopify advierte que las respuestas B2B contextualizadas son personalizadas, por lo que almacenarlas en caché permite que otros usuarios vean los precios de otro cliente; en el tiempo de ejecución de Workers, el framework, fetch o un proxy pueden introducir una caché sin que nadie lo decida.

Solución: Fuerza la ruta como dinámica, establece en la llamada ascendente y devuelve encabezados privados de no-almacenamiento (no-store). Luego pruébalo a conciencia con dos cuentas que tengan precios diferentes en lugar de darlo por hecho, porque este fallo no genera ningún error y parece una página que funciona perfectamente para quien la creó.cache: 'no-store'

Es el único defecto aquí con consecuencias comerciales fuera de tus propios registros.

No se pueden asignar precios por empresa

Causa: La tienda no tiene el plan Plus. Los catálogos asignados directamente a una empresa o ubicación de empresa son una función de Plus, y en los planes Basic, Grow y Advanced obtienes hasta tres catálogos activos asignados a mercados.

Solución: Decide si el modelo de precios realmente necesita tarifas por cuenta o si bastaría con un pequeño número de niveles compartidos. Muchos precios que se describen como negociados individualmente resultan ser un pequeño número de niveles compartidos una vez que se ponen por escrito.

Si realmente es por cuenta, es una conversación para el plan Plus y no para ingeniería, y vale la pena tenerla antes de construir el portal, no después. Nada en el front-end puede sintetizar precios que la API no devuelve, por lo que esta limitación debe resolverse primero en el lado de Shopify.

La compilación falla después de añadir las rutas de la API

Causa: Una directiva . Webflow Cloud despliega Next.js a través del <aux translate="no">OpenNext Cloudflare adapter</aux>, que no es compatible con el tiempo de ejecución edge de Next.js.export const runtime = 'edge'

Solución: Elimina la línea y vuelve a desplegar. Vale la pena comprobarlo primero siempre que una compilación de Webflow Cloud falle justo después de que aparezcan nuevas rutas, porque la propia página de Webflow para traer tu propia aplicación sigue diciendo a los lectores de Next.js que añadan la directiva, por lo que la instrucción que seguiste podría ser la causa.

Busca en todo el proyecto en lugar de solo en el archivo que tocaste por última vez, ya que una sola directiva perdida en cualquier parte hace que la compilación falle. Esto afecta a los proyectos B2B más que a la mayoría, porque las rutas de autenticación y catálogo suelen tomarse de ejemplos headless escritos para otras plataformas, y esos ejemplos incluyen la directiva por defecto.

Lo que puedes crear a continuación con Shopify y Webflow

Una vez que el contexto del comprador fluye a través del front-end, el portal puede encargarse del resto de la relación mayorista: realizar pedidos desde facturas anteriores, usar números de orden de compra al finalizar la compra y aplicar reglas de cantidad que evitan que un pedido sea rechazado después de realizarse.

Si necesitas un catálogo público en lugar de uno autenticado, se trata de una construcción diferente y más sencilla, y nuestra guía de la API de Storefront de Shopify cubre la sincronización de productos en el CMS de Webflow. Almacena ambos tokens de API como variables de entorno marcadas como secretas. Para las rutas de conexión que no requieren código, consulta la integración de Webflow y Shopify.