Plantillas de widgets

Sistema de plantillas de widgets

El sistema de plantillas te da control total sobre cómo se muestran en tu tienda online las opciones de garantía, los artículos del carrito, la información del estado del pedido y la Protección de envío. Cada uno de los 12 tipos de widget puede tener una plantilla HTML personalizada con variables al estilo de Handlebars y atributos de datos para la interactividad.

---

Administrador de plantillas

Accede al administrador de plantillas en Panel → Widgets → Plantillas. Incluye un editor de código Monaco con resaltado de sintaxis y autocompletado, un panel de vista previa y la documentación de las variables disponibles para cada tipo de widget.

---

Referencia de atributos de datos

Los atributos de datos conectan los elementos de la plantilla con el JavaScript del widget de Umbrella.

Disparador de modal

Atributo	Descripción
data-umbrella-modal-trigger	Abre un modal al hacer clic. Valor: "selector" o "info".
data-umbrella-modal-close-btn	Cierra el modal al hacer clic.

Selección de opciones de garantía

Atributo	Descripción
data-umbrella-options	Obligatorio. Contenedor de los selectores de opciones.
data-umbrella-option	Obligatorio. Marca una opción seleccionable individual.
data-umbrella-option-price	Muestra el precio de la opción (se actualiza al cambiar de variante).
data-umbrella-selected-state	Cambia la visibilidad según el estado de selección.
data-umbrella-selected-warranty-title	Muestra el título de la garantía seleccionada.
data-umbrella-selected-warranty-price	Muestra el precio de la garantía seleccionada. Usa "rounded" o "withCents".

Acciones del carrito

Atributo	Descripción
data-umbrella-add-to-cart-btn	Obligatorio en modales y carrito. Agrega la garantía seleccionada al carrito.
data-umbrella-decline-btn	Obligatorio en modales y carrito. Rechaza la garantía.

Protección de envío

Atributo	Descripción
data-umbrella-shipping-protection-checkbox	Obligatorio. Casilla para activar la Protección de envío.
data-umbrella-shipping-protection-checkbox-label	Obligatorio. Etiqueta de la casilla.

Secciones desplegables

Atributo	Descripción
data-umbrella-expandable-section	Contenedor de la sección desplegable.
data-umbrella-expandable-content	Contenido que se muestra u oculta.
data-umbrella-expandable-toggle	Botón que muestra u oculta el contenido.

Acordeón

Atributo	Descripción
data-umbrella-collapsible-accordion	Contenedor del acordeón.
data-umbrella-collapsible-item	Elemento individual del acordeón.
data-umbrella-collapsible-button	Botón para desplegar el elemento.
data-umbrella-collapsible-content	Área de contenido del elemento.

Menú desplegable

Atributo	Descripción
data-umbrella-dropdown-menu	Contenedor del menú desplegable.
data-umbrella-dropdown-toggle	Abre o cierra el menú desplegable.
data-umbrella-dropdown-content	Panel de contenido del menú desplegable.
data-umbrella-dropdown-option-value	Valor de cada opción del menú desplegable.
data-umbrella-dropdown-selected-value	Muestra el valor seleccionado.
data-umbrella-dropdown-unselected-placeholder	Texto de marcador cuando no hay nada seleccionado.

---

Referencia de variables de plantilla

Las variables usan la sintaxis de Handlebars: {{variable}} para texto y {{{variable}}} para contenido HTML seguro (precios).

Producto

{{productImage}}, {{productName}}, {{productType}}, {{productHandle}}, {{productId}}, {{productQuantity}}, {{{productPrice}}}

Variante seleccionada

{{selectedVariantId}}, {{selectedVariantTitle}}, {{{selectedVariantPrice}}}

Garantía

{{warrantyId}}, {{warrantyTitle}}, {{{warrantyDescription}}}, {{warrantyImage}}, {{warrantyProductHandle}}, {{warrantyProductUrl}}

Bucle de opciones ({{#each options}})

{{serviceLevel}}, {{term}}, {{title}}, {{{description}}}, {{imageUrl}}, {{isNoCoverageOption}}, {{{priceRounded}}}, {{{priceWithCents}}}, {{{totalPrice}}}, {{variantId}}

Garantía seleccionada (carrito)

{{warrantyTerm}}, {{warrantyServiceLevel}}, {{{warrantyPrice}}}, {{{warrantyPriceRounded}}}, {{warrantyTermDisplay}}, {{warrantyVariantId}}

Indicadores del modo de visualización

{{isInlineMode}}, {{isIndividualMode}}, {{isModalMode}}, {{{cheapestPrice}}}, {{{cheapestPriceRounded}}}

Contexto de la línea del pedido

{{isProtectedProductLineItem}}, {{isWarrantyLineItem}}

Precios del carrito

{{isMultipleQuantity}}, {{{warrantySingleLineItemPrice}}}, {{{warrantyTotalLineItemPrice}}} (además de sus variantes rounded y withCents)

Indicadores de cobertura

{{isEligible}}, {{coversManufacturerDefect}}, {{coversAccidentalDamage}}, {{coversWearAndTear}}, {{coversSpillOrStain}}, {{coversLostOrStolen}}

Póliza (estado del pedido)

{{policyId}}, {{policyNumber}}, {{policyStatus}}, {{policyStartDate}}, {{policyEndDate}}, {{isActive}}, {{claimWindowOpen}}, {{daysRemaining}}, {{orderName}}, {{fileClaimUrl}}

---

Variables disponibles por tipo de widget

Tipo de widget	Producto	Variante	Garantía	Opciones	Cobertura	Modo de visualización	Línea	Carrito	Póliza
pdp_widget	Sí	Sí	Sí	Sí	Sí	Sí	—	—	—
selector_modal	Sí	Sí	Sí	Sí	Sí	Parcial	—	—	—
info_modal	Sí	Sí	Sí	—	Sí	—	—	—	—
cart_protected	Sí	Sí	Sí	—	Sí	—	Sí	Sí	—
cart_unprotected	Sí	Sí	Sí	Sí	Sí	Sí	—	Sí	—
order_status	—	—	Sí	—	Sí	—	—	—	Sí
order_status_modal	—	—	Sí	—	Sí	—	—	—	Sí
order_status_post_purchase	—	—	Sí	Sí	Sí	—	—	—	—
order_status_post_purchase_modal	—	—	Sí	Sí	Sí	—	—	—	—
shipping_protection	—	—	Sí	—	Sí	—	—	—	—
shipping_protection_modal	—	—	Sí	—	Sí	—	—	—	—

---

Consejos

• Usa llaves triples {{{price}}} para los precios, de modo que las entidades HTML se muestren correctamente
• Incluye siempre data-umbrella-options y data-umbrella-option para que funcione la selección de opciones
• Prueba con distintas variantes de producto para verificar que los precios se actualicen
• Usa {{#if isInlineMode}} para diseños específicos de cada modo de visualización
• Incluye data-umbrella-modal-close-btn en los modales

---

Relacionado

• Configuración de widgets — Comportamiento y opciones de visualización de los widgets
• Extensión de tema de Shopify — Widget de PDP mediante la incrustación en el tema
• Extensiones de checkout de Shopify — Configuración de la extensión de checkout
• Extensiones de pedidos de Shopify — Visualización del widget de estado del pedido