Referencia de configuración del tema Vertex
Cada opción bajo Configuración del tema en el editor de tema de Shopify, explicada. Para acceder: abra el editor de tema y haga clic en el icono de engranaje (abajo a la izquierda) etiquetado Configuración del tema.
La configuración de Vertex está agrupada en 7 paneles:
Tipografía
| Ajuste | Qué hace | Predeterminado |
|---|---|---|
| Fuente de cabecera | Fuente usada para <h1>–<h6> en cada página, más titulares de secciones de marketing. | Poppins Bold |
| Fuente de cuerpo | Fuente usada para el texto del cuerpo, navegación, botones, campos de formulario y precios. | Poppins Regular |
Buena práctica
Vertex precarga ambas fuentes para que estén listas antes del primer pintado. Use una sola fuente para ambos (con pesos diferentes) si quiere el LCP más rápido.
Colores
Paleta de colores inicial
Un único desplegable que recolorea toda la tienda con un clic.
| Opción | Sector | Color de acento |
|---|---|---|
| Personalizado | Cualquiera | Use los selectores de color individuales de abajo |
| Vertex ámbar | Suministro industrial / MRO (predeterminado) | #fbbf24 |
| Throttle rojo | Recambios de automóvil | #ec5f24 |
| OfficeIT azul | Suministro de oficina e IT | #3b82f6 |
| Inkline verde azulado | Impresión y reprografía | #0d9488 |
Paleta personalizada (solo se usa cuando paleta inicial = Personalizado)
| Ajuste | Propósito | Predeterminado (Vertex ámbar) |
|---|---|---|
| Fondo | Fondo del cuerpo, fondo del cajón | #ffffff |
| Superficie | Fondo de tarjetas, fondo del panel de configuración | #f5f5f4 |
| Superficie alternativa | Superficie secundaria sutil | #fafaf9 |
| Texto | Color principal del texto | #0c0a09 |
| Texto atenuado | Sobre-títulos, etiquetas, leyendas | #57534e |
| Bordes | Bordes de tarjetas, divisores | #e7e5e4 |
| Acento | Color principal de marca (CTAs, insignias) | #d97706 |
| Acento oscuro | Estado hover/activo en CTAs ámbar | #b45309 |
| Acento suave | Tinte suave para fondos teñidos en ámbar | #fef3c7 |
| Texto sobre acento | El color del texto y los iconos colocados sobre botones e insignias rellenos de acento. Manténgalo con alto contraste frente a Acento oscuro (blanco por defecto) | #ffffff |
| Éxito | Insignias de éxito (En stock, NET-30 aprobado) | #15803d |
Diseño
| Ajuste | Opciones | Predeterminado |
|---|---|---|
| Ancho de página | Estrecho (75rem) / Estándar (90rem) / Ancho (110rem) | Estrecho |
| Padding lateral de página | 16–60 px (deslizador) | 28 px |
Comportamiento de la cabecera
| Ajuste | Qué hace | Predeterminado |
|---|---|---|
| Cabecera fija al hacer scroll | Fija la cabecera principal al viewport. | Activado |
Comportamiento del carrito
| Ajuste | Qué hace | Predeterminado |
|---|---|---|
| Diseño del carrito | Cajón deslizable (recomendado para añadidos rápidos B2B) o Página dedicada de carrito. | Cajón |
Utilidades
| Ajuste | Qué hace | Predeterminado |
|---|---|---|
| Mostrar botón 'Volver arriba' | Botón flotante tras un viewport de scroll. | Activado |
| Mostrar 'Vistos recientemente' en páginas de producto | Rastrea hasta 12 productos por comprador en localStorage. | Activado |
B2B
Modo de tienda
| Opción | Qué hace | Mejor para |
|---|---|---|
| Híbrido (auto) (predeterminado) | Detecta automáticamente: valores predeterminados aptos para B2C en invitados, interfaz B2B para compradores B2B con sesión iniciada. | La mayoría de comerciantes — acepta ambas audiencias. |
| Solo B2B | Oculta los valores predeterminados aptos para B2C. | Comerciantes exclusivamente mayoristas. |
| Solo B2C | Suprime cada elemento B2B de la UI incluso para compradores B2B con sesión iniciada. | Cuando el mismo tema se ejecuta en una tienda B2C hermana. |
→ Análisis en profundidad: Guía de modos de tienda
Visibilidad de precios
| Ajuste | Qué hace | Predeterminado |
|---|---|---|
| Ocultar precios hasta que el cliente inicie sesión | Reemplaza los precios con "Inicie sesión para ver los precios" a los invitados. | Desactivado |
Secciones de la página de producto
| Ajuste | Qué hace | Metafield de respaldo |
|---|---|---|
| Mostrar historial de precios en PDP | Renderiza una disclosure "Historial de precios" cuando el producto tiene vertex.price_history. | vertex.price_history |
| Mostrar 'Envío desde' en PDP | Lee vertex.ships_from, recurre al predeterminado de abajo. | vertex.ships_from |
| Ubicación predeterminada 'Envío desde' | Se usa cuando el producto no tiene vertex.ships_from. Deje en blanco para omitir. | — |
| Mostrar 'Documentos y descargas' en PDP | Envuelve enlaces de hoja técnica / MSDS / folleto / guía de instalación. Se oculta automáticamente por producto cuando no hay documentos adjuntos. | vertex.datasheet, etc. |
| Mostrar muestras de variantes | Convierte los valores de opción de color/imagen en chips de muestra clicables en la página de producto. Cuando está desactivado, las opciones se renderizan como menús desplegables simples en todas partes. | — |
De dónde provienen las muestras
Asigne un color o una imagen a un valor de opción en su panel de administración de Shopify y Vertex lo muestra como un chip clicable automáticamente — sin configuración del tema. Un menú desplegable accesible permanece debajo para usuarios de teclado y lectores de pantalla.
Localización
| Ajuste | Opciones | Predeterminado |
|---|---|---|
| Dirección del texto | Auto (basado en locale) / Izquierda a derecha / Derecha a izquierda | Auto |
Auto-RTL
Vertex invierte <html dir> automáticamente para árabe, hebreo, persa, urdu, yidis, kurdo, divehi y pastún. Establezca en Izquierda a derecha / Derecha a izquierda solo si necesita forzar.
SEO y compartir
Activos de marca
| Ajuste | Tamaño recomendado |
|---|---|
| Favicon | PNG de 32×32. Deje en blanco para usar la marca Vertex incluida. |
Tarjetas sociales
| Ajuste | Tamaño recomendado |
|---|---|
| Imagen predeterminada para compartir (OG / Twitter) | 1200 × 630 px. |
| Usuario de Twitter / X | Sin la @. |
URLs de perfil social (Organization JSON-LD sameAs)
- URL de LinkedIn, URL de Twitter / X, URL de Facebook, URL de Instagram, URL de YouTube
Google Merchant / Shopping
| Ajuste | Notas |
|---|---|
| País predeterminado de envío desde (código ISO) | Dos letras (US, GB, DE, etc.) |
| Tarifa predeterminada de envío (numérica) | Use 0 para envío gratis |
| Tiempo de gestión — mín / máx (días) | 0–14 días |
| Tiempo de tránsito — mín / máx (días) | 0–30 días |
| Ventana de devolución (días) | 0–180 días |
| Método de devolución | Por correo / En tienda / Conservar producto |
| Tarifas de envío de devolución | Devolución gratis / Paga el cliente |
Información del negocio
Estos valores alimentan el Organization JSON-LD de todo el sitio (datos del Knowledge Panel).
| Ajuste | Formato | Ejemplo |
|---|---|---|
| Teléfono (E.164 preferido) | Formato internacional con código de país | +1-216-555-0182 |
| Horario telefónico | Texto libre | Lun-Vie 7:00-18:00 CST |
| Dirección postal | — | 1500 W Industrial Pkwy |
| Ciudad / localidad | — | Cleveland |
| Código de estado / región | Código de región de 2 letras | OH |
| Código postal / ZIP | — | 44113 |
| País (código ISO) | Código de país de 2 letras | US |
| Año de fundación | Año de 4 dígitos | 2014 |
La mayor ganancia de SEO en 5 minutos
Rellenar estos campos puebla el JSON-LD Organization + LocalBusiness en cada página — los datos que Google usa para construir su Knowledge Panel y ficha de Maps.
Dónde se aplica cada ajuste
| Panel | Afecta a |
|---|---|
| Tipografía | Cada página — cuerpo + cabeceras |
| Colores | Cada página — fondo, texto, acento |
| Diseño | Cada página — ancho máximo, padding, cabecera fija |
| B2B | Interfaz B2B (barra ámbar, RFQ, pedido en bloque) + visibilidad de precios |
| Localización | Atributo <html dir> en cada página |
| SEO y compartir | Etiquetas <meta> + JSON-LD en cada página |
| Información del negocio | JSON-LD Organization + LocalBusiness en cada página |
Próximos pasos
- Guías de configuración de secciones → — Configure cada bloque de sección
- Guía de modos de tienda → — Análisis en profundidad de Híbrido / Solo B2B / Solo B2C
- Guía de configuración de metafields → — Metafields de respaldo para mejoras B2B en PDP