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

# Upcart HTML 位置库

> 了解自定义 HTML 和 JavaScript 会显示在 cart drawer 的哪些位置。

<div id="overview">
  # 概览
</div>

Upcart 允许你使用 **Custom HTML** 编辑器将 HTML 或 JavaScript 插入到购物车的特定位置。这让你可以完全控制购物车体验中的布局、可见性和条件内容。

使用本指南了解各个位置的行为以及你的内容将显示在哪里。

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

<div id="above-announcementsrewards">
  #### **Above announcements/rewards（公告/奖励上方）**
</div>

直接渲染在购物车头部下方、所有模块之前。\
可用于添加全站消息、标记或动态横幅。

<div id="below-headerannouncementsrewards">
  #### **Below header/announcements/rewards（头部/公告/奖励下方）**
</div>

直接显示在 Announcements 和 Rewards 模块之后、产品列表之前。

<div id="between-each-line-item">
  #### **Between each line item（每个行商品之间）**
</div>

在购物车中每个产品之后重复显示你的 HTML。\
非常适合展示免责声明或产品特定的附加信息。

<div id="below-cart-items">
  #### **Below cart items（购物车商品下方）**
</div>

渲染在产品列表下方、所有购物车行商品之后。可用于放置应显示在产品之下、upsell 和附加项目之上的消息、横幅或自定义内容。

<div id="above-footeradd-ons">
  #### **Above footer/add-ons（页脚/附加项目上方）**
</div>

显示在产品列表和 upsell 下方，但在 Add-ons 部分之上。\
非常适合放置引导至保修或运输保障优惠的消息。

<div id="above-checkout-button">
  #### **Above checkout button（结账按钮上方）**
</div>

显示在页脚区域内、结账按钮和小计的正上方。\
常用于展示价格明细、运费通知或条款。

<div id="below-checkout-button">
  #### **Below checkout button（结账按钮下方）**
</div>

同样位于页脚，位置在结账按钮之后、快捷支付按钮之前。Add-ons 渲染在页脚顶部，远在此位置之上。\
适用于次要 CTA 或法律声明。

<div id="bottom-of-cart">
  #### **Bottom of cart（购物车底部）**
</div>

显示在页脚区域之外、cart drawer 的最底部。\
不会继承页脚的背景颜色。

<div id="on-empty-cart-screen">
  #### **On empty cart screen（空购物车界面）**
</div>

仅在购物车为空时显示。\
直接显示在 "Your cart is empty" 消息**下方**、推荐模块上方——适合放置一行辅助文字或指向某个系列的链接。

<div id="scripts-before-load">
  #### **Scripts (Before Load)（加载前脚本）**
</div>

不可见的位置，用于在购物车加载**之前**运行 JavaScript。\
可用于定义变量、设置条件或修改 Upcart 的行为。

* 所有自定义 HTML 位置均在以下路径管理：\
  **Upcart > Cart Editor > Settings > Custom HTML**

<div id="visual-reference">
  ## 视觉参考
</div>

要清楚地了解每个位置在购物车中的渲染位置，请参考下方带标注的布局图

<Frame>
  <img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/html-locations-labeled-cart-drawer.gif?s=fd801e149233b51066ee15010556c375" alt="带标注的 Upcart cart drawer，显示每个自定义 HTML 位置的渲染位置" width="700" height="1080" data-path="images/upcart/html-locations-labeled-cart-drawer.gif" />
</Frame>