Secciones de la página de producto (PDP)
La página de producto de Vertex está construida para catálogos técnicos — compradores que se preocupan por números de pieza, especificaciones, datasheets, MOQs, cajas y precios por volumen. Cada punto de contacto B2B (escalones por volumen, precios con inicio de sesión requerido, reglas de cantidad, tarjeta de representante de ventas, ships-from, distintivo de condiciones NET) aparece en línea en la página de producto sin una sola app complementaria.
La misma página de producto funciona para invitados y compradores B2B con sesión iniciada. Los precios, distintivos, reglas de cantidad y la tarjeta del representante de ventas reflejan automáticamente el catálogo de empresa del cliente y sus condiciones de pago — no necesita una "plantilla de producto B2B" y una "plantilla de producto B2C" como archivos paralelos.
Producto principal
La página de producto en sí — galería, título, precio, selector de variante, input de cantidad, Añadir al carrito y cada superficie consciente de B2B apilada en una sola sección. Cada bloque de abajo es un bloque de arrastrar y soltar que puede reordenar en el personalizador.
Abra el admin de Shopify → Online Store → Themes → Customize, navegue a una página de producto, localice la sección Main product en el editor de páginas y haga clic en Add block para añadir o reordenar estos bloques.
Galería
- Imagen principal con cambio de imagen al pasar el ratón en las tarjetas de listado (requiere 2 o más imágenes)
- Miniaturas debajo de la imagen principal
- Clic para zoom (lightbox)
- Móvil: carrusel deslizable con puntos
Título + meta
- Título del producto
- Vendor (si se muestra)
- Etiqueta de ships-from — ajuste de ships-from por producto o predeterminado de todo el tema
- Línea MPN — cuando el MPN está rellenado, muestra "MPN: 1N4148" bajo el título
Bloque de precio
La superficie de precio es consciente de B2B de fábrica:
- Escalones de precios por volumen — extraídos del catálogo B2B nativo de Shopify. Los compradores ven "1–9: $4.50 · 10–49: $4.10 · 50+: $3.80" en línea. Aparece automáticamente cuando la variante tiene escalones por volumen configurados.
- Precios con inicio de sesión requerido — cuando el ajuste del tema Hide prices until customer logs in está activado, los precios se reemplazan con "Inicie sesión para ver los precios" y un enlace de inicio de sesión para invitados.
- Precio compare-at B2B — visualización tachada cuando el precio del catálogo B2B es más bajo que el precio de la tienda.
Selector de variante
Se muestra como botones estilizados (swatches para color, botones de talla para talla, desplegable para otras opciones). Las variantes agotadas se muestran tachadas pero siguen siendo clicables, para que el comprador pueda ver alternativas.
Input de cantidad
Las reglas de cantidad se aplican en todas partes — en el input, en el carrito y en el checkout:
| Regla | Comportamiento |
|---|---|
| MOQ (mínimo) | No puede decrementar por debajo del mínimo. Mensaje en línea: "Pedido mínimo: 12". |
| Máximo | No puede incrementar por encima del máximo. Mensaje en línea: "Máximo: 144". |
| Incremento de caja | Avanza por el tamaño de la caja. La entrada manual se redondea al alza al siguiente valor válido con una pequeña notificación toast. |
Los compradores asociados a un catálogo B2B obtienen las reglas de cantidad específicas de la empresa; los invitados obtienen las reglas de la tienda. Ambas provienen de las reglas de cantidad nativas de Shopify — Vertex solo las muestra.
Añadir al carrito + Comprar ahora
- Añadir al carrito — Botón estándar, desactivado cuando está agotado a menos que el pre-pedido esté activado.
- Comprar ahora — Botones de checkout acelerado de Shopify (Shop Pay, Apple Pay, Google Pay, PayPal). Actívelos en la configuración de Shopify.
- Pre-pedido — Cuando la variante es reservable, reemplaza "Agotado" con "Pre-pedido".
- Alerta de reposición — Cuando la variante está agotada y el pre-pedido está desactivado, muestra un formulario de suscripción por email. Nativo, sin app adicional requerida.
Tarjeta del representante de ventas
Para compradores B2B con sesión iniciada, una tarjeta del representante de ventas aparece en la página de producto mostrando el representante asignado a la empresa:
- Nombre
- Email (enlace de correo clicable)
- Teléfono (toque para llamar en móvil)
Aparece solo cuando al menos un campo del representante está rellenado y el cliente es comprador B2B.
Breadcrumb
Auto-generado a partir de la colección principal del producto. Añade marcado de fragmento enriquecido de breadcrumb de Google.
Tabla de especificaciones técnicas
Añada un bloque de Tech specs para mostrar una tabla limpia de especificaciones a dos columnas a partir de sus datos de especificaciones técnicas. Úselo para dimensiones, peso, material, voltaje, capacidad y certificaciones.
→ Consulte la guía de configuración de metafields para rellenarlas.
Documentos y descargas
Añada un bloque de Documents para mostrar una lista de descargas PDF en la página de producto:
- Datasheet
- MSDS
- Folleto
- Ficha técnica
- Guía de instalación
- Tarjeta de garantía
Se oculta automáticamente por producto cuando no hay documentos adjuntos.
Historial de precios
Añada un bloque de Price history para mostrar una sección colapsable de "Historial de precios" con entradas de fecha y precio. Útil para compradores industriales que monitorizan tendencias de mercado.
Contador de stock (indicador de bajo stock)
Añada un bloque de Stock counter para mostrar una señal de urgencia por variante. Solo aparece para las variantes cuyo inventario está siguiendo, y cambia a la advertencia "Solo quedan N" cuando el stock cae al umbral bajo (10 unidades). Fomenta la acción sin revelar el inventario exacto a la competencia.
Muestra uno de estos estados:
- Suficiente en stock (más de 10): "En stock"
- En o por debajo de 10 unidades: "Solo quedan 4 en stock"
- Reservable (cero, pero configurado para seguir vendiendo): "Agotado para reserva — se envía en 7–10 días"
- Agotado (cero, no reservable): "Agotado" (con formulario de reposición)
Cuando Hide prices until customer logs in está activado, todo el bloque de precio (incluyendo escalones por volumen y compare-at) se reemplaza con un prompt "Inicie sesión para ver los precios" para los invitados. Las reglas de cantidad, el contador de stock y la tarjeta del representante de ventas siguen apareciendo para que los compradores puedan decidir si vale la pena iniciar sesión por el producto.
Pestañas de producto
La sección de pestañas de producto divide el contenido del producto en pestañas. Coloque esta sección debajo de Main product en la página de producto para reducir el desorden visual en productos con muchas especificaciones.
Ajustes por pestaña: título, contenido (texto enriquecido, archivo o vídeo).
Patrones comunes de pestañas:
- Descripción — copy principal de marketing
- Especificaciones — especificaciones técnicas extendidas más allá de la tabla de especificaciones
- Datasheet — visor de PDF embebido
- Envío y devoluciones — información logística
- Vídeo — YouTube o Vimeo embebido
Las pestañas son totalmente accesibles por teclado. La primera pestaña está abierta por defecto; abrir otra puede cerrar las demás (modo acordeón) o mantenerlas abiertas (modo toggle), según el ajuste Allow multiple open de la sección.
Productos relacionados
Tira de recomendaciones debajo de la página de producto. Se extrae de productos de la misma colección o misma etiqueta.
Ajustes
- Heading — P. ej., "Los clientes también vieron" o "También le puede gustar".
- Source — Misma colección (predeterminado), misma etiqueta o selector manual.
- Max products — 4 (predeterminado), 6, 8 o 12.
- Show price — Interruptor. Respeta las reglas de precios con inicio de sesión requerido.
- Show vendor — Interruptor.
Para compradores de catálogo B2B, solo aparecen los productos del catálogo del comprador. Vertex respeta el filtrado nativo de catálogo de Shopify de extremo a extremo.
Vistos recientemente
Una lista rastreada por el navegador de productos vistos recientemente (hasta 12 por comprador). Aparece al final de la página de producto y también puede colocarse en la página de inicio como tira.
Cómo funciona
- Cada vista de producto se añade a la memoria del navegador del comprador (limitada a 12)
- La sección lee esa lista y obtiene la tarjeta de cada producto
- Se borra cuando el comprador limpia los datos de su navegador — no es una lista de deseos, no se guarda en Shopify
Ajustes
- Heading — "Vistos recientemente"
- Max products — 4, 6, 8 o 12
- Hide if empty — Activado por defecto. La sección entera desaparece cuando el comprador no tiene historial de vistas.
Una lista de deseos persistente requiere una app de Shopify. Vertex se mantiene conforme con la Theme Store manteniendo "vistos recientemente" estrictamente con alcance de sesión y navegador. La comparativa usa el mismo enfoque (consulte Secciones exclusivas B2B).
Carrito fijo
Una barra de Añadir al carrito fija exclusiva para móvil que aparece después de que el comprador hace scroll más allá del botón principal de Añadir al carrito. Mantiene Añadir al carrito a un toque de distancia incluso cuando está profundo en la tabla de especificaciones.
Lo que aparece
- Miniatura de imagen del producto (izquierda)
- Título de la variante seleccionada y precio
- Input de cantidad
- Botón de Añadir al carrito (derecha)
Ajustes
- Show on mobile only — Activado por defecto. El escritorio tiene la cabecera fija para la navegación; el móvil gana más impulso de conversión con el Añadir al carrito fijo.
- Show variant title — Interruptor.
- Color scheme
La sección solo aparece cuando el botón principal de Añadir al carrito sale de la vista, y desaparece cuando se vuelve a desplazar a la vista.
Hoja de referencia de interacciones B2B
| Superficie | Invitado | B2C con sesión iniciada | B2B con sesión iniciada |
|---|---|---|---|
| Bloque de precio | Oculto si "Hide prices until customer logs in" está activado | Precio de tienda | Precio del catálogo B2B más escalones por volumen |
| Escalones de precios por volumen | Oculto | Oculto | Visible |
| Reglas de cantidad | MOQ/máx de tienda | MOQ/máx de tienda | MOQ/máx del catálogo de empresa |
| Tarjeta del representante de ventas | Oculta | Oculta | Visible (cuando los campos del representante están rellenados) |
| Distintivo de condiciones NET | Oculto | Oculto | Visible en la barra de saludo (no en la PDP) |
| Botón de pre-pedido | Visible cuando está activado | Visible cuando está activado | Visible cuando está activado |
| Formulario de reposición | Visible cuando está agotado | Visible cuando está agotado | Visible cuando está agotado |
| Contador de stock | Visible | Visible | Visible |
| Vistos recientemente | Visible | Visible | Visible |
Qué sigue
- Secciones exclusivas B2B → — Pedido en bloque, RFQ, comparativa, promo de funciones B2B
- Secciones de impulso de ventas → — Contador de stock, alerta de reposición, vista rápida
- Cabecera, footer e interfaz → — Cabecera, footer, barra de saludo B2B
- Guía de configuración B2B → — Active B2B y rellene los datos del representante de ventas
- Guía de configuración de metafields → — Datasheets, MPN, ships-from, especificaciones técnicas