外观与小组件模板
自定义小组件外观、显示模式和可见性开关，并管理每种小组件类型的 HTML/CSS 模板。
仪表板 → 设置 → 外观
外观与小组件模板
控制每个 Umbrella 小组件在店面上的外观和行为。从侧边栏选择一种小组件类型，然后通过三个标签页进行配置：
- 设置 — 开关功能、选择显示模式、控制可见性
- 模板 — 使用代码编辑器编辑 HTML 和 CSS
- 语言 — 管理翻译字符串，支持多语言
小组件类型
产品页面 (PDP)
- PDP 小组件 — 产品页面上的主要保修方案卡片
- PDP OEM 小组件 — 制造商保修信息
- 选择弹窗 — 用于选择保修选项的弹窗
- 信息弹窗 — 显示保修保护详情的弹窗
购物车
- 购物车已保护 — 已有保修保护的项目的状态卡片
- 购物车未保护 — 针对尚无保修保护的项目的追加销售卡片
订单状态
- 订单状态小组件 — 订单确认/状态页面上的保修详情
- 订单状态弹窗 — 从订单状态页面打开的保修详情弹窗
购买后
- 购买后卡片 — 在订单状态页面上为未投保产品追加销售保修
- 购买后弹窗 — 用于购买后追加销售的选择弹窗
运输保障
- 运输保障小组件 — 购物车页面上的运输保障方案
- 运输保障弹窗 — 显示运输保障详情的信息弹窗
PDP 小组件设置
产品详情页面上的主要保修方案。切换 启用 PDP 卡片 即可显示或隐藏。
显示模式
| 模式 | 说明 |
|---|---|
| 内嵌 | 保修选项以可选卡片的形式直接显示在页面上 |
| 弹窗 | 通过按钮/横幅打开包含保修选项的弹窗 |
| 独立 | 每个保修选项各自渲染为一张独立卡片 |
仅限内嵌模式的选项
- 必须选择选项 — 要求顾客在加入购物车之前选择一个保修选项
- 自动选中第一个选项 — 预先选中第一个计划（顾客可以更改或选择不要）
- 显示“不需要保障”选项 — 显示“不用了，谢谢”选项，让顾客明确拒绝
其他选项
- 加入购物车时打开弹窗 — 如果未选择保修，在加入商品前先显示弹窗
- 自定义插入选择器 — 用于控制小组件在页面上放置位置的 CSS 选择器
- 自定义插入位置 — 外部上方、内部顶部、内部底部或外部下方
- 使用自定义模板 — 使用您自己的 HTML/CSS 代替默认设计
- 隐藏 Umbrella 品牌标识 — 移除“Powered by Umbrella”页脚
PDP OEM 小组件设置
在产品页面上显示制造商 (OEM) 保修信息，与延长保修方案分开展示。
- 启用 OEM 小组件 — 显示/隐藏 OEM 小组件
- 隐藏保障详情 — 隐藏详细的保障说明
- 隐藏保修期限 — 隐藏保修期限的显示
- 使用自定义模板 / 隐藏 Umbrella 品牌标识
选择弹窗设置
显示保修选项的弹窗。可从 PDP 小组件、购物车或加入购物车时触发。
- 启用选择弹窗
- 显示模式 — 内嵌（可选卡片）或独立（独立卡片）
- 必须选择选项 — 关闭前必须做出选择
- 自动选中第一个选项 — 预先选中第一个选项（仅限内嵌模式）
- 使用自定义模板 / 隐藏 Umbrella 品牌标识
信息弹窗设置
当顾客点击信息/详情按钮时，显示详细的保修保护信息。
- 启用信息弹窗
- 使用自定义模板 / 隐藏 Umbrella 品牌标识
购物车已保护小组件设置
显示在已有保修保护的购物车项目上。
- 启用已保护购物车卡片
- 显示信息弹窗按钮 — 让顾客查看保修详情
- 显示移除保护按钮 — 让顾客移除保修保护
- 在购物车中隐藏延长保修订单项 — 仅在产品卡片内显示保修详情
- 隐藏延长保修订单项的价格档位 — 隐藏保修订单项上的价格档位
- 隐藏延长保修订单项详情 — 隐藏订单项上的详细保修信息
- 计入受保护订单项总价 — 将保修价格合并到产品显示的总价中
- 禁用保修订单项交互 — 禁止修改保修订单项的数量
- 使用自定义模板 / 隐藏 Umbrella 品牌标识
购物车未保护小组件设置
显示在没有保修保护的购物车项目上，为顾客提供添加保障的机会。
- 启用未保护购物车卡片
- 显示模式 — 弹窗、内嵌或独立
- 仅限内嵌模式：必须选择选项、自动选中第一个选项、显示“不需要保障”选项
- 显示信息弹窗按钮
- 使用自定义模板 / 隐藏 Umbrella 品牌标识
订单状态小组件设置
在订单确认和状态页面上显示保修保单信息。
- 启用订单状态小组件
- 隐藏信息按钮 / 隐藏索赔按钮 / 隐藏状态指示器 / 隐藏保修期限 / 隐藏索赔期信息
- 使用自定义模板 / 隐藏 Umbrella 品牌标识
订单状态弹窗设置
显示完整保修保单详情的弹窗，可从订单状态小组件打开。
- 启用订单状态弹窗
- 隐藏保单 ID / 隐藏开始日期 / 隐藏结束日期 / 隐藏查看保单按钮 / 隐藏提交索赔按钮
- 使用自定义模板 / 隐藏 Umbrella 品牌标识
购买后卡片与弹窗设置
购买后卡片 — 在订单状态页面上为未投保产品追加销售保修。切换 启用购买后小组件。
购买后弹窗 — 从追加销售卡片打开的选择弹窗。切换 启用购买后弹窗。
两者都支持 使用自定义模板 和 隐藏 Umbrella 品牌标识。
运输保障小组件设置
购物车页面上的运输保障方案。
- 启用运输保障小组件
- 显示模式 — 按钮选择（两个按钮：添加/拒绝）或复选框（单个开关）
- 按钮选择模式的选项：自定义结账按钮 HTML（支持
{{{total}}}和{{{price}}}）以及 自定义“不添加并继续”文本 - 使用自定义模板 / 隐藏 Umbrella 品牌标识
运输保障弹窗 — 显示运输保障详情的信息弹窗。切换 启用运输保障弹窗。
模板编辑器
每个小组件都有自己的 HTML 和 CSS 模板。通过 模板 标签页访问。
- HTML 编辑器 — 使用 Handlebars 语法（
{{variable}}输出转义内容，{{{variable}}}输出原始 HTML）。可用变量列在说明面板中。 - CSS 编辑器 — 样式作用域限定在所选小组件内，避免与您的主题冲突。
- 预览面板 — 使用模拟数据实时渲染。可切换浅色/深色模式、选项数量、选中状态和到期状态。
如果您的自定义内容导致问题，点击 恢复默认 即可还原原始模板。
警告 重置模板后无法撤销。重置前请先保存您想保留的自定义代码。
语言标签页
管理每个小组件的翻译字符串，以支持多语言店铺。您可以查看、添加和编辑每种受支持语言的翻译键。
