这条消息在一个周三早上发来，附带一张截图和一段旧代码。一家位于哥本哈根、销售铝制行李箱和旅行用品的网店（我们称之为 Havn & Co.）的店主，在竞争对手的购物车里看到了一个设计，也想要一个：商品下方的一个小方框，写着“安全包：防丢失、防盗窃、防损坏”，并带有一个顾客在结账前可以打开的开关。
“我们要一模一样的，”消息里写道，“文字、图片和颜色要能自己改。请不要再装新应用。”本案例介绍我们如何打造这个 Shopify 运输保障开关：功能是什么、每个部分为什么存在、我们在线上店铺发现的意外情况，以及我们在主题编辑器中添加的每一项设置。
关于本案例：内容基于为一位丹麦客户完成的真实 Shopify 项目。店铺名称已更改，图片为示意图。功能、设置和测试均按实际交付内容描述。
项目概览
| 客户 | 丹麦网店，销售行李箱和旅行用品，价格以丹麦克朗计 |
| 平台 | Shopify，Horizon 主题 3.5，Upcart 购物车应用 |
| 功能 | 购物车抽屉内的可选“安全包”（运输保障）开关 |
| 交付内容 | 1 个 snippet、1 个脚本、1 个样式表，主题设置中新增的 Safety package 分组，以及对 4 个主题文件的小幅补充 |
| 限制条件 | 不额外安装保障应用、不更换主题、全部可在主题编辑器中修改、使用丹麦语文案 |
需求：店铺想要什么
根据截图、代码示例和一次简短的通话，我们把需求整理成五点：
- 购物车中的保障方框，紧贴商品下方，包含图标、标题、简短说明和开关。
- 一键添加或移除，总价即时更新，页面无需刷新。
- 整洁的购物车：保障不应作为令人困惑的额外商品行出现。
- 在主题编辑器中完全可控：文字、图片、尺寸、颜色和定价商品，无需改代码。
- 丹麦语文案：Sikkerhedspakke 和 Beskyttelse mod tab, tyveri og skade。
什么是运输保障开关？店铺为什么需要它？
运输保障开关让顾客在结账前的最后一步，自行选择支付一笔小额费用，以保障包裹丢失、被盗或损坏时的风险。开关背后是一个普通的 Shopify 商品（示意图中为 49 克朗），会被加入或移出购物车。
对于销售数百克朗行李箱的店铺，它同时带来三个好处：
- 在关键时刻给予安心。“万一丢了怎么办？”这个疑问就在结账按钮旁边得到解答，而犹豫恰恰发生在这里。
- 每笔订单增加收入。每位选择保障的顾客都会把费用加入订单，店铺自行决定如何用它支付索赔。
- 减少客服咨询。包裹丢失时，双方已经清楚知道保障范围。
有一条规则决定了整个设计：在欧盟，额外的付费选项必须由顾客主动选择。《消费者权利指令》（2011/83/EU，第 22 条）规定，商家不得使用预先勾选的方式收取额外费用。因此开关默认关闭，而可选的自动添加模式在设置中有清晰标注，并始终尊重顾客关闭它的选择。
意外：购物车并不是主题自带的
我们的第一版把方框放进了 Horizon 主题的购物车抽屉。代码本身没问题，但客户在线上店铺里却完全看不到。原因是：店铺使用了 Upcart，这是一款购物车应用，它会完全取代主题的购物车，绘制自己的界面，并与主题样式隔离。
我们没有让客户把代码粘贴到应用里，而是检查了线上店铺，确认了可用的 Upcart 函数，并调整了方案：所有设置仍保存在主题中，由一个小脚本把安全包方框放进 Upcart 购物车内部，在 Upcart 重新渲染时保持它的位置，并在每次变更后通知 Upcart 刷新。主题购物车版本作为后备，以防店铺将来卸载 Upcart。
功能逐一说明
1. 一键开关，总价即时更新
是什么：开关通过 Shopify 购物车 API 添加或移除保障商品，然后刷新购物车和商品数量。为什么：此刻刷新页面会打断购买流程、影响销量。顾客大约一秒就能看到新的总价。
2. 隐藏保障行
是什么：保障商品在 Upcart 和主题购物车的商品列表中都会被隐藏。为什么：第二个带数量按钮的“商品行”会让顾客困惑。方框本身已显示状态，价格仍计入总价和订单。
3. 智能购物车规则
是什么：每次购物车变化后，三条规则自动运行。为什么：购物车绝不能处于异常状态，例如只购买了保障。
- 不单独出售：顾客移除最后一件真实商品时，保障也会被移除。
- 数量始终为 1：重复项或数量大于 1 时会自动纠正。
- 尊重“不要”：开启自动添加时，关闭保障的顾客在本次访问中不会再被询问。
4. 同时支持 Upcart 和主题
是什么：同一功能可在 Upcart 购物车、Horizon 主题购物车和完整购物车页面中运行。为什么：商家会更换应用，保障方框应该在这种变化后依然可用，无需重做。
5. 轻量、自有的代码
是什么：一个小脚本和一个样式表，由主题加载。为什么：无需为另一个保障应用支付月费，每个页面也不会多出第三方脚本，代码就在商家自己的主题里。
我们在主题编辑器中添加的所有选项
所有设置都在一个新分组中：在线商店 → 模板 → 自定义 → 主题设置 → Safety package。商家无需开发者即可修改以下所有内容。
| 分组 | 设置 | 作用 |
|---|---|---|
| 常规 | Enable safety package | 开启或关闭整个功能 |
| Protection product | 加入购物车的商品（及价格） | |
| Add automatically to cart | 可选的自动添加，默认关闭；会记住顾客的拒绝 | |
| Hide protection product in the item list | 保持购物车整洁 | |
| Also show on cart page | 在完整购物车页面也显示方框 | |
| 内容 | 图片、图片宽度 | 上传自己的图片，或使用内置的纸箱加盾牌图标 |
| 图标盾牌颜色 | 内置图标中盾牌的颜色 | |
| 标题、说明 | 任意文字，任意语言 | |
| 在标题旁显示价格 | 显示保障价格 | |
| 字体 | 标题大小、字间距、大写、说明字号 | 与店铺字体保持一致 |
| 方框样式 | 文字与背景颜色、分隔线、边框宽度与颜色、圆角、内边距、Upcart 中的侧边距 | 与购物车设计保持一致 |
| 开关 | 开启、关闭和圆钮颜色 | 品牌色开关 |
底层工作原理
给自己搭建 Shopify 店铺的读者一个简要说明：主题把设置输出为一个小的 JSON 块和一个 HTML 模板。脚本读取它们，等待 Upcart 加载完成，再把方框放到 Upcart 商品列表下方。MutationObserver 会在 Upcart 重新渲染时把方框放回原位。开关调用标准购物车接口，然后刷新购物车：
// 开启
await fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: protectionVariantId, quantity: 1 }] }),
});
// 让 Upcart 以新总价重新渲染购物车
window.upcartRefreshCart?.();保障行通过匹配其变体 ID 来隐藏，Upcart 会把该 ID 写入每一行的 ID 中。购物车请求按队列执行，因此快速连续点击开关也不会产生冲突。
在线上店铺测试
交付前，我们在真实店铺中用隔离的浏览器会话和一个替代商品测试了各项行为，没有产生任何真实订单：
| 测试 | 结果 |
|---|---|
| 添加商品并打开购物车 | 方框出现在商品下方，处于关闭状态 |
| 开启 | 保障已添加，其行已隐藏，总价已更新 |
| 关闭 | 保障已移除，总价恢复为商品价格 |
| 开启后删除最后一件真实商品 | 保障自动移除，购物车为空 |
客户得到了什么
- 与客户所发参考一致的安全包方框，使用丹麦语，出现在顾客真正看到的购物车里。
- 几分钟即可修改的设置分组：文字、图片、颜色、尺寸和定价商品。
- 无需为保障功能新增月度应用订阅。
- 保证每个购物车有效的规则，以及符合欧盟消费者规则的主动选择设计。
- 一份创建保障商品并启用该功能的简明指南。
定制功能还是保障应用？
| 保障应用 | 定制开关 | |
|---|---|---|
| 月度成本 | 通常是订阅费或每笔费用的分成 | 一次性开发，之后免费运行 |
| 设计 | 应用自带组件，样式有限 | 完全按你的设计，在主题编辑器中设置 |
| 购物车 | 未必支持所有购物车应用 | 为你的购物车（此处为 Upcart）和主题定制 |
| 索赔处理 | 通常由应用服务商负责 | 由店铺自行处理 |
| 适合 | 希望外包索赔的店铺 | 希望自主控制并打造品牌体验的店铺 |
没有哪种方案永远正确。如果店铺希望由第三方处理索赔，应用更合适；如果希望自己掌控费用、文案和外观，定制开关更轻量，长期来看也更省钱。
你的购物车还能放些什么？
同样的模式（主题编辑器中的设置、一个小脚本，背后是一个商品或购物车属性）适用于许多其他能提高客单价或减少咨询的附加功能：
- 礼品包装，作为付费附加项。
- 免运费进度条，鼓励顾客再加一件商品。
- 配送日期选择，保存到订单中。
- 延长保修，按商品提供。
- 公益凑整，把零头捐给公益。
- 刻字与订单备注，带输入校验。
常见问题
支持 Upcart 吗？
支持。方框放在 Upcart 购物车内部，并在 Upcart 重新渲染时保持同步。它也适用于主题自带的购物车和购物车页面。
在欧盟自动添加保障合法吗？
付费附加项必须由顾客自己选择，因此开关默认关闭。自动添加为可选功能，启用它的店铺应自行寻求法律意见。
价格可以按购物车金额的百分比计算吗？
默认是在保障商品上设定的固定价格。按购物车金额分档定价也可以实现，只需多个商品变体和少量额外逻辑。
会让店铺变慢吗？
不会。它只是一个小脚本和一个样式表，购物车请求仅在顾客使用开关或购物车变化时才会执行。
以后可以修改文案吗？
可以。标题、说明、图片和颜色都是主题设置，几分钟内就能用任何语言修改。
要点总结
- 在顾客做决定的地方提供保障：购物车内、总价旁边。
- 让它成为价格清晰的主动选择，并尊重说“不”的顾客。
- 隐藏技术性的商品行，保持总价透明。
- 动手之前，先确认线上店铺实际使用的是哪个购物车。
- 把所有文字、颜色和尺寸放进主题编辑器，让商家自己掌控。
想在自己的店铺中加入这样的功能？我们为全欧洲的店铺提供定制购物车功能、Upcart 与主题集成，以及完整的 Shopify 开发服务。欢迎浏览我们的服务，或联系我们聊聊你的购物车。