Insurance Widget

Display the Shipping Protection widget on your store's frontend

If you want to customize the widget, please contact us at this link.

Step 1: Enable the App Embed

• Go to your Shopify admin panel.

• Navigate to Online Store > Themes.

• Click on the Customize button for your current theme.

• In the "App Embeds" tab, enable "Sam Shipping Protect" and click Save

enable the app embed

Step 2: Set up your first insurance plan with either a fixed fee or a percentage-based rate.

• Insurance Pricing: Adjust the insurance cost. Pricing can be fixed or calculated as a percentage of the cart total, with an optional minimum/maximum price cap for percentage-based plans.

• Auto fulfillment

  
• Exclusions: Configure products excluded from insurance calculations (applicable only for percentage-based pricing).

  
• Content: Edit the widget content, including text and visuals

  
• Customized widget design: Set up the insurance icon and customize widget styles and appearance.

  

_{Select or upload a widget icon}

_{Customize widget position}

_{Customize widget style}

• Widget Preview: View how the widget will appear on the cart page or cart drawer.

  

New appearance options: the widget editor now also includes several settings not pictured above — we'll add screenshots soon. In the meantime, here's what's available:

• Layout: choose from 4 layout templates for the widget card (2 of them require a Standard or Plus plan).

• Typography & price position: control font size/weight, the checkout button text, spacing, and where the price is displayed on the widget.

• Custom style: set border size/radius, background color, and — for advanced users — inject your own custom CSS.

Where Protection Can Appear

This section is new — a full step-by-step guide for the checkout and thank-you surfaces is coming soon. In the meantime, here's an overview.

The Widget Config page now has three collapsible sections, each controlling where the protection offer shows up:

• Cart Widget — the app-embed widget covered above, shown on the cart page and cart drawer.

• Checkout Page Widget — a Shopify Checkout UI Extension that offers protection during checkout.

• Thank You Page Widget — a post-purchase offer shown on the order confirmation page after checkout. Since the order is already paid at that point, accepting the offer edits the order to add the protection line item, and the customer completes the extra payment on Shopify's hosted payment page.

The Thank You Page Widget requires the store to grant the app the "Edit orders" permission. If this permission hasn't been granted, customers who try to accept the post-purchase offer will see the error "This store hasn't granted permission to edit orders." If you enable this surface and it doesn't work, check your app's permissions in Shopify Admin and re-approve if prompted.

Each section shows an Active/Inactive status badge so you can quickly see which surfaces are currently turned on.

Step 3: View the Shipping Protection Widget

Once the app embed is enabled and your insurance plans are set up, the Shipping Protection widget will appear on your store's frontend. This widget will be visible when an order matches the conditions of the created insurance plans.

• Check Your Storefront: Navigate to your store's frontend and place an order that meets the criteria of your insurance plan.

• See the Widget: The Shipping Protection widget should now be visible on the cart page and cart drawer, showing relevant insurance options.