自定义 HTML

Upcart 中的 Custom HTML 部分允许你将自定义代码插入到 cart drawer 的各个位置。
你也可以使用 <script> 标签编写 JavaScript，并通过 Upcart 的 Public API（例如 upcartOnCartLoaded (deprecated — use upcartSubscribeCartLoaded for new scripts)）与购物车交互。

在哪里找到它

前往：Cart Editor > Settings > Custom HTML

工作原理

HTML Location 下拉菜单让你选择代码在购物车布局中出现的位置。根据你的选择，代码将被注入到对应的购物车区域。你可以用它来添加：

自定义消息
信任文案
应用集成
分析代码片段
样式挂钩
促销内容，例如带有个性化优惠或折扣的横幅
增强客户信心的商品保障说明

动态令牌

你可以在任何 Custom HTML 字段中使用以下令牌来注入实时购物车数据：

令牌	渲染内容
`{{UPCART_SUBTOTAL}}`	当前购物车小计，按你商店的货币格式化

示例：

<p>Your current total: <strong>{{UPCART_SUBTOTAL}}</strong></p>

此令牌在除 Scripts (Before Load) 之外的所有 HTML 位置字段中都有效；在 Scripts (Before Load) 中应改用 JavaScript API。这是 Custom HTML 字段中唯一可用的动态令牌。

可用的 HTML 位置


位置	说明
Above announcements/rewards	购物车顶部，购物车页眉下方。
Below header/announcements/rewards	紧邻任何公告或奖励栏下方。
Between each line item	注入到购物车中每个商品的下方。
Below cart items	紧邻购物车行项目下方，底部模块上方。
Above footer/add-ons	购物车商品和 upsell 下方，附加组件上方。
Above checkout button	页脚内，紧邻 checkout 按钮和小计上方。
Below checkout button	页脚内，紧邻 checkout 按钮下方。
Bottom of cart	抽屉最底部（页脚之外）。
On empty cart screen	显示在”Your cart is empty”文本旁边。
Scripts (Before Load)	用于在购物车加载之前运行 JavaScript 的不可见区域。非常适合跟踪、条件逻辑或自定义行为。

自定义 CSS（可选）

你可以使用 Custom CSS 编辑器为你的 HTML 设置样式，位置如下：
Upcart > Cart Editor > Settings > Custom CSS 例如，调整空购物车的对齐方式：

[class*="styles_CartPreview__empty__"] { flex-direction: column; } [class*="styles_CartPreview__empty__"] h3 { margin: unset; }

开始使用

购物车模块

购物车设置

固定购物车按钮

Multicart

自定义

分析

集成与兼容性

计费与账户

故障排除

在哪里找到它

工作原理

动态令牌

可用的 HTML 位置

自定义 CSS（可选）

​在哪里找到它

​工作原理

​动态令牌

​可用的 HTML 位置

​自定义 CSS（可选）

在哪里找到它

工作原理

动态令牌

可用的 HTML 位置

自定义 CSS（可选）