向购物车抽屉添加自定义 HTML 或 CSS

请先使用内置设置调整颜色、图片和文本。对于需要使用自定义标记或样式的修改，可以使用自定义 HTML 和 CSS。

添加自定义 HTML 区块

(1) 在 HTML 代码编辑器中输入备注标记。(2) 编辑器会说明预览将移除脚本、框架和交互属性。请在店铺中检查最终行为。

每个区域最多可添加 10 个自定义 HTML 区块。每个区块最多接受 10,000 个字符；完整的购物车配置也有大小限制。

(1) 将选择器限定在 #bxc-drawer 和备注类名范围内。此规则会为该备注添加蓝色左边框和内边距。

打开样式，滚动到底部的高级，然后打开自定义 CSS。请将规则限定在抽屉范围内，例如使用#bxc-drawer，避免意外修改主题其他部分的样式。替换现有 CSS 前，请保留一份副本。此字段最多接受 10,000 个字符。

此字段是代码编辑器：输入时会为 CSS 添加颜色、建议属性名称，并将无法读取的规则标记为红色，因此缺少大括号等问题会在保存前显示。格式化可整理缩进。

(1) 公告位于商品上方。(2) 简短徽章标签位于商品下方。(3) 自定义备注带有其专属的蓝色边框。商品控件和结账功能仍可正常使用。

此示例会添加品牌备注。请使用 HTML 区块添加其内容：

<p class="aurelia-cart-note">
  <strong>Aurelia Botanicals</strong><br>
  Everyday skincare essentials.
</p>

然后在自定义 CSS 中添加作用域规则，为该备注添加左边框：

#bxc-drawer .aurelia-cart-note {
  border-left: 3px solid #334fb4;
  padding-left: 12px;
}

保存并在桌面设备和手机上检查备注、商品控件及结账按钮。

预览会显示自定义 HTML 布局，但会移除脚本和交互属性。在店铺中，自定义标记会被视为主题代码。普通插入的<script>标签不会自动执行，因此此字段不是通用的脚本安装器。

请仅粘贴您了解的代码，或已与开发者审核过的代码。在桌面设备和移动设备上检查发布后的结果，包括添加商品和打开结账页面。如果抽屉在修改后出现问题，请移除该自定义代码，再次保存并重新测试。