> ## Documentation Index
> Fetch the complete documentation index at: https://docs.orderprotection.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Widget Customization
> Create and customize cart and checkout widgets to match your store's brand and checkout experience.
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.
## Widget Types
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.
## Editing a Widget
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 Configuration
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](/education-basecamp/customizations/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.
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.
#### Where the widget can appear
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](/education-basecamp/settings/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 Configuration
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 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.
## Getting the Widget Code
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 `