Vertex — El tema premium B2B y mayorista para Shopify
Vertex es un tema premium de Shopify Online Store 2.0 diseñado específicamente para distribuidores industriales, MRO (mantenimiento, reparación y operaciones), mayoristas, profesionales del sector y cuentas de distribuidor que necesitan que las funciones B2B nativas de Shopify se vean como una tienda B2B de verdad, sin una sola aplicación complementaria, suscripción mensual ni script de terceros.
Cada objeto B2B nativo de Shopify —tablas de precios por volumen, aplicación de reglas de cantidad, condiciones de pago NET-30 / NET-60 / NET-90, cuentas exentas de impuestos, cambio entre empresas con varias ubicaciones, catálogos B2B, solicitudes de presupuesto— se renderiza con el acabado que sus compradores con contrato esperan. Los equipos de compras, los responsables de instalaciones y las cuentas de distribuidor reciben una tienda que refleja la claridad de catálogo de McMaster-Carr, Grainger y Fastenal manteniéndose totalmente OS 2.0.
Listo para B2C desde el primer momento
Vertex no es exclusivo de B2B. Cada función B2B se degrada con elegancia cuando no hay ninguna empresa con sesión iniciada, y un único interruptor de Modo de tienda (Híbrido / Solo B2B / Solo B2C) le permite decidir cuánta interfaz B2B exponer. El mismo tema funciona como una pulida tienda B2C de suministros industriales desde el primer día — sin segunda licencia ni base de código paralela.
Para quién es Vertex
- Distribuidores de suministros industriales — sujeciones, ferretería, herramientas, abrasivos, fluidos
- Proveedores MRO — consumibles de mantenimiento, reparación y operaciones
- Comerciantes mayoristas — catálogos exclusivos para profesionales con precios escalonados
- Distribuidores de recambios de automóvil — catálogos basados en compatibilidad con buscadores Marca / Modelo / Año
- Proveedores de oficina, IT y electrónica — buscadores de marca / categoría / capacidad
- Proveedores de impresión y reprografía — buscadores de marca de impresora / modelo / color
- Comerciantes B2C de suministros industriales — venta a pequeñas empresas y clientes finales
Si sus compradores buscan por número de pieza, esperan descuentos por volumen, hacen pedidos de 50 líneas desde una hoja de cálculo, necesitan condiciones NET-30 o quieren documentación (hojas técnicas, MSDS, certificaciones) en línea en la página de producto — Vertex se construyó para ellos.
El catálogo completo de funciones
Esta sección es la lista definitiva de todas las funciones de Vertex v1.0.0. Cada entrada enlaza con su guía dedicada cuando corresponde.
B2B nativo (sin apps, sin suscripciones)
| Función | Qué hace |
|---|---|
| Tablas de precios por volumen | Precios escalonados renderizados en servidor desde el objeto quantity_price_breaks de Shopify. Los compradores ven el precio unitario para cada nivel de cantidad en la PDP, el carrito y la página de pedido en bloque. |
| Aplicación de reglas de cantidad | MOQ (cantidad mínima de pedido), cantidad máxima de pedido e incrementos por caja validados en el cliente (guardia de UI) y en el servidor (B2B nativo de Shopify). |
| Precios solo tras iniciar sesión | Un único interruptor en la configuración del tema oculta todos los precios a los invitados y los reemplaza con "Inicie sesión para ver los precios". Los compradores solo ven precios tras iniciar sesión. |
| Condiciones NET-30 / NET-60 / NET-90 | Detectadas automáticamente desde el metafield de condiciones de pago de la empresa. Aparecen como una insignia en la barra de saludo ámbar y en el checkout. |
| Insignias de exención fiscal | Detectadas automáticamente desde el estado fiscal nativo de empresa de Shopify. Aparecen en la PDP, el carrito y la barra de saludo. |
| Cambio entre empresas multi-ubicación | Los compradores asociados a varias empresas pueden cambiar entre ellas desde un menú desplegable dedicado en el cajón móvil. |
| Selector de dirección de envío | Cambio con un clic entre las direcciones de envío autorizadas del comprador. Se renderiza como un menú desplegable estilizado en la barra de saludo B2B ámbar (escritorio) y en la sección de cuenta del cajón móvil. |
| Alcance del catálogo B2B | Los compradores solo ven los productos y precios asignados al catálogo de su empresa a través de la función nativa de catálogos B2B de Shopify. Vertex la respeta de extremo a extremo. |
| Página de pedido rápido con pegar y añadir al carrito | Plantilla dedicada /pages/bulk-order. Los compradores pegan filas de 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 solo clic. Los SKU no válidos se marcan en línea. |
| Reposición rápida | Botón "Volver a pedir" en pedidos anteriores. Repite el pedido completo de una vez O línea por línea desde el panel de cuenta de cliente. |
| Página de solicitud de presupuesto (RFQ) | Plantilla dedicada /pages/rfq usando el patrón nativo de formulario de contacto de Shopify. Envía un email al comerciante; no se necesita app de gestión de presupuestos. |
| Pill de contacto del representante de ventas | Información del representante de ventas por empresa extraída de los metafields vertex.rep_name, vertex.rep_email, vertex.rep_phone. Se renderiza como una pill fija en la cabecera de escritorio (≥1170px) y como una tarjeta a ancho completo en la parte inferior del cajón móvil (<1170px). |
| Barra de saludo B2B | Banda ámbar sobre la cabecera que muestra el nombre de empresa del comprador, insignia de condiciones NET, insignia de exención fiscal, selectores de idioma / moneda / dirección de envío cuando se ha iniciado sesión. Se oculta automáticamente para invitados y en modo solo B2C. |
| Banda promocional de funciones B2B | Banda de la página de inicio que destaca las funciones exclusivas B2B (precios por volumen, pedido en bloque, RFQ, NET-30) — visible para los invitados como texto de marketing. |
| Panel de cliente con conciencia B2B | La plantilla de cuenta /account detecta compradores B2B y muestra información de la empresa, condiciones de pago, reposición rápida y la tarjeta de contacto del representante de ventas. |
→ Guía completa de configuración B2B
Página de producto (PDP) — diseñada para catálogos técnicos
| Función | Qué hace |
|---|---|
| Tablas de especificaciones técnicas mediante metafields | Un metaobject dedicado tech_spec_row + metafields vertex.* renderizan un bloque de especificaciones limpio en la PDP. Cubren dimensiones, peso, material, certificaciones, voltaje, capacidad, etc. |
| Documentos y descargas | Los enlaces PDF por producto se renderizan automáticamente en un bloque "Documentos": hoja técnica, MSDS, folleto, ficha técnica, guía de instalación, tarjeta de garantía. Se ocultan automáticamente por producto cuando no hay documentos adjuntos. |
| Divulgación del historial de precios | El metafield opcional vertex.price_history (lista de entradas fecha+precio) renderiza un bloque colapsable "Historial de precios" en la PDP. |
| Etiqueta de envío desde | El metafield vertex.ships_from por producto (o el predeterminado en todo el tema) aparece bajo el título — útil para distribuidores con almacenes regionales. |
| Contador de stock (indicador de bajo stock) | Contador de stock por variante en la PDP, con umbral configurable. Fomenta la urgencia sin revelar el inventario exacto a la competencia. |
| Alerta de reposición | Formulario de suscripción por email en variantes agotadas. Nativo, sin app adicional. |
| Botón ATC de pre-pedido | Las variantes marcadas como reservables muestran un botón "Pre-pedido" en lugar de "Agotado". Usa el seguimiento de inventario nativo de Shopify. |
| Comparativa de productos lado a lado | Barra de comparación fija que rastrea hasta 4 productos; plantilla dedicada /pages/compare renderiza una tabla de comparación completa con filas de especificaciones. Solo de sesión — no es una lista de deseos. Totalmente conforme con la política de la Shopify Theme Store. |
| Modal de vista rápida | El botón "Vista rápida" en las tarjetas de producto abre un modal con la galería del producto, selector de variante, entrada de cantidad y ATC — sin salir del listado. |
| Pestañas de producto | Bloque de sección dedicado para la PDP que divide el contenido del producto en pestañas (Descripción / Especificaciones / Hoja técnica / Envío / Vídeo). |
| Vistos recientemente | Productos rastreados con localStorage (hasta 12 por comprador); aparecen en la parte inferior de la PDP. Se borran cuando el comprador limpia los datos del navegador. |
| Productos relacionados | Recomendaciones de la misma colección o misma etiqueta bajo la PDP. |
| Cambio de imagen al pasar el ratón en las tarjetas de producto | Cuando un producto tiene 2 o más imágenes, al pasar el ratón sobre la tarjeta de listado se intercambia a la segunda imagen. |
Cabecera, navegación, localización
| Función | Qué hace |
|---|---|
| Barra de anuncios | Barra superior estilo APEX con espacios para enlaces, iconos sociales, teléfono y una × descartable a la derecha (persistente con localStorage). Dos diseños: oscuro o ámbar. |
| Dos diseños de cabecera (aplicación automática) | Invitado: cabecera principal blanca con logo + búsqueda predictiva + pills de idioma / moneda + Iniciar sesión/Registrarse + Carrito. B2B con sesión iniciada: lo mismo + barra de saludo ámbar encima con insignias de empresa y selectores. |
| Mega menú | Paneles desplegables de varias columnas con iconos opcionales y una cuadrícula dedicada "Comprar por marca" (cuadrícula con divisores finos). |
| Alternativa de menú desplegable simple | Cuando el comerciante prefiere una lista plana por cada elemento de menú principal. Detección automática o forzable por configuración. |
| Navegación secundaria alineada a la derecha | Ofertas especiales / Guías / Servicios / FAQ — detectado automáticamente por handle si existe una lista de enlaces secondary-menu. |
| Overlay de búsqueda predictiva | Productos / colecciones / páginas / consultas sugeridas con miniaturas de imagen. Reconoce números de pieza del fabricante mediante el metafield vertex.mpn. |
| Cabecera fija al hacer scroll | Interruptor de admin — fija la cabecera al viewport. |
| Selectores con estilo REP-pill | Idioma + moneda se renderizan como pequeñas pills con avatar-bandera circular con una pila de texto de 2 líneas (sobre-título + código ISO) y un chevron. El cajón móvil tiene las mismas pills a ancho completo en una cuadrícula de 2 columnas para alcance con una sola mano. |
| Paneles desplegables personalizados | Cero <select> nativos en ningún sitio. Idioma, moneda y dirección de envío usan un sistema compartido <details> + panel personalizado con estados hover, resaltado de selección actual, icono de marca, animación de fade-in, exclusión mutua, cierre al hacer clic fuera, cierre con Escape. |
| Multidivisa mediante Shopify Markets | La pill de moneda se renderiza incluso para compradores B2B asociados a un único mercado — informativa para que siempre vean en qué moneda están pagando. |
| 5 idiomas incluidos | Inglés (predeterminado), francés, italiano, alemán, español — cadenas UI completas + cadenas de schema en locales/. |
| Soporte RTL completo | <html dir> se invierte automáticamente para árabe, hebreo, persa, urdu, yidis, kurdo, divehi, pastún. Puede forzarse mediante la configuración de localización del tema. |
| Breakpoint con conciencia de tablet | A <1170px (móvil + tablet), el cajón hamburguesa toma el control. A ≥1170px, se muestra la navegación de escritorio completa. |
→ Guía de modos de tienda · Guía de Markets y multidivisa
Secciones de marketing (más de 30 en la paleta de la página de inicio)
| Sección | Propósito |
|---|---|
| Hero | Rotador multi-diapositiva con avance automático, navegación por puntos, composición editorial. El predeterminado se entrega con 1 diapositiva para el LCP más rápido. |
| Colección destacada | Cuadrícula de productos; acepta bloques @app para conformidad con la Theme Store. |
| Lista de colecciones | Cuadrícula de categorías con superposiciones de imagen. |
| Imagen con texto | Emparejamiento editorial (texto + imagen, 50/50 o asimétrico). |
| Multicolumna | Cuadrícula de 2 a 4 columnas (iconos + texto + enlace opcional). |
| Texto enriquecido | Bloque centrado de introducción / sobre nosotros. |
| Banner CTA | Llamada a la acción pre-footer con efecto de superposición sobre el footer; texto por estado de cliente (invitado vs B2B). |
| Newsletter | Suscripción por email con botón de alta. |
| FAQ | Acordeón basado en disclosure; emite automáticamente JSON-LD FAQPage para rich snippets. |
| Lista de logos | Logos de marca con desplazamiento tipo marquee con líneas de cuadrícula con desvanecimiento. |
| Testimonios | Tarjetas con valoración y tratamiento de cabecera con superposición de avatar. |
| Barra de estadísticas | Banda KPI en modo oscuro (p. ej., "40 000+ SKU · NET-30 · Envío 24 h · ISO 9001"). |
| Cuadrícula de industrias | Cuadrícula editorial de tarjetas (p. ej., HVAC, Manufactura, Instalaciones). |
| Hub de recursos | Lista de descargas — hojas técnicas, MSDS, folletos. |
| Cobertura en prensa | Tira de logos + citas destacadas. |
| Timeline | Crónica para la página Sobre nosotros (año + hito). |
| Cuadrícula de servicios | Tiles con superposición de imagen para ofertas de servicio. |
| Temporizador de cuenta atrás | Días / horas / minutos / segundos — promocional. |
| Bundles destacados | Tarjetas de bundles curados con insignias de descuento. |
| Buscador Marca/Modelo/Año | Desplegables en cascada (preset Throttle) — o Marca/Capacidad (OfficeIT) o Marca de impresora/Modelo/Color (Inkline). |
| Banner promocional | Banner superior descartable con persistencia en localStorage. |
| Popup promocional | Apertura automática + intent de salida + localStorage; cadencia configurable por el comerciante. |
| Pad de pedido rápido | Pad de pegar y añadir al carrito en línea (versión lista para la página de inicio del pedido en bloque completo). |
| Vistos recientemente (página de inicio) | Mismo widget que la PDP, aparece en la página de inicio como tira. |
| Productos relacionados | Tira de venta cruzada en la PDP. |
| Barra de carrito fija | Tira de ATC fija exclusiva para móvil. |
| Marcas duales + pedido rápido | Sección fusionada 50/50 que combina logos de marca + pad de pedido rápido. |
| Recursos duales + FAQ | Sección fusionada 50/50 que combina descargas + FAQ. |
→ Guías de configuración de secciones
4 tiendas demo en un solo tema
| Preset | Sector | Acento | Buscador |
|---|---|---|---|
| Vertex | Suministro industrial / MRO | Ámbar #fbbf24 | — |
| Throttle | Recambios de automóvil | Rojo-naranja #ec5f24 | Marca / Modelo / Año |
| OfficeIT | Oficina, IT y electrónica | Azul | Marca / Categoría / Capacidad |
Cada preset incluye su propia página de inicio, plantilla de colección, plantilla de producto e imágenes hero generadas. Cambie de preset desde el personalizador — toda la tienda se recolorea y se vuelve a renderizar.
Plantillas incluidas (Online Store 2.0)
Plantillas requeridas de Shopify (todas presentes): index.json, product.json, collection.json + list-collections.json, cart.json, search.json, blog.json + article.json, page.json, 404.json, password.json, gift_card.liquid.
Suite de cuenta de cliente: customers/account.json (con conciencia B2B), activate_account.json, addresses.json, login.json, order.json (con reposición línea a línea + pedido completo), register.json, reset_password.json.
Plantillas de página personalizadas — aplicables a cualquier página nueva: page.about.json, page.contact.json (2 columnas), page.faq.json, page.rfq.json, page.bulk-order.json, page.compare.json, page.services.json, page.special-offers.json.
Rendimiento
- Módulos ES vanilla — sin bundler, sin framework, sin jQuery, cero scripts de terceros en tiempo de ejecución
- CSS por sección —
section-{name}.csscargado solo por la sección que lo posee. Sin megabundle global. - Tokens de diseño inlined en
layout/theme.liquidelimina una petición CSS que bloquea el renderizado - Imágenes hero WebP en múltiples anchos mediante
<picture><source srcset> font-display: optionalen las fuentes de cuerpo + cabecera para mantener un LCP rápido- Precios renderizados en servidor — JS nunca recalcula precios, solo mejora
- Precarga de fuentes base de cuerpo + cabecera, preconnect a
fonts.shopifycdn.com - Enfoque de imagen de fondo hero + preset predeterminado de 1 diapositiva = LCP recuperado en móvil
- Lighthouse registrado: Rendimiento 65–100 móvil, 90+ escritorio
Accesibilidad (WCAG 2.1 AA)
- Operable por teclado en todas partes (los desplegables personalizados usan
<details>/<summary>nativos; navegación con teclas de flecha en el mega menú) - Foco visible en cada elemento interactivo (anillo de estilo focus-visible)
- Contraste mínimo 4.5:1 en todo; paleta probada
- Objetivos táctiles mínimos de 24 px en móvil
- Inputs etiquetados + roles ARIA (
role="menu",menuitemradio,aria-checked,aria-current) - Enlace de salto al contenido
- Cambio RTL automático con anulación manual opcional
SEO y social
- Grafo completo de schema JSON-LD — Organization, WebSite + SearchAction, BreadcrumbList (PDP), Product (con GTIN, shippingDetails, returns), BlogPosting, ContactPage + LocalBusiness, FAQPage, ItemList (colección)
- Meta Open Graph + Twitter card en cada página (
og:image,og:locale,og:image:alt,twitter:image,twitter:site) rel="next"/rel="prev"en la paginación de colección + blogfetchpriority="high"en la primera imagen de tarjeta de colección (ganancia de LCP)noindexen todo el sitio en 12 tipos de páginas utilitarias (cuenta, búsqueda, etc.)- hreflang emitido automáticamente para los 5 locales publicados
- Favicon se entrega como SVG fallback + slot PNG anulable por configuración
- Campos de Google Merchant Center — GTIN, detalles de envío, devoluciones
Privacidad y cumplimiento
- Sin banner de cookies personalizado — usa el banner nativo de privacidad de cliente de Shopify (mejor puntuación de Mejores Prácticas en Lighthouse, menos código que mantener, sin sorpresas de política)
- Conforme con la política de la Theme Store — sin tracking de terceros, sin enlaces de afiliados, sin créditos de diseñador dentro de los archivos del tema
Lo que NO viene en la caja (todavía)
Para fijar las expectativas correctas:
- Subida de PO (PDFs de orden de compra como pago) — pendiente de que Shopify exponga la API nativa correspondiente sin app complementaria. Planeado para v1.1.
- Flujo de aprobación (aprobaciones internas de varios pasos antes del checkout) — misma dependencia. Planeado para v1.1.
- Lista de deseos — intencionalmente no incluida. La comparativa de productos es solo de sesión por política de la Theme Store; las listas de deseos persistentes requieren una app.
- Chat en vivo — recomendamos el Chat nativo de Shopify o cualquier app de terceros que elija.
Inicio rápido
- Instale Vertex desde la Shopify Theme Store (Tienda online ▸ Temas ▸ Añadir tema)
- Active el B2B nativo (Configuración ▸ Cuentas de cliente ▸ Activar B2B). Sin esto, la interfaz B2B se oculta automáticamente — el tema sigue funcionando como un pulido tema B2C.
- Rellene el namespace de metafield
vertex— hojas técnicas, MPN, contactos de representante de ventas, envío desde. Consulte la Guía de configuración de metafields. - Elija una paleta inicial — Personalizar ▸ Configuración del tema ▸ Colores ▸ Paleta de colores inicial. Elija: Personalizada, Vertex ámbar, Throttle rojo, OfficeIT azul o Inkline verde azulado.
- Personalice en Temas ▸ Personalizar y Publique.
→ Recorrido completo de instalación
Qué sigue
- Instalación → — Instalación paso a paso + activación de B2B
- Referencia de configuración del tema → — Cada ajuste en la configuración del tema, explicado
- Guías de configuración de secciones → — Cómo configurar cada sección
- Guías de funciones → — Configuración B2B, metafields, Modos de tienda, Markets, presets demo, cuenta de cliente, RFQ
- FAQ + solución de problemas → — Preguntas principales respondidas
- Changelog → — Novedades de cada versión
- Soporte → — Cómo contactarnos