> For the complete documentation index, see [llms.txt](https://shipping-protection-app.shop-wil.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shipping-protection-app.shop-wil.com/app-installation/quickstart.md).

# Insurance Widget

Display the Shipping Protection widget on your store's frontend

<figure><img src="https://1074979317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqgD8feDVhQb5QpR8qJzf%2Fuploads%2FrGg3pSNV7Dnnhc99TaHs%2F2.png?alt=media&#x26;token=bdedba31-4e29-4a61-a7d6-052870eb02c7" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you want to customize the widget, please contact us at [this link](https://go.crisp.chat/chat/embed/?website_id=1dc48f94-5e00-41cc-bbf5-0f11ab481983).
{% endhint %}

## 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**

<figure><img src="https://1074979317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqgD8feDVhQb5QpR8qJzf%2Fuploads%2F6jx2Xoj2XU1kCdO3jCcJ%2Fimage.png?alt=media&#x26;token=6d54cdaf-d89a-441a-bbe1-d9ae54eaf649" alt=""><figcaption><p>enable the app embed</p></figcaption></figure>

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

<figure><img src="https://1074979317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqgD8feDVhQb5QpR8qJzf%2Fuploads%2F4JX9r2a5m9A8jkCFCS9C%2Fimage.png?alt=media&#x26;token=a5952f55-b896-47c9-b85e-d45c12cc64ad" alt=""><figcaption></figcaption></figure>

* ***Auto fulfillment***

  <figure><img src="https://1074979317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqgD8feDVhQb5QpR8qJzf%2Fuploads%2F04C7nmmOo6OlrmbRB8gk%2Fimage.png?alt=media&#x26;token=aa41ca95-31a6-4114-9f03-41b6a24faf1c" alt=""><figcaption></figcaption></figure>
* ***Exclusions:*** Configure products excluded from insurance calculations (applicable only for percentage-based pricing).

  <div align="left"><figure><img src="https://1074979317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqgD8feDVhQb5QpR8qJzf%2Fuploads%2FttpFx9jGCo8U3LirLZki%2Fimage.png?alt=media&#x26;token=ab3b892b-7f57-4946-ade7-6e82cd7f23ed" alt=""><figcaption></figcaption></figure></div>
* ***Content:*** Edit the widget content, including text and visuals

  <figure><img src="https://1074979317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqgD8feDVhQb5QpR8qJzf%2Fuploads%2FMcB2dgdhlgOuJj8AiF57%2Fimage.png?alt=media&#x26;token=785eb9ba-7a01-4103-95b9-22dba3f20f9c" alt=""><figcaption></figcaption></figure>
* ***Customized widget design:*** Set up the insurance icon and customize widget styles and appearance.

  <div align="right" data-full-width="false"><figure><img src="https://1074979317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqgD8feDVhQb5QpR8qJzf%2Fuploads%2FjtM6DK5WhPHSTxoo1Zb4%2Fimage.png?alt=media&#x26;token=2fdffecb-09a3-40d7-b57a-d90f96059f92" alt=""><figcaption></figcaption></figure></div>

<p align="center"><sub>Select or upload a widget icon</sub></p>

<figure><img src="https://1074979317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqgD8feDVhQb5QpR8qJzf%2Fuploads%2FoLr0DtUqhOSkiM71mRLL%2Fimage.png?alt=media&#x26;token=43248444-da44-4aae-b541-822eefdc6721" alt=""><figcaption></figcaption></figure>

<p align="center"><sub>Customize widget position</sub></p>

<figure><img src="https://1074979317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqgD8feDVhQb5QpR8qJzf%2Fuploads%2FhxC9rtUQOE2py4JQVAo8%2Fimage.png?alt=media&#x26;token=ed38279c-f6f3-4e70-a179-82564ab58359" alt=""><figcaption></figcaption></figure>

<p align="center"><sub>Customize widget style</sub></p>

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

  <figure><img src="https://1074979317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqgD8feDVhQb5QpR8qJzf%2Fuploads%2FSVa5S6A1f1iiYZnfES7F%2Fimage.png?alt=media&#x26;token=ba441469-d0b4-442b-b394-acad3dfdfb2d" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**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.
  {% endhint %}

## Where Protection Can Appear

{% hint style="info" %}
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.
{% endhint %}

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.

{% hint style="warning" %}
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.
{% endhint %}

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

<figure><img src="https://1074979317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqgD8feDVhQb5QpR8qJzf%2Fuploads%2FjmsnYOvM4jlh916ZXCXW%2F3.png?alt=media&#x26;token=81096f11-f664-4d1b-8033-d89413b15dee" alt=""><figcaption></figcaption></figure>

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.