> ## 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.
# 购后 widget
> 本文档概述 Aftersell 中可用的购后 widget，以及如何使用它们构建购后 upsell 体验。Widget 按作用范围和功能分组，每个 widget 只记录一次以避免重复。
***
# 漏斗级 widget
## 进度条（Progress Bar）
**进度条**向顾客展示他们在购后流程中所处的位置。
启用后，进度条会出现在漏斗内的所有 upsell offer 上。对进度条的任何更改都会应用于整个漏斗。
**配置选项**
* 为漏斗打开或关闭进度条
* 选择显示样式：
* **Minimal**
* **Minimal with labels**
* **Maximal**
* 选择 **Black** 或 **White** 外观
* 调整上下内边距以控制间距
***
# Offer 级 widget
Offer 级 widget 控制单个 upsell offer 的内容和行为。
这些 widget 定义顾客在特定 upsell 步骤中看到的内容，包括文案、紧迫感元素、商品信息、价格明细和操作按钮。
漏斗中的每个 offer 都可以使用 offer 级 widget 独立自定义，让你在每一步都能量身定制体验。
这些 widget 包括：\
[文本](#text)\
[倒计时](#timer)\
[Upsell 商品](#upsell-product)\
[商品选择](#product-selection)\
[折扣](#discount)\
[徽章](#badge)\
[运费](#shipping)\
[图片](#image)\
[按钮](#buttons)\
[价格明细](#price-breakdown)\
[商品详情](#product-details)\
[款式与方案选项](#variant--plan-options)\
[布局](#layout)\
[视频](#video)\
[评价](#testimonials)
***
## 文本
**文本** widget 用于 offer 中的标题和辅助文案。
它支持一个标题和可选的正文文字，并提供字号、颜色、字重、对齐、删除线和间距等控制项。
使用动态变量 `{first-name}` 可为每位顾客提供个性化文案。
***
## 倒计时
**倒计时** widget 通过显示实时倒计时来营造紧迫感。
倒计时进行期间，offer 保持可见。当倒计时归零时，upsell offer 会自动消失，顾客将被带入漏斗的下一步。
***
## Upsell 商品
**Upsell 商品** widget 是 offer 的核心。它定义展示的是哪件商品，并作为下方所有与商品相关的 widget 的容器。
后续所有内容都在此 widget 中配置。
***
## 商品选择
商品选择 widget 控制 upsell offer 中展示哪件商品。
你可以选择固定商品，或根据顾客的原订单动态确定 upsell 商品，从而同时支持静态和自适应的 upsell 体验。
#### 商品类型选项
* **Specific product**\
始终在 upsell 中展示同一件商品。
* **Automatic upsell**\
使用预定义的 upsell 逻辑动态选择商品。
* **Most expensive in cart**\
使用顾客原订单中价格最高的商品。
* **Least expensive in cart**\
使用顾客原订单中价格最低的商品。
#### 更改商品
所选商品显示在 widget 顶部。更改方法：
1. 点击 **Change product**
2. 选择商品类型
3. 选择或确认商品
在选择器的 **Products** 选项卡中浏览时，可以勾选 **Active products only**，将草稿（Draft）和已归档（Archived）商品从列表中隐藏。此筛选默认关闭，且仅适用于 Products 选项卡——Collections 不受影响。
#### 识别名称相同的商品
如果你的店铺有多个标题相同的商品或款式，可在商品选择器中启用 **Show IDs** 开关，在每个名称下方显示 Shopify 数字商品 ID 和款式 ID。这样可以轻松确认你选择的是正确的商品。
**Show IDs** 开关位于选择器的 **Product** 选项卡上，默认关闭。Collection 选项卡上不可用。
***
## 折扣
**折扣** widget 用于应用并展示促销价格。
你可以选择百分比（%）折扣或固定金额（\$）折扣。可以按需添加自定义折扣文字，折扣还可以选择参考商品的划线价（compare-at price）或忽略它。
### 多商品 offer 的批量折扣快捷方式
对于多商品和系列 offer，Upsell Products widget 设置中会直接出现一个 **Discount** 部分——位于商品选择区域下方。它让你能更快地为多件商品设置或更新折扣，而无需打开每件商品的单独设置。
该部分默认折叠。展开后：
* 会显示 offer 中所有商品的列表，每件商品带有复选框和显示其当前折扣的徽章（例如 `17% off` 或 `$18.00 off`）。
* 使用复选框选择要更新的商品。默认全部选中。
* 列表下方的标签会显示你的更改将应用于多少件商品。
* 使用折扣类型和数值字段设置折扣。更改仅应用于选中的商品——未选中的商品保留现有折扣。
#### 商品间折扣不一致
当选中的商品折扣设置不同时，字段会显示占位文字以指示差异：
* 如果商品的**折扣类型**不同（例如，有的是百分比折扣，有的是固定金额折扣），类型选择器会显示 **Mixed**。
* 如果商品的**折扣数值**或类型不同，数值字段会显示 **Multiple values**，并提示输入新值将覆盖每件选中商品的当前折扣。
#### 商品行上的信息图标
当某件商品配置了额外的折扣设置——如自定义折扣标题、划线价或订阅折扣——其折扣徽章旁会出现一个信息图标（i）。将鼠标悬停在图标上可查看这些额外设置的摘要。
***
## 徽章
**徽章** widget 用于突出商品的关键属性，如热度或紧迫感。
你可以选择预定义的徽章文字，从多种视觉样式中挑选，加入图标，并控制徽章出现在 offer 中的位置或直接显示在商品图片上。
可通过 **Advanced badge settings** 上传自定义徽章图片（SVG 或 PNG，最大 10MB）。
徽章编辑仅在 V2 offer 上可用。V1 offer 会保留此前配置的徽章，但无法在 V1 offer 上编辑徽章设置。
***
## 运费
**运费** widget 控制运费信息的呈现方式。
你可以提供免运费，或通过设置具体运费金额来收取运费。
***
## 图片
**图片** widget 控制商品图片的展示方式。
它包含调整主图大小、添加边框、启用图片轮播，以及通过 **Advanced image settings** 上传自定义商品图片的选项。
***
## 语言
**语言**部分控制 offer 中所有系统文字使用的语言，包括按钮文字、订阅标签、价格标签及其他不可编辑的字符串。
从 **Language** 下拉菜单选择一种语言，即可自动翻译该 offer 的系统文字。Aftersell 支持 32 种语言。
此设置不影响徽章或自定义文本字段——只有系统生成的文字会被翻译。
***
## 按钮
**按钮 widget** 控制顾客在 checkout 期间接受或拒绝 upsell 的方式。
你可以自定义按钮的行为和外观，包括：
* 选择**默认接受按钮文字**
* 要求在接受 upsell 前进行**确认点击**
* 更改**拒绝按钮样式**（例如按钮或链接）
* 调整**按钮对齐方式**和宽度
* 在按钮上方或下方添加可选的**辅助文字**，支持样式控制和动态变量
### 按钮文字
你可以通过 **Default accept button text** 下拉菜单为购后 offer 配置接受按钮的文字。可用选项取决于 offer 类型：
**标准 offer：**
* **Pay Now**——显示"Pay Now • \[商品总价]"（免费商品显示"Add Now • Free"）
* **Accept Offer**——无论价格如何都显示"Accept Offer"
**订阅升级 offer：**
* **Upgrade Subscription**——显示"Upgrade Subscription"（新订阅升级 offer 的默认值）
* **Accept Offer**——无论价格如何都显示"Accept Offer"
* **Pay Now**——显示"Pay Now • \[商品总价]"（免费商品显示"Add Now • Free"）
要翻译按钮文字，请使用 Buttons 部分上方的 **Language** 部分。
### 按钮布局选项
你还可以控制**接受和拒绝按钮的相对位置**。支持以下布局：
* **Accept above decline**——接受按钮显示在拒绝选项上方
* **Decline above accept**——拒绝选项显示在接受按钮上方
* **Accept beside decline**——接受和拒绝按钮并排显示
这些布局选项让你更灵活地匹配想要的 checkout 体验和信息层级。
***
## 价格明细
**价格明细** widget 让价格信息更清晰。
它可以显示运费和税费，包含小计和折扣等额外明细，并可对齐或放置在支付按钮附近以获得最大清晰度。
### 隐藏运费调整行
当你的 offer 配置为替换型 upsell（使用"Replace item in original order with upsell"设置）时，价格明细中会包含一条 **Shipping adjustment** 行，反映原商品与替换商品之间的运费差额。
你可以使用 **Hide shipping adjustment line** 复选框隐藏这一行，该复选框仅在配置了替换型 upsell 时才出现在价格明细部分。此设置默认关闭，因此现有 offer 不受影响。
* 勾选后，运费调整行将从顾客的价格明细中隐藏。
* 取消勾选后，运费调整行正常显示。
此设置仅影响替换型 upsell offer 上的运费调整行。非替换型 offer 的标准运费行不受影响。
***
## 商品详情
**商品详情** widget 控制关键商品信息的呈现方式。
它支持商品评价星级（若无评价则自动隐藏）、可选的数量选择器，以及在原订单中已包含该商品时跳过 offer 的功能。
商品标题和价格完全可自定义样式，并支持一些动态变量，包括 `{product}`、`{original-price}`、`{current-price}`、`{savings}` 和 `{savings-line}`。
可添加可选的 offer 描述，以强化价值感或紧迫感。
### 商品评价星星颜色
启用 **Show product reviews rating** 后，你可以自定义星级评分显示的颜色：
* **Star color**——已点亮（激活）星星的颜色。默认为 `#fdcc0d`（黄色）。
* **Empty star color**——未点亮（未激活）星星的颜色。默认为 `#d1d5db`（浅灰色）。
要更改颜色，请打开**商品详情** widget 设置，启用 **Show product reviews rating**，并使用颜色输入框设置你想要的十六进制值。
### 数量选择器预设
启用数量选择器后，你可以配置**预设数量**，控制 offer 展示时显示或允许的商品件数。可用的预设选项如下：
* **Fixed**——设置顾客初始的具体数量。数量选择器会隐藏，顾客无法更改数量。
* **Percentage of purchased quantity**——将数量设置为顾客原购买件数的某个百分比。
* **Minimum quantity**——设置数量下限。顾客从该值开始，只能向上增加。
* **Maximum quantity**——设置数量上限。顾客从 1 开始，无法超过配置的最大值（最多 20）。系统会向顾客显示一条信息，说明该商品的最大数量。
### 描述位置
对于单商品 offer，你可以控制商品描述相对于 CTA 按钮的位置：
* **Default (above buttons)**——描述显示在接受和拒绝按钮上方
* **Below buttons**——描述显示在接受和拒绝按钮下方
此设置让你可以调整布局，更好地匹配你的信息层级和设计偏好。
***
## 款式与方案选项
**款式与方案选项** widget 控制款式的可见性、选择方式，以及订阅方案锁定。
你可以显示或隐藏缺货款式，在所有款式都不可购买时隐藏整个商品，并控制是否显示只有单个选项的款式选项。**高级设置允许你完全隐藏款式选择器**。
款式预选选项包括：与初始购买智能匹配（Smart matching）、不预选（Unselected，要求用户自行选择）或第一个可购买款式（First available variant）。
对于有多个款式选项的商品，所有选项都会显示，且在有货时会预选一个有货款式；缺货选项显示为不可选。对于只有单个款式选项的商品，缺货选项会被隐藏。
### 订阅方案锁定
当提供具有多个订阅方案的订阅商品时，你可以将 offer 锁定为特定方案。这可以防止顾客在购后体验中更改订阅方案，确保他们获得你配置的确切订阅选项。
**锁定订阅方案的方法：**
1. 在**款式与方案选项**部分，找到 **Lock subscription plan** 下拉菜单
2. 从下拉菜单中选择一个具体方案
3. 方案现已锁定——顾客将看到方案名称以静态文字显示，而不是可更改的下拉菜单
**方案锁定后：**
* 顾客看到方案名称以文字形式显示
* 方案选择下拉菜单被隐藏
* 顾客无法更改订阅方案
* 如果锁定的方案在 Shopify 中不再可用，offer 会平滑回退为显示所有可用方案
**自动重置：**
如果你将商品的购买选项改为仅一次性购买（移除订阅选项），锁定方案设置会自动重置。
### 款式选择器位置
你可以控制款式选择器相对于 CTA 按钮的位置：
* **Above CTA buttons (default)**——款式选择器显示在接受和拒绝按钮上方
* **Below CTA buttons**——款式选择器显示在接受和拒绝按钮下方
当款式选择器和商品描述都位于 CTA 按钮下方时，你可以控制它们的顺序：
* **Variant selector first**——款式选择器显示在商品描述之前
* **Description first**——商品描述显示在款式选择器之前
你还可以调整款式选择器的上下内边距，以微调间距并打造理想的视觉布局。
***
## 布局
**布局** widget 控制 upsell 的整体结构和间距。
你可以在单列或双列布局之间选择，调整最大布局宽度，并微调上下内边距，打造整洁、易读的体验。
***
## 视频
**视频** widget 会在 offer 中添加一个可点击的缩略图，点击后在新标签页中打开托管的视频播放器，配有样式化的背景和返回 upsell 的按钮。视频在新标签页而非页面内播放，因此 upsell offer 会在原标签页中保持打开状态。
该 widget 还支持**背景颜色**（用于匹配品牌或将注意力集中在播放器上），以及**布局设置**，包括对齐方式（左、中、右）和上下内边距。
要预览顾客体验，请在编辑器的 **offer 预览**中点击缩略图。托管的视频播放器会像在店面上一样在新标签页中打开，让你在发布前确认缩略图、CTA 和关闭行为。
### 浏览器兼容性
视频 widget 会在新标签页中打开播放器。在桌面端这始终可行，因此 widget 总会显示。
在移动端则相反：Aftersell 只在它确认能够打开新标签页且不会把顾客带离 checkout 的浏览器中显示该 widget。这涵盖原生移动浏览器——Safari、Chrome、Firefox 及其他知名浏览器——以及 Facebook 和 Instagram 的应用内浏览器。
\*\*其他所有移动浏览器都会隐藏该 widget。\*\*包括 Google 应用、TikTok 和 Pinterest 等应用内浏览器、通用 webview，以及任何 Aftersell 无法识别的环境。由于无法识别的浏览器会被隐藏而非显示，widget 不会出现的环境集合并不是一个固定列表——Aftersell 未见过的浏览器同样会隐藏它。
在 widget 被隐藏的场景中，你可以上传\*\*备用图片（Fallback image）\*\*来代替显示——例如静态促销图片或品牌图形。备用图片显示时不带链接或播放按钮。如果未设置备用图片，widget 的位置将不渲染任何内容。
为你发布的每个视频 widget 设置**备用图片**。由于任何无法识别的环境都会被隐藏，仅凭流量来源无法判断是否有顾客看不到 widget——而没有备用图片时，这些顾客将什么都看不到。
### 视频来源
该 widget 播放来自两种来源之一的单个视频。使用 widget 设置中的 **Upload** / **Link** 切换开关，选择播放器使用哪个来源：
* **Upload**——拖放或选择 MP4、WebM 或 MOV 文件（最大 50 MB），直接托管到你的 Shopify Files。上传后，Shopify 会处理文件，编辑器中会出现预览。
* **Link**——粘贴 YouTube URL、Vimeo URL，或托管视频文件的直链（例如你自己 CDN 上的 MP4）。
两者都可以填写，但只有切换开关中选定的来源会播放——另一个会保留在其选项卡中，**不会**作为自动备用来源。如果只设置了一个来源，则无论切换开关如何，该来源都会播放。
保存 widget 前，你必须至少设置一个来源——上传的视频或视频链接。
#### 支持的链接格式
链接字段接受以下内容：
* **YouTube**——使用标准视频 URL（例如 `https://youtu.be/VIDEO_ID` 或 `https://www.youtube.com/watch?v=VIDEO_ID`）。不支持 YouTube Shorts URL（`youtube.com/shorts/...`）——请在 YouTube 上打开该视频并使用其分享链接。
* **Vimeo**——使用标准视频 URL（例如 `https://vimeo.com/VIDEO_ID`）。不支持 Showcase URL 以及不指向具体视频的频道或个人主页——请使用地址栏中该视频的独立 URL。包含数字视频 ID 的频道或群组 URL 是可以的。
* **直链文件**——指向视频文件的公开可访问 HTTPS URL（例如你 CDN 上的 MP4）。
#### 链接验证
编辑器会在两个时机验证你的链接：
* **离开字段时**——如果 URL 形式明显有误（例如 YouTube Shorts 链接或 Vimeo showcase URL），会显示内联错误，说明应使用什么格式。
* **保存时**——编辑器会向视频提供方核实该视频是否可嵌入。如果视频为私密、已删除或关闭了嵌入功能，保存会被阻止，原因会显示在链接字段上。修正链接后再次保存即可继续。
如果提供方检查不可用（例如由于网络问题），保存会照常进行而不被阻止。
#### Shopify Files 权限
上传视频需要 `write_files` 权限。如果尚未授予此权限，上传区域会出现一条带 **Update** 按钮的横幅。点击它授予权限并启用上传。
#### 上传处理
拖入或选择文件后，上传器在文件传输期间显示 **Uploading…**，随后在 Shopify 转码期间显示 **Processing…**。处理完成后会出现预览。视频处理期间，你可以继续编辑其他 widget 设置。
如果 widget 的唯一来源是仍在处理中的视频，则无法保存——保存会被阻止，直到转码完成，或者你先添加一个视频链接作为来源。如果你在保存前放弃更改或关闭编辑器，所有正在进行的上传都会从 Shopify Files 中删除。
视频链接会在保存 widget 时进行验证。
### 缩略图和观看视频 CTA
上传顾客在打开视频前会在 offer 中看到的图片。观看视频 CTA 会自动叠加在缩略图上，以吸引顾客点击播放。你可以自定义 CTA 文字的样式以匹配品牌。缩略图不会从视频自动生成——必须手动上传。
你还可以上传单独的**仅移动端缩略图**。设置后，移动设备上显示移动端缩略图，桌面端使用默认缩略图，让你可以针对不同屏幕尺寸定制图片。
### 备用图片
**Fallback image** 设置允许你上传一张图片，在顾客的浏览器无法打开播放器、视频 widget 被隐藏时代替显示——参见[浏览器兼容性](#browser-compatibility)。备用图片显示时不带链接或播放按钮叠层；它只是一张静态图片。
如果未上传备用图片，widget 的位置将不渲染任何内容。
### 自动播放
**Autoplay** 开关控制托管播放器打开时视频是否自动开始播放。
启用自动播放后，视频会以**静音**开始播放。大多数现代浏览器会在顾客与页面交互之前阻止带声音的视频自动播放，因此静音播放是自动播放可靠生效的必要条件。视频开始播放后，顾客可以使用播放器控件取消静音。
如果你希望从第一帧就有声音，请关闭自动播放，让顾客手动点击播放。
### 关闭视频
顾客有三种方式关闭托管播放器并返回 upsell offer：
* **Back to offer 按钮**——播放器下方的按钮，关闭标签页并返回 upsell。
* **任意位置双击**——在背景任意位置双击可关闭播放器。
* **播放结束自动关闭**——视频播放完毕后，播放器自动关闭。
由于视频在新标签页中打开，关闭播放器就是关闭该标签页——upsell 仍保留在原标签页中。
### 语言与翻译
视频播放器页面的文案——返回 offer 按钮文字、桌面和移动端提示，以及视频不可用时显示的标题和信息——遵循 offer 的**语言**设置，并可在 **Settings > Translations** 中自定义。
***
## 评价
**评价（Testimonials）** widget 在购后 offer 上展示真实的商品评价，建立信任并强化顾客接受 upsell 的决定。
评价从你已连接的评价应用中获取。该 widget 在 offer 编辑器的选择器中显示为带星形图标的 **"Testimonials"**。
使用此 widget 前，你必须在 **Settings > Product Reviews** 中连接一个评价应用。支持的应用包括 Judge.me、Klaviyo、Okendo 和 Yotpo。设置说明参见[评价应用集成](/zh/aftersell/checkout_widget_types#review-app-integrations)。
### 选择模式
评价 widget 支持两种模式：
* **Manual**——由你挑选一组精选评价进行展示。评价按你保存的顺序显示。
* **Dynamic**——根据 upsell offer 中的商品，自动从评价应用的同步缓存中获取评价。评价关联的是 offer 中的商品，而不是顾客的原订单。
### 配置选项
* **Review app**——选择从哪个已连接的评价应用获取评价。
* **Mode**——选择 Manual 或 Dynamic。
* **Minimum rating**——设置评价展示的最低星级（例如 4 星及以上）。
* **显示开关**——显示或隐藏单个评价元素：
* 星级评分
* 评价标题
* 评价者姓名
* 评价日期
* 已验证买家徽章
* **Truncate review text**——设置评价文字的最大字符长度。超出限制的评价会以省略号截断。
* **Max reviews to show**——设置显示多少条评价，从 1 到 3。
* **Layout**——将评价排列为 **Horizontal**（并排）或 **Vertical**（堆叠）。
* **Padding**——调整 widget 周围的间距。
### 动态模式与评价同步
在动态模式下，Aftersell 会从你的评价应用导入评价并存储，以便在 offer 上展示。首次导入会在连接评价应用后的 24 小时内自动进行，此后每周一次。
要立即导入评价，请进入 **Settings > Product Reviews**，并为你的评价应用点击 **Sync now**。
### 已验证买家徽章
启用已验证买家徽章后，符合条件的评价上会显示 **"Verified buyer"** 标签。此标签会自动翻译为 offer 设置的语言，支持 32 种语言。
***
## 添加更多 widget
Widget 可以添加在 **Upsell 商品 widget 的上方或下方**，让你控制商品前后信息的呈现顺序。
可添加的其他 widget 包括：
* **图片**——展示辅助图片，从视觉上强化 offer。
* **文本**——添加辅助文字，传达关键信息。
* **文本与图片**——结合文字和视觉元素，突出价值或说明 offer。
* **额外购买按钮**——添加额外的行动号召，鼓励接受 offer。展示多件商品的 offer 上不可用。
* **信任徽章**——展示保障、安全或可信度等信任标识。
* **常见问题（FAQ）**——回答顾客常见问题，减少阻力，增强信心。
* **视频**——嵌入视频以演示商品或讲述品牌故事。参见[视频](#video)。
* **评价**——展示来自已连接评价应用的真实商品评价。V2 offer 上可用。参见[评价](#testimonials)。
添加 widget 的方法：
1. 选择希望 widget 出现在 Upsell 商品 widget 的**上方还是下方**
2. 在所选区域点击 **Add widget**
3. 选择并配置你想加入的 widget
***
要详细了解什么是购后 offer、其工作原理，以及如何通过 Aftersell 开始使用，请查看[这篇文章了解更多信息](/zh/aftersell/post_purchase_overview)。
***
Widget 的行为和外观仅限于编辑器中提供的配置选项。\
由于 Shopify 的限制，不支持进一步的自定义。
***
## 需要帮助？
如果你在设置购后 offer 时有疑问或需要协助，我们的支持团队随时为你服务。你可以随时通过应用内聊天或电子邮件联系我们。