Secciones exclusivas B2B
Estas son las secciones construidas específicamente para flujos de trabajo B2B — la barra de saludo que aparece automáticamente para compradores de empresa con sesión iniciada, la banda promocional de la página de inicio que comercializa funciones B2B a los invitados, la página de pegar y añadir al carrito en bloque, la tabla de comparativa lado a lado, la página RFQ y el pad de pedido rápido en línea.
Cada una de estas funciona con el B2B nativo de Shopify (sin apps, sin suscripciones). Cuando B2B no está activado en su tienda, las orientadas a marketing (promo de funciones B2B, pedido en bloque, comparativa, RFQ) siguen funcionando como secciones pulidas — los compradores simplemente no verán las partes específicas de empresa, como los niveles de precios por volumen en el presupuesto.
Vertex lee quantity_price_breaks renderizado en servidor desde el catálogo B2B nativo de Shopify. Los compradores ven precios escalonados correctos en la PDP, el carrito y la página de pedido en bloque automáticamente — sin recálculo de JS, sin retraso de sincronización de app. Configurar catálogos B2B en el admin de Shopify es todo lo que necesita.
b2b-greeting-bar
Archivo de sección: sections/b2b-greeting-bar.liquid
La banda ámbar que aparece encima de la cabecera principal para compradores de empresa con sesión iniciada. Ya cubierta en Cabecera, footer e interfaz — esta sección se referencia aquí porque es el punto de contacto B2B más visible.
Sin ajustes para el comerciante. Se renderiza automáticamente según:
customer.b2b? AND customer.current_company AND settings.storefront_mode != 'b2c'
Superficies: nombre de empresa, insignia de condiciones NET, insignia de exención fiscal, pill de idioma, pill de moneda, selector de dirección de envío (estático cuando hay 1 ubicación, desplegable cuando hay 2 o más).
Visibilidad: solo escritorio (≥ 1170px) — en móvil los mismos datos se mueven a la sección de cuenta del cajón hamburguesa.
b2b-feature-promo
Archivo de sección: sections/b2b-feature-promo.liquid
Banda de la página de inicio que comercializa las funciones exclusivas B2B a los invitados — precios por volumen, pedido en bloque, RFQ, NET-30 — para que los visitantes que no sabían que las ofrecía puedan encontrar el camino a una alta de distribuidor o RFQ.
Ajustes por bloque: icono (imagen / SVG), título, cuerpo, enlace opcional.
Se oculta automáticamente para compradores B2B con sesión iniciada. La promo es para invitados; los distribuidores con sesión iniciada ya tienen acceso a las funciones que anuncia, por lo que mostrarla sería redundante. La comprobación condicional es:
{% unless customer.b2b? %}
{% render 'b2b-feature-promo' %}
{% endunless %}
Patrones comunes de bloques
| Icono | Título | Cuerpo |
|---|---|---|
| Stack | Precios por volumen | Descuentos escalonados por unidad en cada tamaño de pedido — aplicados automáticamente al checkout. |
| Spreadsheet | Pedido en bloque | Pegue filas SKU, cant desde una hoja de cálculo. Validamos y añadimos al carrito con un clic. |
| Document | Condiciones NET-30 | Las cuentas cualificadas obtienen condiciones de pago a 30 días sin intereses. Solicite en el formulario de alta de distribuidor. |
| Quote | Solicitar presupuesto | Precios personalizados en solicitudes en bloque, presupuestos de proyecto y precios de contrato. |
Arriba del fold (justo debajo del hero) capta a los invitados que ojean — pero empuja todo lo demás hacia abajo. Debajo del fold funciona cuando quiere que los distribuidores con sesión iniciada la salten sin penalización de scroll.
main-bulk-order
Archivo de sección: sections/main-bulk-order.liquid
Plantilla: templates/page.bulk-order.json → asignar a /pages/bulk-order
La página de pedido en bloque con pegar y añadir al carrito. Los compradores pegan filas SKU,cant desde una hoja de cálculo; la página valida cada línea contra el catálogo y añade el cesto completo con un clic. Los SKU no válidos se marcan en línea.
Ajustes
| Ajuste | Tipo | Notas |
|---|---|---|
| Cabecera | Texto | "Pedido en bloque" / "Pad de pedido rápido". |
| Texto introductorio | Texto enriquecido | Bloque corto de instrucciones (o use el bloque Instrucciones). |
| Columnas | Select | sku_qty · sku_qty_notes · sku_qty_notes_ship. Determina cuántas columnas muestra el pad. |
| Etiqueta de envío | Texto | Por defecto "Añadir todo al carrito". |
| Esquema de color | Select | Desplegable estándar de esquema de color. |
Bloque de instrucciones
Añada un bloque Instrucciones para renderizar texto de tranquilidad junto al pad: "Pegue su lista de SKU — uno por fila, cantidades separadas por coma. Validaremos contra su catálogo antes de añadir al carrito."
Cómo valida
- Cada SKU se comprueba contra el catálogo del comprador (los compradores B2B obtienen alcance del catálogo de empresa; los invitados obtienen la tienda completa)
- Los SKU no válidos se resaltan en rojo con un error en línea
- Los SKU válidos se añaden en una única actualización de carrito (un solo viaje de red, sin condiciones de carrera)
- Las reglas de cantidad (MOQ, máx, caja) se aplican en el momento de la validación
Compatibilidad B2B
Para compradores B2B con sesión iniciada, la página de pedido en bloque lee desde el catálogo B2B de su empresa automáticamente. Los SKU que no estén en el catálogo fallarán la validación incluso si existen en la tienda. Esto es intencional — los compradores solo deberían poder pedir lo que está en su contrato.
→ Móntela en una página (típicamente /pages/bulk-order) seleccionando la plantilla page.bulk-order.json en el editor de página. Consulte la Guía de configuración B2B para asignar el catálogo que impulsa la validación.
main-compare
Archivo de sección: sections/main-compare.liquid
Plantilla: templates/page.compare.json → asignar a /pages/compare
Tabla de comparación de productos lado a lado. Hasta 4 productos. Solo de sesión — se borra cuando el comprador cierra el navegador. No es una lista de deseos (la política de la Shopify Theme Store prohíbe las listas de deseos persistentes sin una app).
Cómo funciona
- El comprador hace clic en + Comparar en una tarjeta de producto o PDP
- El producto se añade a una clave
vertex_comparedesessionStorage - La barra de comparación (bandeja fija inferior, ver abajo) muestra hasta 4 miniaturas de producto
- El comprador hace clic en Comparar en la bandeja → redirige a
/pages/compare - La página de comparación renderiza una tabla especificación por especificación con cada producto como columna
Ajustes
| Ajuste | Tipo | Notas |
|---|---|---|
| Cabecera | Texto | "Comparar productos". |
| Texto introductorio | Texto enriquecido | Opcional. |
| Cabecera de estado vacío | Texto | Se muestra cuando no hay productos en comparación. "Añada productos para comparar". |
| Cuerpo de estado vacío | Texto enriquecido | "Navegue el catálogo y haga clic en ⊕ Comparar en cualquier tarjeta de producto. Hasta 4 productos.". |
Lo que muestra la comparación
Por columna de producto: imagen, título, precio, especificaciones clave (desde el metaobject tech_spec_row), MOQ, envío desde, botón ATC. Las filas que difieren entre productos se resaltan visualmente para un escaneo fácil.
Snippet compare-bar
Archivo de snippet: snippets/compare-bar.liquid
La bandeja fija inferior que aparece siempre que la lista de comparación tiene al menos un producto. Renderiza 4 slots de producto (llenos o vacíos), un botón Comparar (desactivado hasta que se añadan 2 o más productos) y un enlace Borrar todo.
El snippet se incluye desde theme.liquid para que aparezca en cada página. Solo se renderiza cuando sessionStorage.vertex_compare tiene al menos una entrada.
main-rfq
Archivo de sección: sections/main-rfq.liquid
Plantilla: templates/page.rfq.json → asignar a /pages/rfq
La página de solicitud de presupuesto. Diseño de 2 columnas: formulario de contacto a la izquierda, tarjeta de contacto / horario / dirección a la derecha. Usa el patrón nativo de formulario de contacto de Shopify — no se necesita app de gestión de presupuestos.
Ajustes
| Ajuste | Tipo | Notas |
|---|---|---|
| Cabecera | Texto | "Solicitar presupuesto". |
| Texto introductorio | Texto enriquecido | Tranquilidad breve + tiempo de respuesta esperado. |
| Nombre de contacto | Texto | Cabecera de columna derecha — "Hable con un especialista". |
| Email de contacto | Texto | Enlace mailto. |
| Teléfono de contacto | Texto | Enlace tel. |
| Horario | Texto | P. ej., "Lun–Vie · 8 AM – 6 PM ET". |
| Dirección | Texto enriquecido | Bloque de dirección de varias líneas. |
| Código de pista NET-30 | Texto | Un código que los compradores referencian al solicitar NET-30 ("Mencione RFQ-NET30 en su mensaje"). |
Campos del formulario
El formulario hace POST al endpoint nativo de formulario de contacto de Shopify:
- Nombre (requerido)
- Empresa (requerido)
- Email (requerido)
- Teléfono (opcional)
- Industria (select, opcional)
- Volumen estimado de pedido (select, opcional)
- Opt-in NET-30 (checkbox) — añadido al cuerpo del mensaje cuando está marcado
- Mensaje (requerido)
- Adjunto de archivo (opcional, nativo de Shopify)
El envío aterriza en el email de notificación de su admin de Shopify como una entrada estándar de formulario de contacto. Sin integración de terceros.
El patrón integrado de formulario de contacto mantiene Vertex totalmente conforme con la política de la Theme Store y a coste cero. Si necesita seguimiento de presupuestos, flujos de aplicación de condiciones NET o integración CRM con el equipo de ventas, empareje con el B2B nativo de Shopify (compradores asociados a empresa) o una app de su elección — la página RFQ de Vertex funciona de cualquier manera.
quick-order
Archivo de sección: sections/quick-order.liquid
El pad de pegar y añadir al carrito en línea — el mismo motor que main-bulk-order, pero como sección lista para la página de inicio que puede colocar en el flujo de marketing.
Ajustes
| Ajuste | Tipo | Notas |
|---|---|---|
| Cabecera | Texto | "Pedido rápido". |
| Texto introductorio | Texto enriquecido | Tranquilidad de una línea — "¿Ya sabe lo que necesita? Pegue los SKU debajo.". |
| Filas | Número | Predeterminado 5. Cuántas filas de input se renderizan inicialmente. El botón "+ Añadir fila" añade más. |
| Etiqueta de envío | Texto | "Añadir al carrito". |
| Mostrar enlace 'Ir a pedido en bloque' | Checkbox | Activado por defecto. Enlaza a /pages/bulk-order para compradores que necesitan más filas o quieren validación de SKU. |
Cuándo usar esto vs. main-bulk-order
| Caso de uso | Use esto |
|---|---|
| Página de inicio, entre hero y colección destacada | quick-order |
/pages/bulk-order dedicado para power users | main-bulk-order |
| Banda 50/50 emparejada con logos de marca | dual-brands-quickorder (consulte Marketing de página de inicio) |
Mismo motor de validación, misma conciencia de catálogo B2B, mismo añadido al carrito con un clic. La diferencia es el diseño (5 filas predeterminadas en línea vs. pad de página completa) y descubribilidad.
Hoja de referencia de visibilidad de secciones B2B
| Sección | Invitado | B2C con sesión iniciada | B2B con sesión iniciada |
|---|---|---|---|
b2b-greeting-bar | Oculta | Oculta | Visible (solo escritorio, cajón en móvil) |
b2b-feature-promo | Visible | Visible | Oculta |
main-bulk-order | Visible (catálogo de tienda) | Visible (catálogo de tienda) | Visible (catálogo de empresa) |
main-compare | Visible | Visible | Visible |
main-rfq | Visible | Visible | Visible (el formulario pre-rellena nombre/email/empresa) |
quick-order | Visible (catálogo de tienda) | Visible (catálogo de tienda) | Visible (catálogo de empresa) |
Qué sigue
- Secciones de la página de producto → — Precios por volumen, MOQ, tarjeta de representante de ventas en PDP
- Cabecera, footer e interfaz → — Detalles del ciclo de vida de la barra de saludo
- Marketing de página de inicio → — Dónde colocar la promo B2B + pedido rápido en la página de inicio
- Guía de configuración B2B → — Active el B2B nativo de Shopify + catálogos + empresas
- Guía de modos de tienda → — Híbrido vs Solo B2B vs Solo B2C