Widget Configuration

Widget Configuration Overview

Umbrella provides 12 widget types that control how warranty options appear across your storefront, cart, checkout, and order status pages. Each has its own template and configuration options.

---

Widget Types

Widget Type	Key	Context
PDP Widget	pdp_widget	Product page warranty selector
Selector Modal	selector_modal	Warranty option selection modal
Info Modal	info_modal	Warranty information modal
Cart Protected	cart_protected	Cart line item with warranty
Cart Unprotected	cart_unprotected	Cart line item without warranty (upsell)
PDP OEM Widget	pdp_oem_widget	OEM warranty display on product page
Order Status	order_status	Warranty info on order status page
Order Status Modal	order_status_modal	Warranty details modal on order status
Order Status Post Purchase	order_status_post_purchase	Post-purchase upsell on order status
Order Status Post Purchase Modal	order_status_post_purchase_modal	Post-purchase warranty selection modal
Shipping Protection	shipping_protection	Shipping protection in cart
Shipping Protection Modal	shipping_protection_modal	Shipping protection details modal

---

Display Modes

Extended Warranty

Mode	Description
inline	Shows all warranty options directly on the page
modal	Shows a summary; clicking opens a modal with full options
individual	Each option has its own add-to-cart button

Shipping Protection

Mode	Description
checkbox	Simple checkbox toggle
button-choice	Button-style selection

---

PDP Options

• Display Mode — inline, modal, or individual
• Must Choose Option — require a warranty decision before adding to cart
• Auto Select First — pre-select the first warranty option on load
• Modal on Add to Cart — open warranty selector when Add to Cart is clicked
• Show No Coverage Option — display an explicit “Decline” option

Custom Injection

• Custom Inject Above Selector — HTML content above the warranty selector
• Custom Injection Selector — CSS selector for where to place the widget
• Custom Injection Position — outside-above, inside-top, inside-bottom, or outside-below

---

Cart Options

• Hide Info Button — hide the warranty details button
• Hide Remove Button — hide the remove-warranty button
• Hide Extended Warranty Line Item in Cart — hide the warranty row (still in cart, just not visible)
• Hide Extended Warranty Line Item Price Tier — hide price tier info
• Hide Extended Warranty Line Item Details — hide term and service level
• Add to Protected Line Item Total — merge warranty price into the product total
• Disable Warranty Line Item Interactions — prevent clicking on warranty items
• Hide Coverage Details — hide what-is-covered info
• Hide Warranty Term — hide duration
• Hide Umbrella Branding — remove Umbrella logo
• Use Custom Template — use a custom HTML template (see Widget Templates)

---

Order Status Options

• Hide Claim Button — hide “File a Claim”
• Hide Status Indicator — hide Active/Expired/Pending indicator
• Hide Claim Window Info — hide claim window details

---

Order Status Modal Options

• Hide Policy ID — hide policy ID number
• Hide Start Date / Hide End Date — hide coverage dates
• Hide Claim Window — hide claim window info
• Hide View Policy Button — hide link to full policy details
• Hide File Claim Button — hide the claim filing button

---

Shipping Protection Options

• Display Mode — checkbox or button-choice
• Checkout Button HTML — custom HTML for the selection button
• Continue Without Text — text for the decline option (e.g., “No thanks”)

---

Localization

Add translations for widget text using a nested locale object:

{
  "translations": {
    "fr": {
      "addProtection": "Ajouter la protection",
      "fileAClaim": "Deposer une reclamation"
    }
  }
}

---

Related

• Widget Templates — Custom HTML templates and data attributes
• Shopify Theme Extension — PDP widget via theme embed
• Shopify Checkout Extensions — Checkout widget settings
• Shopify Order Extensions — Order status widget display