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

Tab 1: Settings

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.

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.

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.

When Fixed amount is selected:

• Default fixed amount — default fee when no tier matches.

• 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.

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.

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

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

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.

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.

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.

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.

If you choose Standard widget

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.

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.

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://).

Text style: style for the Business text — Text size, Text appearance, Text emphasis.

Widget style: style for the Widget title — Title size, Title appearance, Title emphasis.

Custom CSS (Standard+): paste raw CSS to override the default styling.

If you choose Checkout button widget

Only the Content card appears (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.

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.

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.

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

Updated on: 13/05/2026