Apariencia y plantillas de widgets

Controla cómo se ve y se comporta cada widget de Umbrella en tu tienda online. Selecciona un tipo de widget en la barra lateral y luego usa las tres pestañas para configurarlo:

• Configuración — activa funciones, elige modos de visualización y controla la visibilidad
• Plantilla — edita el HTML y el CSS con el editor de código
• Idiomas — administra los textos traducidos para tiendas con varios idiomas

Tipos de widget

Página de producto (PDP)

• Widget de PDP — tarjeta principal con la oferta de garantía en las páginas de producto
• Widget OEM PDP — información de la garantía del fabricante
• Modal de selección — ventana emergente para elegir las opciones de garantía
• Modal de información — ventana emergente con los detalles de la protección de la garantía

Carrito

• Carrito protegido — tarjeta de estado para los artículos con protección de garantía
• Carrito sin protección — tarjeta de venta adicional para los artículos sin protección de garantía

Estado del pedido

• Widget de estado del pedido — detalles de la garantía en las páginas de confirmación y de estado del pedido
• Modal de estado del pedido — modal con los detalles de la garantía desde la página de estado del pedido

Poscompra

• Tarjeta poscompra — venta adicional de garantía en las páginas de estado del pedido para productos sin cobertura
• Modal poscompra — modal de selección para las ventas adicionales poscompra

Protección de envío

• Widget de Protección de envío — oferta de Protección de envío en la página del carrito
• Modal de Protección de envío — modal informativo con los detalles de la Protección de envío

Configuración del widget PDP

Es la oferta principal de garantía en las páginas de detalle del producto. Activa o desactiva Habilitar tarjeta PDP para mostrarla u ocultarla.

Modo de visualización

Opciones solo para el modo En línea

• Exigir elegir una opción — exige que el cliente seleccione una opción de garantía antes de agregar al carrito
• Seleccionar automáticamente la primera opción — preselecciona el primer plan (el cliente puede cambiarlo o rechazarlo)
• Mostrar la opción “Sin cobertura” — muestra una opción “No, gracias” para rechazar de forma explícita

Opciones adicionales

• Abrir modal al agregar al carrito — si no hay ninguna garantía seleccionada, muestra un modal antes de agregar el artículo
• Selector de inserción personalizado — selector CSS para controlar dónde se coloca el widget en tu página
• Posición de inserción personalizada — Fuera arriba, Dentro arriba, Dentro abajo o Fuera abajo
• Usar plantilla personalizada — usa tu propio HTML/CSS en lugar del diseño predeterminado
• Ocultar la marca Umbrella — quita el pie “Powered by Umbrella”

Configuración del widget OEM PDP

Muestra la información de la garantía del fabricante (OEM) en las páginas de producto, de forma separada de las ofertas de garantía extendida.

• Habilitar widget OEM — muestra u oculta el widget OEM
• Ocultar detalles de la cobertura — oculta la descripción detallada de la cobertura
• Ocultar duración de la garantía — oculta el plazo de la garantía
• Usar plantilla personalizada / Ocultar la marca Umbrella

Configuración del modal de selección

Ventana emergente que muestra las opciones de garantía. Se abre desde el widget PDP, desde el carrito o al agregar al carrito.

• Habilitar modal de selección
• Modo de visualización — En línea (tarjetas seleccionables) o Individual (tarjetas independientes)
• Exigir elegir una opción — exige una selección antes de cerrar
• Seleccionar automáticamente la primera opción — preselecciona la primera opción (solo en el modo En línea)
• Usar plantilla personalizada / Ocultar la marca Umbrella

Configuración del modal de información

Muestra información detallada sobre la protección de la garantía cuando el cliente hace clic en el botón de información o detalles.

• Habilitar modal de información
• Usar plantilla personalizada / Ocultar la marca Umbrella

Configuración del widget Carrito protegido

Aparece en los artículos del carrito que ya tienen protección de garantía.

