Modelos de widget

Sistema de modelos de widget

O sistema de modelos dá a você controle total sobre como as opções de garantia, os itens do carrinho, as telas de status do pedido e a proteção de envio são exibidos na sua loja virtual. Cada um dos 12 tipos de widget pode ter um modelo HTML personalizado, com variáveis no estilo Handlebars e atributos de dados para interatividade.

---

Gerenciador de modelos

Acesse o gerenciador de modelos em Painel → Widgets → Modelos. Ele oferece um editor de código Monaco com realce de sintaxe e preenchimento automático, um painel de pré-visualização e a documentação das variáveis disponíveis para cada tipo de widget.

---

Referência de atributos de dados

Os atributos de dados conectam os elementos do modelo ao JavaScript do widget Umbrella.

Acionador de modal

Atributo	Descrição
data-umbrella-modal-trigger	Abre um modal ao clicar. Valor: "selector" ou "info".
data-umbrella-modal-close-btn	Fecha o modal ao clicar.

Seleção de opção de garantia

Atributo	Descrição
data-umbrella-options	Obrigatório. Contêiner dos seletores de opção.
data-umbrella-option	Obrigatório. Marca uma opção selecionável individual.
data-umbrella-option-price	Exibe o preço da opção (atualiza quando a variante muda).
data-umbrella-selected-state	Altera a visibilidade conforme o estado de seleção.
data-umbrella-selected-warranty-title	Mostra o título da garantia selecionada.
data-umbrella-selected-warranty-price	Mostra o preço da garantia selecionada. Use "rounded" ou "withCents".

Ações do carrinho

Atributo	Descrição
data-umbrella-add-to-cart-btn	Obrigatório em modais/carrinho. Adiciona a garantia selecionada ao carrinho.
data-umbrella-decline-btn	Obrigatório em modais/carrinho. Recusa a garantia.

Proteção de envio

Atributo	Descrição
data-umbrella-shipping-protection-checkbox	Obrigatório. Caixa de seleção para ativar a proteção de envio.
data-umbrella-shipping-protection-checkbox-label	Obrigatório. Rótulo da caixa de seleção.

Seções expansíveis

Atributo	Descrição
data-umbrella-expandable-section	Contêiner da seção expansível.
data-umbrella-expandable-content	Conteúdo que é mostrado/ocultado.
data-umbrella-expandable-toggle	Botão que alterna o conteúdo.

Acordeão

Atributo	Descrição
data-umbrella-collapsible-accordion	Contêiner do acordeão.
data-umbrella-collapsible-item	Item individual do acordeão.
data-umbrella-collapsible-button	Botão que alterna o item.
data-umbrella-collapsible-content	Área de conteúdo do item.

Menu suspenso

Atributo	Descrição
data-umbrella-dropdown-menu	Contêiner do menu suspenso.
data-umbrella-dropdown-toggle	Abre/fecha o menu suspenso.
data-umbrella-dropdown-content	Painel de conteúdo do menu suspenso.
data-umbrella-dropdown-option-value	Valor de cada opção do menu suspenso.
data-umbrella-dropdown-selected-value	Exibe o valor selecionado.
data-umbrella-dropdown-unselected-placeholder	Texto de espaço reservado quando nada está selecionado.

---

Referência de variáveis de modelo

As variáveis usam a sintaxe Handlebars: {{variable}} para texto e {{{variable}}} para conteúdo com HTML seguro (preços).

Produto

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

Variante selecionada

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

Garantia

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

Loop de opções ({{#each options}})

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

Garantia selecionada (carrinho)

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

Indicadores de modo de exibição

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

Contexto do item de linha

{{isProtectedProductLineItem}}, {{isWarrantyLineItem}}

Preços do carrinho

{{isMultipleQuantity}}, {{{warrantySingleLineItemPrice}}}, {{{warrantyTotalLineItemPrice}}} (além das variantes rounded e withCents)

Indicadores de cobertura

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

Apólice (status do pedido)

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

---

Variáveis disponíveis por tipo de widget

Tipo de widget	Produto	Variante	Garantia	Opções	Cobertura	Modo de exibição	Item de linha	Carrinho	Apólice
pdp_widget	Sim	Sim	Sim	Sim	Sim	Sim	—	—	—
selector_modal	Sim	Sim	Sim	Sim	Sim	Parcial	—	—	—
info_modal	Sim	Sim	Sim	—	Sim	—	—	—	—
cart_protected	Sim	Sim	Sim	—	Sim	—	Sim	Sim	—
cart_unprotected	Sim	Sim	Sim	Sim	Sim	Sim	—	Sim	—
order_status	—	—	Sim	—	Sim	—	—	—	Sim
order_status_modal	—	—	Sim	—	Sim	—	—	—	Sim
order_status_post_purchase	—	—	Sim	Sim	Sim	—	—	—	—
order_status_post_purchase_modal	—	—	Sim	Sim	Sim	—	—	—	—
shipping_protection	—	—	Sim	—	Sim	—	—	—	—
shipping_protection_modal	—	—	Sim	—	Sim	—	—	—	—

---

Dicas

• Use chaves triplas {{{price}}} nos preços para que as entidades HTML sejam renderizadas corretamente
• Sempre inclua data-umbrella-options e data-umbrella-option para que a seleção de opções funcione
• Teste com diferentes variantes de produto para verificar se os preços são atualizados
• Use {{#if isInlineMode}} para layouts específicos de cada modo de exibição
• Inclua data-umbrella-modal-close-btn nos modais

---

Relacionados

• Configuração de widgets — Comportamento e opções de exibição dos widgets
• Extensão de tema da Shopify — Widget de PDP via incorporação no tema
• Extensões de checkout da Shopify — Configurações da extensão de checkout
• Extensões de pedido da Shopify — Exibição do widget de status do pedido