Secciones Sales Boost
Estas son las secciones orientadas a la conversión de Vertex — las señales de urgencia, las superficies promocionales, los flujos modales, los bloques de packs. Ninguna de ellas requiere una app de terceros. Todas respetan la política de la Shopify Theme Store (sin listas de deseos persistentes, sin scripts de seguimiento, sin enlaces de afiliación).
Si apila demasiadas señales de urgencia, se anulan entre sí. Un contador regresivo junto a un contador de stock bajo junto a un popup promocional grita desesperación. Elija la que mejor encaja con su campaña, apueste por ella y vaya rotando.
promo-banner
Archivo de sección: sections/promo-banner.liquid
Banner superior descartable — normalmente utilizado para promocionar una rebaja en todo el sitio, un umbral de envío gratuito o una campaña estacional. Se diferencia de la barra de anuncios (que siempre está visible como chrome); el banner promocional es basado en campañas y descartable.
Ajustes
| Ajuste | Tipo | Notas |
|---|---|---|
| Text | Texto enriquecido | Mensaje de valor breve — "Rebajas de primavera · 15 % de descuento en pedidos superiores a 1.000 $". |
| Background color | Color | Elija un acento de alto contraste — ámbar, rojo anaranjado, turquesa, etc. |
| Link URL | URL | Destino al hacer clic en el banner (toda la franja es clicable). |
| Link label | Texto | CTA en línea — "Comprar la rebaja →". |
| Dismissible | Casilla | Por defecto activado. Añade el botón de cierre × + persistencia en localStorage. |
| Position | Selección | above_header (por defecto) · below_header. Sobre el header se lee como más urgente; debajo del header se lee más como un banner. |
Descartabilidad
Cuando Dismissible está activado, el botón × escribe una clave vertex_promo_dismissed:{section-id} en localStorage. El banner permanece oculto hasta que el visitante borra los datos del sitio — o usted vuelve a publicar la sección con un ID distinto.
Si desea volver a mostrar una promoción descartada para una nueva campaña, cambie el ID de la sección (elimine + vuelva a añadir la sección en el personalizador). La antigua clave de localStorage ya no coincidirá y el banner reaparecerá para todos.
promo-popup
Archivo de sección: sections/promo-popup.liquid
Modal de apertura automática con imagen, encabezado, cuerpo y CTA. Disparador configurable y cadencia basada en cookies para que los visitantes no lo vean en cada carga de página.
Ajustes
| Ajuste | Tipo | Notas |
|---|---|---|
| Heading | Texto | "Suscríbase y ahorre un 10 %" / "Espere — llévese un kit de muestras gratis". |
| Body | Texto enriquecido | Mensaje tranquilizador breve + propuesta de valor. |
| Image | Imagen | Ilustración renderizada al lado (o fondo a sangre completa). |
| CTA label | Texto | "Suscribirse" / "Conseguir el kit". |
| CTA URL | URL | Página de formulario o producto. |
| Trigger | Selección | immediate · on_scroll (tras desplazarse un 50 % de la página) · exit_intent (detección de salida del ratón). |
| Delay seconds | Número | Solo se utiliza cuando el disparador es immediate. Por defecto 5. |
| Cookie expiry days | Número | Por defecto 7. Los visitantes que lo cierran o convierten no volverán a verlo durante N días. |
Explicación de los disparadores
| Disparador | Recomendado para | Consideración UX |
|---|---|---|
| Immediate (con retraso) | Suscripciones al boletín, ofertas para visitantes primerizos | El más intrusivo — utilice un retraso mínimo de 5–10 s |
| On scroll (50 %) | Señal de engagement — solo se dispara después de que el visitante se haya desplazado, lo que indica interés | El mejor equilibrio entre conversión y UX |
| Exit intent | Ofertas de última oportunidad, recuperación de abandono | Solo escritorio — la intención de salida no se dispara de forma fiable en móvil |
La clave de cookie es vertex_promo_popup:{section-id}. El modal no volverá a abrirse hasta que la cookie expire.
countdown
Archivo de sección: sections/countdown.liquid
Contador de días / horas / minutos / segundos. Cuenta en vivo mediante JS, renderizado en el servidor para el estado inicial (sin parpadeos).
Ajustes
| Ajuste | Tipo | Notas |
|---|---|---|
| Heading | Texto | "Las rebajas de primavera terminan en". |
| End date | Selector de fecha | Fecha + hora de caducidad. Almacenadas en la zona horaria de la tienda del comerciante. |
| Expired text | Texto | Sustituye al contador una vez que el temporizador llega a cero. "Las rebajas han terminado". |
| Link URL | URL | CTA opcional debajo del contador. |
| Link label | Texto | "Comprar ahora". |
| Color scheme | Selección | Desplegable estándar de esquema de color. |
Cómo cuenta
assets/countdown.js ejecuta un bucle de requestAnimationFrame que actualiza el temporizador cada segundo. Cuando se alcanza la hora objetivo, el contador es sustituido por el Expired text. El enlace/CTA queda oculto tras la expiración.
Los contadores falsos (perpetuamente a 24 horas, que se reinician al recargar la página) destruyen la confianza. Vincule la End date a un fin de campaña real y deje que la sección se encargue del estado de expiración.
featured-bundles
Archivo de sección: sections/featured-bundles.liquid
Tarjetas de packs curadas con imagen, título, distintivo de descuento y ATC. Cada bloque es un pack (normalmente un producto padre que agrupa entre 2 y 5 SKU, configurado como Shopify Bundle en su admin).
Ajustes por bloque
| Ajuste | Tipo | Notas |
|---|---|---|
| Product | Selector de producto | El producto padre del pack. |
| Bundle label | Texto | Sobrescribe el título del producto — "Kit MRO inicial". |
| Discount text | Texto | Distintivo superpuesto a la imagen — "Ahorre 15 %" / "3 por el precio de 2". |
| Description | Texto enriquecido | Propuesta de valor breve bajo el título. |
Ajustes de la sección
- Heading — "Empaquete y ahorre"
- Columns — 2 / 3 / 4
- Show price — interruptor (respeta la fijación de precios con inicio de sesión requerido)
Estilo del distintivo de descuento
El texto del descuento se renderiza como una píldora circular sobre la esquina superior derecha de la imagen. Use colores de acento (ámbar, rojo anaranjado, turquesa) — el distintivo es lo bastante pequeño como para no abrumar el visual del pack.
Contador de stock (indicador de stock bajo)
Snippet: snippets/stock-counter.liquid (renderizado como bloque en main-product)
Ya tratado en Página de producto. Solo aparece para las variantes cuyo inventario está siguiendo, y cambia a la advertencia "Solo quedan N" cuando el stock alcanza el umbral bajo (10 unidades). Genera urgencia sin revelar el inventario exacto a la competencia.
Tres estados:
- Por encima del umbral: "En stock"
- ≤ umbral: "Solo quedan 4"
- = 0: "Agotado" (con formulario de reposición o botón de reserva anticipada)
Alerta de reposición (back-in-stock)
Snippet: snippets/back-in-stock.liquid (renderizado automáticamente en variantes agotadas en main-product)
Formulario de suscripción por correo electrónico que aparece en las variantes agotadas cuando la reserva anticipada no está habilitada. Nativo — sin app de terceros.
Cómo funciona
- El comprador selecciona una variante agotada
- El ATC se sustituye por un campo de email + botón Avisarme
- Al enviar, el email del comprador se escribe en la lista de clientes de Shopify con una etiqueta
back_in_stock:{product_id}:{variant_id} - Cuando reponga stock y vuelva a publicar la variante, podrá filtrar a los clientes por esa etiqueta y enviar una campaña
Lo que debe hacer el comerciante
- Cree un segmento de clientes en Shopify admin filtrado por la etiqueta
back_in_stock:{product_id}:* - Cuando reponga stock, envíe una campaña manual a ese segmento mediante Shopify Email o su ESP
Vertex captura la suscripción. Enviar el email de reposición es un paso manual — Shopify no expone un hook nativo de "auto-email al reponer" desde el código del tema sin una app. La contrapartida es el cumplimiento total de la política de la Theme Store + cero coste mensual.
Modal de vista rápida
Recurso: assets/quick-view.js + snippets/quick-view-button.liquid
Se activa con el botón Vista rápida en las tarjetas de producto. Abre un modal con la galería del producto, el selector de variantes, el campo de cantidad y el ATC — sin abandonar la página de colección.
Qué se renderiza en el modal
- Galería multi-imagen (con deslizamiento en móvil)
- Título + precio (respeta la fijación de precios con inicio de sesión requerido + precio del catálogo B2B)
- Selector de variantes
- Campo de cantidad (con cumplimiento de MOQ / máximo / case-pack)
- Botón ATC
- Enlace "Ver detalles completos →" a la PDP
Ajustes (en tarjeta de producto / secciones de colección)
- Show quick view button — interruptor (por sección:
featured-collection,collection-list, resultados de búsqueda, productos relacionados) - Quick view button label — texto (por defecto "Vista rápida")
Cuándo habilitarlo / deshabilitarlo
| Caso de uso | Recomendación |
|---|---|
| Catálogo de gran volumen donde los compradores comparan variantes rápidamente | Habilitar — acelera el flujo "navegar 20 productos, añadir 3" |
| Catálogo altamente técnico donde los compradores necesitan fichas técnicas + especificaciones antes de decidir | Deshabilitar — la vista rápida no muestra especificaciones ni documentos; obligue al clic a la PDP |
Cuándo usar qué
| Objetivo | Sección |
|---|---|
| Atraer atención hacia una campaña de todo el sitio | promo-banner |
| Capturar email + ofrecer un descuento por primera compra | promo-popup |
| Oferta con tiempo limitado y caducidad real | countdown |
| Destacar ofertas curadas de varios productos | featured-bundles |
| Urgencia en la PDP sin revelar el inventario exacto | Contador de stock |
| Capturar demanda de artículos agotados | Alerta de reposición |
| Reducir fricción en el flujo página de colección → ATC | Vista rápida |
Qué sigue
- Secciones de la página de producto → — Contador de stock + reposición en la PDP al completo
- Marketing de la página de inicio → — Dónde colocar banners promocionales en la página de inicio
- Secciones de buscador → — Buscadores Marca/Modelo/Año + Marca/Categoría/Capacidad
- Referencia de ajustes del tema → — Esquemas de color, layout y los conmutadores de la página de producto