> ## 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.

# 自定义 HTML

> 使用内置的 HTML 编辑器向购物车添加自定义 HTML 或 JavaScript。

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

<div id="where-to-find-it">
  ## **在哪里找到它**
</div>

前往：**Cart Editor > Settings > Custom HTML**

<div id="how-it-works">
  ## **工作原理**
</div>

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

你可以用它来添加：

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

<div id="dynamic-tokens">
  ## **动态令牌**
</div>

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

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

**示例：**

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<p>Your current total: <strong>{{UPCART_SUBTOTAL}}</strong></p>
```

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

<div id="available-html-locations">
  ## **可用的 HTML 位置**
</div>

|                                        |                                                       |
| -------------------------------------- | ----------------------------------------------------- |
| 位置                                     | 说明                                                    |
| **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 的不可见区域。非常适合跟踪、条件逻辑或自定义行为。 |

<div id="custom-css-optional">
  ## **自定义 CSS（可选）**
</div>

你可以使用 **Custom CSS** 编辑器为你的 HTML 设置样式，位置如下：\
**Upcart > Cart Editor > Settings > Custom CSS**

例如，调整空购物车的对齐方式：

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
[class*="styles_CartPreview__empty__"] { flex-direction: column; } [class*="styles_CartPreview__empty__"] h3 { margin: unset; }
```