Appearance & Widget Templates
Customize widget appearance, display modes, toggle visibility options, and manage HTML/CSS templates for every widget type.
Appearance & Widget Templates
Control how every Umbrella widget looks and behaves on your storefront. Select a widget type from the sidebar, then use three tabs to configure it:
- Settings — toggle features, choose display modes, control visibility
- Template — edit HTML and CSS using the code editor
- Languages — manage translation strings for multi-locale support
Widget Types
Product Page (PDP)
- PDP Widget — main warranty offer card on product pages
- PDP OEM Widget — manufacturer warranty information
- Selector Modal — popup for selecting warranty options
- Info Modal — popup showing warranty protection details
Cart
- Cart Protected — status card for items with warranty protection
- Cart Unprotected — upsell card for items without warranty protection
Order Status
- Order Status Widget — warranty details on order confirmation/status pages
- Order Status Modal — detailed warranty modal from the order status page
Post-Purchase
- Post-Purchase Card — warranty upsell on order status pages for uncovered products
- Post-Purchase Modal — selection modal for post-purchase upsells
Shipping Protection
- Shipping Protection Widget — shipping protection offer on the cart page
- Shipping Protection Modal — info modal for shipping protection details
PDP Widget Settings
The primary warranty offer on product detail pages. Toggle Enable PDP Card to show or hide it.
Display Mode
| Mode | Description |
|---|---|
| Inline | Warranty options appear directly on the page as selectable cards |
| Modal | A button/banner opens a modal with warranty options |
| Individual | Each warranty option renders as its own standalone card |
Inline-Only Options
- Must Choose Option — require customers to select a warranty option before adding to cart
- Auto-Select First Option — pre-select the first plan (customers can change or opt out)
- Show “No Coverage” Option — display a “No thanks” option to explicitly decline
Additional Options
- Open Modal on Add to Cart — if no warranty is selected, show a modal before the item is added
- Custom Injection Selector — CSS selector to control where the widget is placed on your page
- Custom Injection Position — Outside Above, Inside Top, Inside Bottom, or Outside Below
- Use Custom Template — use your own HTML/CSS instead of the default design
- Hide Umbrella Branding — remove the “Powered by Umbrella” footer
PDP OEM Widget Settings
Displays manufacturer (OEM) warranty information on product pages, separate from extended warranty offers.
- Enable OEM Widget — show/hide the OEM widget
- Hide Coverage Details — hide the detailed coverage description
- Hide Warranty Duration — hide the warranty term display
- Use Custom Template / Hide Umbrella Branding
Selector Modal Settings
Popup that displays warranty options. Triggered from the PDP widget, cart, or on add-to-cart.
- Enable Selector Modal
- Display Mode — Inline (selectable cards) or Individual (standalone cards)
- Must Choose Option — require selection before closing
- Auto-Select First Option — pre-select the first option (Inline mode only)
- Use Custom Template / Hide Umbrella Branding
Info Modal Settings
Shows detailed warranty protection information when customers click the info/details button.
- Enable Info Modal
- Use Custom Template / Hide Umbrella Branding
Cart Protected Widget Settings
Appears on cart items that already have warranty protection.
- Enable Protected Cart Card
- Show Info Modal Button — let customers view warranty details
- Show Remove Protection Button — let customers remove warranty protection
- Hide Extended Warranty Line Item in Cart — show warranty details only within the product card
- Hide Extended Warranty Line Item Price Tier — hide price tier on the warranty line item
- Hide Extended Warranty Line Item Details — hide detailed warranty info on the line item
- Add to Protected Line Item Total — combine warranty price with the product’s displayed total
- Disable Warranty Line Item Interactions — prevent quantity changes on the warranty line item
- Use Custom Template / Hide Umbrella Branding
Cart Unprotected Widget Settings
Appears on cart items without warranty protection, offering customers a chance to add coverage.
- Enable Unprotected Cart Card
- Display Mode — Modal, Inline, or Individual
- Inline-only: Must Choose Option, Auto-Select First Option, Show “No Coverage” Option
- Show Info Modal Button
- Use Custom Template / Hide Umbrella Branding
Order Status Widget Settings
Displays warranty policy information on order confirmation and status pages.
- Enable Order Status Widget
- Hide Info Button / Hide Claim Button / Hide Status Indicator / Hide Warranty Term / Hide Claim Window Info
- Use Custom Template / Hide Umbrella Branding
Order Status Modal Settings
Detailed modal showing full warranty policy details, accessible from the order status widget.
- Enable Order Status Modal
- Hide Policy ID / Hide Start Date / Hide End Date / Hide View Policy Button / Hide File Claim Button
- Use Custom Template / Hide Umbrella Branding
Post-Purchase Card & Modal Settings
Post-Purchase Card — warranty upsell on order status pages for uncovered products. Toggle Enable Post-Purchase Widget.
Post-Purchase Modal — selection modal that opens from the upsell card. Toggle Enable Post-Purchase Modal.
Both support Use Custom Template and Hide Umbrella Branding.
Shipping Protection Widget Settings
Shipping protection offer on the cart page.
- Enable Shipping Protection Widget
- Display Mode — Button Choice (two buttons: add/decline) or Checkbox (single toggle)
- Button Choice options: Custom Checkout Button HTML (supports
{{{total}}}and{{{price}}}) and Custom “Continue Without” Text - Use Custom Template / Hide Umbrella Branding
Shipping Protection Modal — info modal for shipping protection details. Toggle Enable Shipping Protection Modal.
Template Editor
Each widget has its own HTML and CSS template. Access it via the Template tab.
- HTML editor — uses Handlebars syntax (
{{variable}}for escaped,{{{variable}}}for raw HTML). Available variables are listed in the Instructions panel. - CSS editor — styles scoped to the selected widget to prevent conflicts with your theme.
- Preview panel — live rendering with mock data. Toggle light/dark mode, option count, selected state, and expiration states.
Click Reset to Default to restore the original template if your customizations cause issues.
Languages Tab
Manage translation strings for each widget to support multi-language stores. You can view, add, and edit translation keys for each supported locale.
Related
- General Settings — currency and country restrictions
- Notifications — email alerts for warranty events
- Email Templates — customize transactional email designs