• Habilitar tarjeta de carrito protegido
• Mostrar botón del modal de información — permite al cliente ver los detalles de la garantía
• Mostrar botón para quitar la protección — permite al cliente quitar la protección de garantía
• Ocultar la línea de garantía extendida en el carrito — muestra los detalles de la garantía solo dentro de la tarjeta del producto
• Ocultar el nivel de precio de la línea de garantía extendida — oculta el nivel de precio en la línea de la garantía
• Ocultar los detalles de la línea de garantía extendida — oculta la información detallada de la garantía en la línea
• Sumar al total de la línea protegida — combina el precio de la garantía con el total mostrado del producto
• Desactivar interacciones con la línea de garantía — impide cambiar la cantidad en la línea de la garantía
• Usar plantilla personalizada / Ocultar la marca Umbrella

Configuración del widget Carrito sin protección

Aparece en los artículos del carrito sin protección de garantía y le ofrece al cliente la oportunidad de agregar cobertura.

• Habilitar tarjeta de carrito sin protección
• Modo de visualización — Modal, En línea o Individual
• Solo en el modo En línea: Exigir elegir una opción, Seleccionar automáticamente la primera opción, Mostrar la opción “Sin cobertura”
• Mostrar botón del modal de información
• Usar plantilla personalizada / Ocultar la marca Umbrella

Configuración del widget de estado del pedido

Muestra la información de la póliza de garantía en las páginas de confirmación y de estado del pedido.

• Habilitar widget de estado del pedido
• Ocultar botón de información / Ocultar botón de reclamo / Ocultar indicador de estado / Ocultar plazo de la garantía / Ocultar información del período de reclamo
• Usar plantilla personalizada / Ocultar la marca Umbrella

Configuración del modal de estado del pedido

Modal detallado con todos los datos de la póliza de garantía, accesible desde el widget de estado del pedido.

• Habilitar modal de estado del pedido
• Ocultar ID de póliza / Ocultar fecha de inicio / Ocultar fecha de fin / Ocultar botón Ver póliza / Ocultar botón Presentar reclamo
• Usar plantilla personalizada / Ocultar la marca Umbrella

Configuración de la tarjeta y el modal poscompra

Tarjeta poscompra — venta adicional de garantía en las páginas de estado del pedido para productos sin cobertura. Activa Habilitar widget poscompra.

Modal poscompra — modal de selección que se abre desde la tarjeta de venta adicional. Activa Habilitar modal poscompra.

Ambos admiten Usar plantilla personalizada y Ocultar la marca Umbrella.

Configuración del widget de Protección de envío

Oferta de Protección de envío en la página del carrito.

• Habilitar widget de Protección de envío
• Modo de visualización — Elección con botones (dos botones: agregar/rechazar) o Casilla (un solo interruptor)
• Opciones de Elección con botones: HTML personalizado del botón de pago (admite {{{total}}} y {{{price}}}) y Texto personalizado de “Continuar sin”
• Usar plantilla personalizada / Ocultar la marca Umbrella

Modal de Protección de envío — modal informativo con los detalles de la Protección de envío. Activa Habilitar modal de Protección de envío.

Editor de plantillas

Cada widget tiene su propia plantilla HTML y CSS. Accede a ella desde la pestaña Plantilla.

• Editor HTML — usa la sintaxis de Handlebars ({{variable}} para contenido escapado, {{{variable}}} para HTML sin procesar). Las variables disponibles aparecen en el panel de Instrucciones.
• Editor CSS — los estilos se aplican solo al widget seleccionado para evitar conflictos con tu tema.
• Panel de vista previa — renderizado en vivo con datos de ejemplo. Alterna el modo claro/oscuro, la cantidad de opciones, el estado seleccionado y los estados de vencimiento.

Haz clic en Restablecer predeterminado para restaurar la plantilla original si tus personalizaciones causan problemas.

Pestaña Idiomas

Administra los textos traducidos de cada widget para tiendas en varios idiomas. Puedes ver, agregar y editar las claves de traducción de cada idioma compatible.

Relacionado

• Configuración general — moneda y restricciones por país
• Notificaciones — alertas por correo para eventos de garantía
• Plantillas de correo electrónico — personaliza el diseño de los correos transaccionales