Widget Templates

Widget Template System

The template system gives you full control over how warranty options, cart items, order status displays, and shipping protection render on your storefront. Each of the 12 widget types can have a custom HTML template using Handlebars-style variables and data attributes for interactivity.

---

Template Manager

Access the template manager at Dashboard → Widgets → Templates. It provides a Monaco code editor with syntax highlighting and autocompletion, a preview panel, and documentation of available variables per widget type.

---

Data Attributes Reference

Data attributes connect template elements to the Umbrella widget JavaScript.

Modal Trigger

Attribute	Description
data-umbrella-modal-trigger	Opens a modal on click. Value: "selector" or "info".
data-umbrella-modal-close-btn	Closes the modal on click.

Warranty Option Selection

Attribute	Description
data-umbrella-options	Required. Container for option selectors.
data-umbrella-option	Required. Marks an individual selectable option.
data-umbrella-option-price	Displays option price (updates on variant change).
data-umbrella-selected-state	Changes visibility based on selection state.
data-umbrella-selected-warranty-title	Shows selected warranty title.
data-umbrella-selected-warranty-price	Shows selected warranty price. Use "rounded" or "withCents".

Cart Actions

Attribute	Description
data-umbrella-add-to-cart-btn	Required in modals/cart. Adds selected warranty to cart.
data-umbrella-decline-btn	Required in modals/cart. Declines warranty.

Shipping Protection

Attribute	Description
data-umbrella-shipping-protection-checkbox	Required. Checkbox for enabling shipping protection.
data-umbrella-shipping-protection-checkbox-label	Required. Label for the checkbox.

Expandable Sections

Attribute	Description
data-umbrella-expandable-section	Container for expandable section.
data-umbrella-expandable-content	Content that shows/hides.
data-umbrella-expandable-toggle	Button that toggles content.

Accordion

Attribute	Description
data-umbrella-collapsible-accordion	Accordion container.
data-umbrella-collapsible-item	Individual accordion item.
data-umbrella-collapsible-button	Toggle button for item.
data-umbrella-collapsible-content	Content area of item.

Dropdown Menu

Attribute	Description
data-umbrella-dropdown-menu	Dropdown container.
data-umbrella-dropdown-toggle	Opens/closes dropdown.
data-umbrella-dropdown-content	Dropdown content panel.
data-umbrella-dropdown-option-value	Value of each dropdown option.
data-umbrella-dropdown-selected-value	Displays the selected value.
data-umbrella-dropdown-unselected-placeholder	Placeholder when nothing is selected.

---

Template Variables Reference

Variables use Handlebars syntax: {{variable}} for text, {{{variable}}} for HTML-safe content (prices).

Product

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

Selected Variant

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

Warranty

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

Options Loop ({{#each options}})

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

Selected Warranty (Cart)

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

Display Mode Flags

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

Line Item Context

{{isProtectedProductLineItem}}, {{isWarrantyLineItem}}

Cart Pricing

{{isMultipleQuantity}}, {{{warrantySingleLineItemPrice}}}, {{{warrantyTotalLineItemPrice}}} (plus rounded and withCents variants)

Coverage Flags

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

Policy (Order Status)

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

---

Variables Available Per Widget Type

Widget Type	Product	Variant	Warranty	Options	Coverage	Display Mode	Line Item	Cart	Policy
pdp_widget	Yes	Yes	Yes	Yes	Yes	Yes	—	—	—
selector_modal	Yes	Yes	Yes	Yes	Yes	Partial	—	—	—
info_modal	Yes	Yes	Yes	—	Yes	—	—	—	—
cart_protected	Yes	Yes	Yes	—	Yes	—	Yes	Yes	—
cart_unprotected	Yes	Yes	Yes	Yes	Yes	Yes	—	Yes	—
order_status	—	—	Yes	—	Yes	—	—	—	Yes
order_status_modal	—	—	Yes	—	Yes	—	—	—	Yes
order_status_post_purchase	—	—	Yes	Yes	Yes	—	—	—	—
order_status_post_purchase_modal	—	—	Yes	Yes	Yes	—	—	—	—
shipping_protection	—	—	Yes	—	Yes	—	—	—	—
shipping_protection_modal	—	—	Yes	—	Yes	—	—	—	—

---

Tips

• Use triple braces {{{price}}} for prices to render HTML entities correctly
• Always include data-umbrella-options and data-umbrella-option for option selection to work
• Test with different product variants to verify price updates
• Use {{#if isInlineMode}} for display-mode-specific layouts
• Include data-umbrella-modal-close-btn in modals

---

Related

• Widget Configuration — Widget behavior and display options
• Shopify Theme Extension — PDP widget via theme embed
• Shopify Checkout Extensions — Checkout extension settings
• Shopify Order Extensions — Order status widget display