Cabecera, footer e interfaz del sitio
La interfaz es todo lo que envuelve su tienda — la barra de anuncios, la cabecera (logo, nav, búsqueda, cuenta, carrito), la barra de saludo B2B que aparece automáticamente para compradores de empresa con sesión iniciada, y el footer. En Vertex, cada pieza de esta interfaz es consciente de B2B desde el primer momento: selectores, insignias y pills de representante aparecen automáticamente cuando un comprador de empresa ha iniciado sesión, y se degradan con elegancia a un diseño B2C pulido cuando no es así.
No tiene que elegir entre una "cabecera B2B" y una "cabecera B2C". Vertex renderiza una sola cabecera — y superpone la barra ámbar de saludo B2B encima en el momento en que un comprador de empresa inicia sesión. Los invitados ven la cabecera blanca limpia; los compradores con sesión iniciada ven la misma cabecera más las insignias de su empresa, la pill de condiciones NET, el indicador de exención fiscal y el selector de dirección de envío.
Barra de anuncios
Archivo de sección: sections/announcement-bar.liquid
La barra superior estilo APEX encima de la cabecera principal — texto a la izquierda, icono opcional a la izquierda (camión / rayo / candado), número de teléfono, iconos sociales y una × descartable a la derecha. Dos esquemas de color disponibles de fábrica: oscuro y ámbar.
Ajustes
| Ajuste | Tipo | Notas |
|---|---|---|
| Texto | Texto enriquecido | Mensaje breve de valor — "Envío gratis en pedidos superiores a $500", "NET-30 disponible para compradores cualificados". Admite enlaces en línea. |
| Icono izquierdo | Select | truck · lightning · lock · none. Combina un glifo SVG con el texto. |
| Número de teléfono | Texto | Pill de teléfono alineada a la derecha. Tap-para-llamar en móvil (enlace tel:). |
| URL de Instagram | URL | Icono social de marca. Se renderiza solo si está rellenado. |
| URL de LinkedIn | URL | Icono de LinkedIn. |
| URL de X (Twitter) | URL | Icono de X. |
| URL de YouTube | URL | Icono de YouTube. |
| Esquema de color | Select | dark (predeterminado) o amber. |
Bloques de enlace
Añada bloques de Enlace para añadir pequeños enlaces de texto en la barra de anuncios — Ofertas especiales, Hágase distribuidor, Recursos. Cada bloque toma una label y una url.
Descartable
El botón × de la derecha cierra la barra de anuncios para el visitante actual. El estado se persiste en localStorage mediante assets/announcement-dismiss.js, por lo que la barra permanece oculta hasta que el visitante limpie los datos del sitio.
El esquema ámbar coincide con el color de acento de la barra de saludo B2B. Úselo cuando su anuncio sea una propuesta de valor B2B (condiciones NET-30, alta de distribuidor, RFQ). Use el esquema oscuro para marketing general.
Cabecera principal
Archivo de sección: sections/header.liquid
La superficie de navegación principal — logo, texto de marca, menú principal, menú secundario opcional, búsqueda predictiva, selectores de locale y moneda, cuenta y carrito.
Ajustes
| Ajuste | Tipo | Notas |
|---|---|---|
| Logo | Imagen | Recomendado: SVG o PNG 2x. Restringido por una altura máxima establecida en el ajuste numérico Altura máxima del logo. |
| Anulación de texto de marca | Texto | Texto opcional usado cuando no hay logo presente (p. ej., "Vertex Supply"). Se renderiza en la tipografía de cabecera. |
| Menú principal | Lista de enlaces | La navegación principal. Cada elemento de menú padre obtiene un desplegable impulsado por sus elementos hijos. |
| Estilo de submenú | Select | auto · mega · dropdown. Auto elige mega cuando un padre tiene 8 o más hijos o se detecta un diseño de cuadrícula; de lo contrario renderiza un desplegable plano. |
| Menú secundario | Lista de enlaces | Nav utilitaria alineada a la derecha (Ofertas especiales · Guías · Servicios · FAQ). Detectado automáticamente por el handle de lista de enlaces secondary-menu si no elige uno. |
| Placeholder de búsqueda | Texto | Traducible. Por defecto "Buscar por producto, SKU o número de pieza". |
| Mostrar selector de locale | Checkbox | Predeterminado activado. Oculta/muestra la pill de idioma en la cabecera de escritorio y en el cajón móvil. |
| Mostrar selector de moneda | Checkbox | Predeterminado activado. Oculta/muestra la pill de moneda. Incluso los compradores B2B de un solo mercado lo ven de manera informativa para que siempre sepan en qué moneda están pagando. |
| Fija al hacer scroll | Checkbox | Fija la cabecera al viewport al hacer scroll. |
Lo que se renderiza a la derecha del menú
En orden de izquierda a derecha: input de búsqueda predictiva, pill de idioma, pill de moneda, pill de representante de ventas (mostrada automáticamente para B2B), Cuenta, Contador de carrito.
La pill de representante de ventas se extrae de los metafields vertex.rep_name, vertex.rep_email, vertex.rep_phone de la empresa. Consulte la Guía de configuración B2B para más detalles de poblamiento.
Mega menú vs. desplegable simple
El estilo de submenú se decide por cada elemento de menú padre mediante el ajuste menu_style. Dos formatos:
- Mega menú — paneles de cuadrícula multi-columna con iconos opcionales y una cuadrícula dedicada de marca. Úselo para Comprar por categoría, Comprar por marca, Industrias — elementos padre con 8 o más hijos o subcategorías visuales.
- Desplegable simple — lista plana. Úselo para Sobre nosotros, Recursos, Cuenta — elementos padre con un puñado de páginas.
Cuando está configurado en auto, Vertex elige mega si el padre tiene ≥ 8 hijos; de lo contrario, el desplegable simple.
Barra de saludo B2B
Archivo de sección: sections/b2b-greeting-bar.liquid
La banda ámbar que se sitúa encima de la cabecera principal para compradores de empresa con sesión iniciada. Sin ajustes para el comerciante — se renderiza automáticamente según el estado del cliente.
Cuándo aparece
Las tres condiciones deben cumplirse:
customer.b2b?— el cliente es un comprador B2B (empresa), no una cuenta B2Ccustomer.current_company— está asociado al menos a una empresasettings.storefront_mode != 'b2c'— el tema no está fijado en modo solo B2C
Si alguna falla (invitado, modo solo B2C, sin empresa asociada) la barra de saludo no se renderiza en absoluto.
Lo que muestra
- Nombre de empresa — "Sesión iniciada como
{company.name}" - Insignia de condiciones NET — NET-30 / NET-60 / NET-90 desde el metafield de condiciones de pago de la empresa
- Insignia de exención fiscal — desde el estado fiscal nativo de empresa de Shopify
- Pill de idioma — avatar estilo REP + código ISO + chevron
- Pill de moneda — avatar estilo REP + código ISO + chevron
- Selector de dirección de envío — etiqueta estática cuando el comprador tiene una ubicación; desplegable completo cuando tiene varias
En pantallas ≤ 1169px la barra de saludo se colapsa y su contenido se mueve a la sección de cuenta del cajón hamburguesa. La banda ámbar solo aparece en ≥ 1170px (escritorio) para que no compita con la barra de búsqueda por el espacio vertical en móvil.
→ Consulte Secciones exclusivas B2B para la superficie completa de la función.
Footer
Archivo de sección: sections/footer.liquid
El footer del sitio — menú, social, email, iconos de pago, newsletter, enlaces legales.
Ajustes
| Ajuste | Tipo | Notas |
|---|---|---|
| Menú de footer | Lista de enlaces | Nav de footer multi-columna. Cada padre se renderiza como cabecera de columna. |
| URL de Instagram | URL | Se renderiza solo si está rellenado. |
| URL de Facebook | URL | Se renderiza solo si está rellenado. |
| URL de LinkedIn | URL | Se renderiza solo si está rellenado. |
| URL de X (Twitter) | URL | Se renderiza solo si está rellenado. |
| URL de YouTube | URL | Se renderiza solo si está rellenado. |
| Texto | Vacío por defecto. Cuando se rellena, se renderiza como enlace mailto: en la columna de contacto. | |
| Mostrar iconos de pago | Checkbox | Predeterminado activado. Usa shop.enabled_payment_types para que no tenga que mantener la lista usted mismo. |
| Cabecera de newsletter | Texto | P. ej., "Únase a la lista profesional". |
| Introducción de newsletter | Texto enriquecido | Texto breve de tranquilidad — "Lanzamientos mensuales, sin spam". |
| Menú legal | Lista de enlaces | Privacidad · Términos · Reembolso · Cookies. Recurre automáticamente a sus URLs /policies/* si deja el menú en blanco. |
Formulario de newsletter
El bloque de newsletter usa el formulario nativo de newsletter de cliente de Shopify, por lo que los suscriptores se escriben en su lista de clientes de Shopify (con la marca newsletter de aceptar marketing). Sin integración de terceros requerida.
No elige los iconos de pago a mano — Vertex lee shop.enabled_payment_types y renderiza solo los iconos que ha activado en la configuración de pagos de Shopify. Active Apple Pay en Configuración → Pagos → aparece en el footer. Desactívelo → desaparece.
Búsqueda predictiva
Archivo de sección: sections/predictive-search.liquid (renderizado por header.liquid)
Se despliega desde el input de búsqueda mientras el comprador escribe. Muestra cuatro paneles:
- Productos — miniatura de imagen, título, vendor, precio. Reconoce los números de pieza del fabricante mediante el metafield
vertex.mpn(por lo que buscar1N4148encuentra el diodo por número de pieza). - Colecciones — título + imagen.
- Páginas — título + URL.
- Consultas sugeridas — sugerencias nativas de búsqueda de Shopify.
Reconocimiento de MPN
Si rellena el metafield vertex.mpn (texto de una sola línea) en un producto, la búsqueda predictiva hará coincidir las consultas con ese campo además del título / SKU / vendor estándar del producto. Crítico para catálogos técnicos donde los compradores buscan por número de pieza en lugar de por nombre de producto.
→ Consulte la Guía de configuración de metafields para más detalles de poblamiento.
Comportamiento responsive
La cabecera tiene un breakpoint duro en 1170px — elegido para que el iPad Pro en vertical (1024px) se mantenga en el flujo hamburguesa pero la mayoría de portátiles caigan en el diseño de escritorio.
| Viewport | Diseño |
|---|---|
| < 1170px | Menú hamburguesa → cajón. El cajón contiene: menú principal, menú secundario, selector de dirección de envío, pills de locale + moneda (cuadrícula de 2 columnas), tarjeta de representante de ventas (ancho completo abajo), idioma + iniciar sesión. |
| ≥ 1170px | Nav de escritorio completa. Paneles de mega menú / desplegable, input de búsqueda predictiva, pills REP, pill de representante de ventas, cuenta, carrito. |
Paneles desplegables personalizados (sin <select> nativo)
Vertex usa cero elementos <select> nativos en ningún sitio. Los selectores de idioma, moneda y dirección de envío usan un sistema compartido <details> + <summary> + panel personalizado con:
- Estados hover
- Resaltado de selección actual + icono de marca
- Animación de fade-in
- Exclusión mutua (al abrir uno se cierran los demás)
- Cierre al hacer clic fuera
- Cierre con Escape
- Navegación completa por teclado (teclas de flecha + Enter)
La implementación vive en assets/global.js (busque el helper closeAllDetails()). Restilizar estos desplegables es cuestión de anular los selectores details[data-vertex-dropdown] — sin JS requerido.
Qué sigue
- Secciones de marketing de la página de inicio → — Configure el hero, colección destacada, testimonios, FAQ y las otras más de 25 secciones de la página de inicio
- Secciones de la página de producto → — Producto principal, pestañas de producto, productos relacionados, vistos recientemente, carrito fijo
- Secciones exclusivas B2B → — Barra de saludo B2B (enlace cruzado), promo de funciones B2B, pedido en bloque, RFQ, comparativa
- Guía de modos de tienda → — Híbrido vs Solo B2B vs Solo B2C
- Referencia de configuración del tema → — Cada ajuste de todo el tema explicado