Widget Customization

Widgets are the UI components that present Order Protection to your customers at the cart and checkout. You can customize their appearance, content, and behavior to seamlessly match your store’s look and feel.

Cart and checkout widget configurations are pre-determined in partnership with the Order Protection development team. Your team will work together with OP to set up the initial widget configuration for your store.

Widgets landing page showing cart and checkout widgets

OrderProtection.com supports two primary widget types:

Type	Description
Cart	Appears on the shopping cart page. Uses a web component that can be embedded anywhere on your site.
Checkout	Appears on the checkout page. Configured for the Shopify checkout experience.

You can manage all of your widgets from the Customizations > Widgets tab. Use the All, Active, and Draft tabs to filter widgets by status. Click Edit on any widget card to open the editor. The editor uses a split-screen layout: the Customizer sidebar on the left and a live widget preview on the right.

Checkout widget editor with Customizer sidebar and live preview

The Customizer tab for checkout widgets includes:

Widget Name: A descriptive name for internal identification (e.g., “Checkout #06”).
Widget Title Style: Choose between:
- Logo — Display your store’s logo or the Order Protection logo.
- Label — Use a custom text title with typography controls:
  - Title text
  - Label Weight (Bold / Regular)
  - Label Size (inherits Shopify styles)
Information Modal: Toggle to show a “What’s this?” link that opens an informational overlay. See Info Modals to configure these.

Admin Settings (checkout widgets)

Below the Customizer options, checkout widgets have an Admin Settings section that controls where and when the widget is allowed to appear. Most of these should be left at their defaults — the geography settings are the ones that matter if you ship internationally.

Admin Settings section of the checkout widget editor

Several of these settings don’t just hide the widget — if Order Protection has already been added to the cart, they remove it. Only the payment-method rule shows the customer an explanation when that happens.

Three settings work together to control geography, and the order they’re evaluated in matters.

Setting	What it does	Recommended
Domestic Order Coverage Only	Limits the widget to United States shipping addresses. “Domestic” always means the US — it isn’t based on your store’s own country.	Yes only if you don’t expect international orders, or don’t want Order Protection offered outside the US. Otherwise No.
Allowed International Countries	A comma-separated list of ISO-2 country codes that are allowed in addition to the US.	Use this when Domestic Order Coverage Only is Yes and you want to allow a targeted set of countries.
Exclude UK IP Addresses	Blocks the widget for customers in the United Kingdom.	No — handle the UK through Opt-in Countries instead (see below).

Allowed International Countries only takes effect when Domestic Order Coverage Only is set to Yes. With Domestic Order Coverage Only set to No, every country is already allowed and the list is ignored entirely. Think of the pairing as “US only, plus these” — not as a filter applied to worldwide selling.

Use GB for the United Kingdom, not UK. The example text shown in the field reads UK, SE, CA, BR, but UK is not a valid ISO-2 country code — Shopify sends GB. An entry of UK will silently never match.

Selling to the UK

Leave Exclude UK IP Addresses set to No. Setting it to Yes blocks UK customers outright, and it’s applied before the allowed-countries list — so adding GB to Allowed International Countries will not override it. Instead, control the UK from Settings → Policies, in the Widget block, using Opt-in Countries. The UK is included there by default, which presents Order Protection to UK customers as an opt-in choice rather than auto-adding it.

See Policies → Widget for the rest of the opt-in and auto-add settings.

Display and behavior

Setting	What it does	Recommended
CE Only	Tells the checkout extension that checkout is the only place Order Protection is offered, so it takes responsibility for adding protection to the cart itself.	No if you have a cart widget published — or plan to. Setting it to Yes alongside a cart widget causes the two to compete.
Show Brand Funded Widget	Controls whether the widget still displays on orders where you fund protection rather than the customer. When shown, the customer sees your chosen text — “Free” by default — instead of a price and toggle.	Yes. This has no effect on customer-funded widgets.
Reverse Layout	Flips the widget’s layout so the toggle and price sit on the left and the title on the right.	Cosmetic — set to taste.
Background Appearance	The widget’s background: Transparent, Base, or Subdued. Base and Subdued also add interior padding around the widget.	Transparent unless you want the widget visually separated from the surrounding checkout.
Hide Logo	Removes the Order Protection logo from the widget; the title expands into the freed space.	Set to taste.
Enable Debug Mode	Writes detailed diagnostic logging to the browser console. It changes no behavior.	Off. It logs to real customers’ browser consoles, including cart internals. Turn it on to troubleshoot, then turn it back off.

Checkout eligibility

Setting	What it does	Recommended
Show Hidden Shipping Method Logic	Set to Yes to reveal a text field, then enter a delivery option to block. When the customer selects a delivery option whose name matches, Order Protection is hidden and removed. Most often used to keep protection off in-store pickup options.	No unless you have a delivery option that shouldn’t be protected.
Suppress Selling Plan Carts	Hides Order Protection in checkout whenever any item in the cart is a subscription.	No unless you specifically don’t want protection on subscription orders.
Suppressed Payment Handles	One payment method per line. If the customer picks one of these, Order Protection is removed and won’t come back for the rest of that checkout, even if they switch payment methods again. Typically used for pay-over-time providers whose approval breaks when the order total changes.	Leave empty unless a payment method is causing problems.
Payment Removal Message	The message shown to the customer after a suppressed payment method removes Order Protection.	Leave the default unless you want different wording.

Payment handles aren’t a fixed list — the exact value can differ per store. To find the right one, turn Enable Debug Mode on, run a test checkout, select the payment method, and read the handle from the browser console. Then turn debug mode back off.

The delivery option entered under Show Hidden Shipping Method Logic must match the option’s name exactly — it’s a whole-value match, not a partial one, though capitalization doesn’t matter. Entering pickup will not match a delivery option named Pickup at My Store.

Cart widget editor with Customizer sidebar and live preview

Cart widgets include the same title configuration options plus additional styling controls:

Label Size: Set the font size in pixels.
Label Color: Choose a custom color via the color picker.
Label Font: Select from available fonts or upload a custom WOFF font file.

Advanced Configuration

For cart widgets only, the Advanced Config tab provides a JSON editor for direct manipulation of the full widget configuration. Import your config by pasting it into the editor, or click Open Full Screen for an expanded editing view.

Advanced Config tab with JSON editor for cart widgets

Advanced configuration is only intended for cart widget setups. Shopify merchants should not use the Advanced Config tab for checkout widgets — use the Customizer tab instead.

After publishing your widget, click Get Code to view the embed code for your store. The modal provides:

Config JSON — Your widget’s configuration object.
JavaScript — A <script> tag to include in your site’s index file.
HTML — The <order-protection> web component tag to place wherever you want the widget to appear.

Use the Copy Code buttons to copy each snippet to your clipboard.

Get Code modal showing Config JSON, JavaScript, and HTML snippets

Code scripts are also available if you’re modifying cart or checkout themes directly via a code repository.

Publishing and Drafts

Action	Description
Save & Draft	Saves your changes as a draft. The widget will not be visible to customers.
Publish	Pushes your widget live. Customers will see the updated widget immediately.
Republish	Available after making changes to a published widget. Pushes updates live.

You can manage multiple widgets (e.g., different designs for cart vs. checkout) and switch between Active and Draft statuses at any time.

Intro

Platforms

Integrations

Guides

Education Basecamp

Widget Types

Editing a Widget