> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shipping protection block

> The Aftersell Cart Shipping protection block: an opt-in protection add-on that records the choice on the order.

> The **Shipping protection** block offers an opt-in shipping-protection add-on that shoppers can toggle on in the cart, letting them add protection against damage, loss, or theft during shipping and recording that choice on the order for your fulfillment or claims tooling.

## Behavior

* Adding protection does two things: it adds a **real Shopify product line** for the protection product, and it sets a `_shipping_protected` cart attribute to `true`.
* **That attribute survives checkout and lands on the order** as an order note attribute (`_shipping_protected`), so your fulfillment or claims tools can tell which orders are protected.
* Shoppers can both add and remove protection with the control, whichever display type you choose.
* **If no usable protection variant exists, the block renders nothing** rather than showing a control that would error on click.

## Settings

| Setting          | What it controls                                                                                                                           | Default                                                           |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------- |
| **Title**        | Rich-text heading. Supports `{{product_title}}` and `{{price}}`.                                                                           | `<strong>{{product_title}}</strong>`                              |
| **Price label**  | The price line, displayed below the title. Supports `{{product_title}}` and `{{price}}`. Clear this field to hide the price line entirely. | `{{price}}`                                                       |
| **Description**  | Supporting copy.                                                                                                                           | `Protect your order from damage, loss, or theft during shipping.` |
| **Price**        | The protection price (numeric, sets the charged amount).                                                                                   | `2.5`                                                             |
| **Product**      | The protection product (app-provisioned).                                                                                                  | —                                                                 |
| **Display type** | How the control appears: **Toggle** or **Checkbox**.                                                                                       | Toggle                                                            |

## Placement and limits

* **Region:** body or bottom.
* **Maximum:** 1 per cart state.
* **State:** filled cart only.
* Not added by default. Not locked — you can remove or hide it.

## Custom template

Supports a [custom template](/aftersell/cart/custom-templates) from its Code tab, which replaces this block's built-in markup with your JSX. These are the props it receives.

| Prop              | Type                                 | What it's for                                                                                   |
| ----------------- | ------------------------------------ | ----------------------------------------------------------------------------------------------- |
| `isEnabled`       | `boolean`                            | Whether shipping protection is currently in the cart.                                           |
| `isPending`       | `boolean`                            | `true` while the add or remove is in flight. Disable your control on this.                      |
| `title`           | `string`                             | Plain-text title. The fallback when there's no rich-text title.                                 |
| `titleHtml`       | `string`                             | Sanitized rich-text title HTML. Empty when none.                                                |
| `descriptionHtml` | `string`                             | Sanitized rich-text description HTML. Empty when none.                                          |
| `priceHtml`       | `string \| null`                     | Sanitized rich-text price HTML from the dedicated price field. `null` when that field is empty. |
| `priceLabel`      | `string`                             | Formatted price label. Empty when the price isn't shown.                                        |
| `imageUrl`        | `string`                             | Protection image. Empty when none.                                                              |
| `ctaText`         | `string`                             | Button label, for the `button` format.                                                          |
| `format`          | `'button' \| 'checkbox' \| 'toggle'` | How the buyer opts in. Branch your markup on this.                                              |
| `handleAdd`       | `() => void`                         | Adds protection to the cart. For the `button` format.                                           |
| `handleToggle`    | `() => void`                         | Toggles protection in and out of the cart. For `checkbox` and `toggle`.                         |
| `isLoading`       | `boolean`                            | `true` while the cart is still doing its first fetch.                                           |

<Warning>
  `format` decides which handler applies: `handleAdd` for `button`, `handleToggle` for `checkbox` and `toggle`. Wiring the wrong one leaves the control inert for merchants who picked the other format.
</Warning>

## Design

Style this block with its **Design** section in the settings panel. These are per-block overrides that layer on top of your global design and fall back to it when blank.

### Text

The **Text** section in Design lets you control the typography of three elements. Use the **Text element** picker to switch between them.

**Title** — the protection heading. Also supports a custom font family. Bold and text color are set in the Rich Text Editor above (in the Settings tab), not here.

| Setting            | What it controls             | Default             |
| ------------------ | ---------------------------- | ------------------- |
| **Font**           | Font family for the title.   | Inherits from theme |
| **Size**           | Font size.                   | `15px`              |
| **Line height**    | Line height multiplier.      | `1.33`              |
| **Letter spacing** | Tracking between characters. | Normal              |

**Price** — the price line. Bold and text color are set in the Rich Text Editor above.

| Setting            | What it controls             | Default |
| ------------------ | ---------------------------- | ------- |
| **Size**           | Font size.                   | `15px`  |
| **Line height**    | Line height multiplier.      | `1.33`  |
| **Letter spacing** | Tracking between characters. | Normal  |

**Description** — the supporting copy. Bold and text color are set in the Rich Text Editor above.

| Setting            | What it controls             | Default |
| ------------------ | ---------------------------- | ------- |
| **Size**           | Font size.                   | `14px`  |
| **Line height**    | Line height multiplier.      | `1.29`  |
| **Letter spacing** | Tracking between characters. | Normal  |

<Tip>
  Clicking a text element directly in the cart preview highlights it and opens its controls in the panel automatically.
</Tip>

What are design settings? Learn more here: [Design settings](/aftersell/cart/design-settings).