> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.omegatheme.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Display Shipping Protection on the Cart page

# Display Shipping Protection on the Cart page
How to configure the widget for your cart page. The editor has 3 tabs: **Settings**, **Appearance**, **Advanced setup**


![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_vgwobr.png)

## Tab 1: Settings

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_13a0rtk.png)

### Show widget on the cart page
Turn the widget on/off on your cart page. Click **Enable** to activate — the badge switches from **Off** to **On**.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_luuier.png)

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_ae81bo.png)

### Manual
A code snippet for inserting the widget into your theme manually. Choose one of three options:
* **App block** — Theme editor → Cart page/Drawer → **Add block** → **S:Shipping protection**. Recommended for Online Store 2.0 themes.
* **Embed app** — Theme editor → **App embeds** → enable **S:Shipping protection (embed app)**. Use when your theme doesn't support app blocks inside the cart.
* **Custom Liquid** — copy `<div class="ot-est-shipping-protection-default"></div>` and paste it into a Liquid template or Page Builder at the position where you want the widget to appear.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_qkdc4p.png)

### Pricing rules
Rules for calculating the protection fee added to the cart.
**Fee type:** how the fee is calculated.
* **Fixed amount** — flat fee per order.
* **Percentage** — fee = % of cart value.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_7yxod9.png)

When **Fixed amount** is selected:
* **Default fixed amount** — default fee when no tier matches.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1gbw855.png)

* **Use advanced pricing settings** — enable to charge by cart-value tiers. Each tier:
    * **Min cart value** — minimum cart value that matches the tier.
    * **Max cart value** — maximum cart value that matches the tier.
    * **Protection price** — fee applied to that tier.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_oud1n.png)

When **Percentage** is selected:
* `%` — fee rate over cart value.
* **Min charge** — minimum fee (even if the percentage produces a lower amount).
* **Max protection fee** — maximum fee, `0` = no limit.
* **Increment amount** — rounding step for the fee.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1ibsqr5.png)

* **Fee rounding** — rounding direction:
    * **Rounding up** — round up to the next Increment.
    * **Rounding down** — round down.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_10h94e8.png)

* **Conditional pricing** — enable to override the percentage fee with a fixed fee when cart value meets a `Price [>/</=] X` condition.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1ab4dxz.png)

### Protection rules
Fulfillment timing and scope rules.
**Protection fulfillment:** when Shopify marks the protection line item as fulfilled.
* **Immediately after purchase** — fulfill as soon as the order is created.
* **After first order item fulfilled** — wait until the first item ships.
* **After order fulfilled** — wait until the entire order is fulfilled.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_16httac.png)

**Product exclusions:** exclude products from protection (excluded items don't contribute to the cart value used to calculate the fee).
* **Product collection** — exclude by collection.
* **SKU** — exclude by specific SKU.
Click **Select** to choose the items to exclude.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_tf6mnf.png)

**Markets** (Standard+): which markets the protection applies to.
* **Enable for all markets** — applies to every customer.
* Uncheck → **Select** specific markets — only customers in those markets are charged.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_hb83l4.png)

## Tab 2: Appearance
### Widget layout
How the widget is displayed on the cart page.
* **Checkout button widget** — the cart page shows two buttons ("Protected checkout" and "Checkout without protection"); the customer picks one before going to checkout.
* **Standard widget** — an inline widget with a toggle/checkbox; the customer opts in directly on the cart.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_wzwyxi.png)

### If you choose Standard widget

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1n19o5s.png)

**Template:** a ready-made preset (icon + title + text). Click to apply:
* **Worry-free shipping** — shield icon, message about lost/damage/theft refunds.
* **On-time promise** — package-timer icon, message about return/refund guarantee.
Applying a template resets your text styling and button color. Pick the template first, then style.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1l1xh2.png)

**Display conditions:**
* **Widget icon** — the icon shown beside the widget. Choose **Specific collections**, **Product Tags**, **No icon**, or upload a **Custom icon** (≤5MB, SVG/GIF/JPG/PNG/JPEG).
* **Select button** — the opt-in control style:
    * **Switch type** — modern ON/OFF toggle.
    * **Checkbox selection** — traditional checkbox.
* **Button color** — color of the switch/checkbox when active (hex), default `#000000`.
* **Background color** — the widget card background, empty = transparent.
* **Border color** — the widget card outline, empty = transparent.
* **Border radius** — corner rounding, default `8` px.
* **Border width** — outline thickness, default `1` px.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_7l1gvj.png)


**Content:** the widget's text content.
* **Widget title** — main title (e.g., "Worry-free shipping").
* **Business text** — short description below the title.
* **Link text** — hyperlink text (e.g., "View refund policy"); leave empty for no link.
* **Link URL** — the URL the link points to (must include `https://`).

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1ulx9q6.png)

**Widget style**: two tabs so the title and body text are styled separately.
* **Title style** — applies to the Widget title.
* **Text style** — applies to the Business text.
Each has **Size**, **Color**, and **Emphasis**.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1qc8xaz.png)

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_y88k6s.png)

**Custom CSS**: paste raw CSS to override the default styling.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1dpotnb.png)

### If you choose Checkout button widget

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1app38v.png)

**Content** (each field max 50 characters):
* **Label title** — title text above the two buttons.
* **Description** — short description below the title.
* **Protection button text** — text for the "checkout with protection" button.
* **Standard checkout button text** — text for the "checkout without protection" button.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_188dodw.png)

**Button style**: two tabs — **Protected button** and **Standard button** — each with the same fields.

| Field | Protected button | Standard button |
| Font size | `14` px | `14` px |
| Text color | `#ffffff` | `#333333` |
| Font weight | Normal / Semibold / Bold | Normal / Semibold / Bold |
| Border width | `0` px | `0` px |
| Border radius | `0` px | `0` px |
| Border color | transparent | transparent |
| Button color | `#303030` | transparent |

Leave a field empty and it falls back to the placeholder value.


![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_qagsg5.png)

## Tab 3: Advanced setup
### Custom positioning
Specify where to inject the widget using CSS selectors — use this when the App block isn't placed correctly. For each cart type, enter:
* **Cart page** — selector for the dedicated cart page.
* **Cart popup** — selector for mini cart/popup.
* **Cart drawer** — selector for the cart drawer.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1rjabtz.png)

**Position:** where to inject relative to the target selector (maps to `Element.insertAdjacentHTML`):
* **Before begin** — insert before the element.
* **After begin** — insert at the start, inside the element.
* **Before end** — insert at the end, inside the element.
* **After end** — insert after the element.
This tab is hidden when Layout = Checkout button widget.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1inrd9m.png)

Click **Save** in the contextual bar when you're done.