> ## 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 CSS 选择器库（V1）

> 本文列出 Upcart 版本 1 中可用的 CSS 选择器，让你可以为旧版 cart drawer 应用自定义样式。

📝 **注意**

V1 选择器针对的是旧版 cart drawer 模块。如果你已升级到 V2，本页面的模块选择器将不再匹配——请参阅 [V2 CSS 选择器库](/zh/upcart/upcart_css_selector_library_v2)获取当前的选择器。

有两个例外值得了解：`.upcart-cart` 和 `.upcart-cart-body` 位于抽屉外壳而非模块上，因此它们在 V2 上仍然适用。针对整个抽屉的布局修复（限制其宽度、阻止水平溢出）在升级后仍然有效。

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

如果你想更改购物车的外观，例如隐藏价格、调整文本大小或重新定位按钮，这里就是起点。这个 CSS 选择器库提供了使用自定义代码进行这些更改所需的工具。

本文汇总了所有可用的 CSS 选择器，并附有编写和测试样式的实用资源链接。

<div id="note">
  ## **注意**
</div>

虽然我们提供此库以方便你使用，但 Upcart 支持团队**无法协助构建或修复自定义代码。** 这是我们[自定义政策](/zh/upcart/upcart_customization_policy)的一部分。

我们建议咨询 Shopify 专家以获取自定义代码解决方案。

[查看 Shopify 专家](https://www.shopify.com/ca/partners/directory)

<div id="how-to-use-upcart-css-selectors">
  # 如何使用 Upcart CSS 选择器
</div>

本文是一个可用于设置和自定义 Upcart cart drawer 样式的 **CSS 选择器库**。每个选择器都针对购物车的特定部分——例如头部、产品行、upsell、奖励模块等。

你可以使用这些选择器来：

* 隐藏元素或重新设计其样式
* 更改间距、字体或颜色
* 根据商店的品牌形象调整布局

要应用你的 CSS，请打开 Cart Editor，前往 **Settings**，选择 **Custom CSS** 选项卡，然后将样式粘贴到编辑器中。

<div id="what-to-know-before-adding-css">
  # 添加 CSS 前须知
</div>

在开始编写自定义样式之前，这里有一些帮助你顺利进行的提示。它们能让你更轻松地测试更改、避免意外，并在不破坏购物车任何功能的情况下获得想要的外观。

<div id="css-customization-checklist">
  ## CSS 自定义检查清单：
</div>

* **在安全环境中测试：** 上线前尽可能使用预览或未发布的主题。

* **从小处着手：** 一次只做一个更改，这样更容易追踪哪些有效、哪些无效。

* **将样式粘贴到正确的位置：** 使用 **Upcart Editor > Settings > Custom CSS** 字段添加代码。

* **使用检查工具：** 在浏览器中右键点击元素并选择 **Inspect**（检查），以实时查找和测试选择器。

* **避免想当然：** 并非所有元素都会出现在所有购物车中——请使用不同的购物车（有/无奖励、upsell 等）进行测试。

<div id="css-selectors-library">
  # CSS 选择器库
</div>

以下是 Upcart 中所有可用 CSS 选择器的列表。它们按**模块**分组（如头部、产品、upsell 等），方便你找到想要自定义的部分。编写自己的样式时可将其用作参考。

<div id="general-settings">
  ## 常规设置
</div>

<div id="design-module">
  ### 设计模块
</div>

|                     |                   |
| ------------------- | ----------------- |
| **CSS 选择器**         | **说明**            |
| `.upcart-cart`      | cart drawer 的主容器。 |
| `.upcart-cart-body` | 承载购物车的主要内容。       |
| `.upcart-backdrop`  | 显示在购物车后面的深色遮罩层。   |

<div id="header-module">
  ### 头部模块
</div>

|                                    |                       |
| ---------------------------------- | --------------------- |
| **CSS 选择器**                        | **说明**                |
| `.upcart-header`                   | 购物车头部的容器，包括标志和关闭按钮。   |
| `.upcart-header-close-button`      | 用于关闭 cart drawer 的按钮。 |
| `.upcart-header-close-button-icon` | 关闭按钮内显示的图标。           |
| `.upcart-header-logo`              | 在购物车头部显示标志图片。         |
| `.upcart-header-text`              | 购物车头部显示的标题文本。         |

<div id="body-settings">
  ## 主体设置
</div>

<div id="announcements-module">
  ### 公告模块
</div>

|                                 |               |
| ------------------------------- | ------------- |
| **CSS 选择器**                     | **说明**        |
| `.upcart-announcement`          | 购物车内的横幅或公告部分。 |
| `.upcart-announcement-skeleton` | 公告部分的骨架占位符。   |

<div id="rewards-module">
  ### 奖励模块
</div>

|                                    |                |
| ---------------------------------- | -------------- |
| **CSS 选择器**                        | **说明**         |
| `.upcart-rewards`                  | 奖励部分的主容器。      |
| `.upcart-rewards-message`          | 显示与奖励相关的进度消息。  |
| `.upcart-rewards-bar-background`   | 奖励进度条的背景层。     |
| `.upcart-rewards-bar-foreground`   | 奖励进度条的前景/进度填充。 |
| `.upcart-rewards-tier`             | 代表奖励系统中的特定层级。  |
| `.upcart-rewards-tier-circle`      | 奖励层级的可视化圆圈指示器。 |
| `.upcart-rewards-tier-icon`        | 奖励层级圆圈内的图标。    |
| `.upcart-rewards-tier-description` | 每个奖励层级下方的说明文本。 |
| `.upcart-rewards-skeleton`         | 奖励部分的骨架容器。     |
| `.upcart-rewards-message-skeleton` | 奖励进度消息的骨架。     |
| `.upcart-rewards-bar-skeleton`     | 奖励进度条的骨架。      |

<div id="recommendations-module">
  ### 推荐模块
</div>

|                                           |                  |
| ----------------------------------------- | ---------------- |
| **CSS 选择器**                               | **说明**           |
| `.upcart-recommendation-module`           | 整个产品推荐模块的包裹层。    |
| `.upcart-recommendations-title`           | 推荐部分的标题文本。       |
| `.upcart-recommendations-shop-now-button` | 直接从购物车购买推荐产品的按钮。 |

<div id="subscription-upgrades-module">
  ### 订阅升级模块
</div>

|                                         |                    |
| --------------------------------------- | ------------------ |
| **CSS 选择器**                             | **说明**             |
| `.upcart-subscription-upgrade-section`  | 在购物车中推广订阅升级的部分。    |
| `.upcart-subscription-upgrade-button`   | 用于触发订阅升级的按钮。       |
| `.upcart-subscription-upgrade-dropdown` | 用于选择可用订阅升级选项的下拉菜单。 |

<div id="upsells-module">
  ### Upsell 模块
</div>

|                                        |                      |
| -------------------------------------- | -------------------- |
| **CSS 选择器**                            | **说明**               |
| `.upcart-upsells`                      | upsell 部分的主容器。       |
| `.upcart-upsells-module`               | upsell 模块的包裹层。       |
| `.upcart-upsells-title`                | upsell 部分的标题。        |
| `.upcart-upsells-button`               | 将 upsell 商品加入购物车的按钮。 |
| `.upcart-upsell-item-card`             | 每个 upsell 产品的卡片布局。   |
| `.upcart-upsell-item-title`            | upsell 产品的标题。        |
| `.upcart-upsell-item-image-wrapper`    | upsell 产品图片的包裹层。     |
| `.upcart-upsell-item-image`            | upsell 产品的图片。        |
| `.upcart-upsell-item-price`            | upsell 商品的价格。        |
| `.upcart-upsell-item-price-row`        | 包含价格和对比价格的行。         |
| `.upcart-upsell-item-compare-price`    | upsell 的原价（划线价）。     |
| `.upcart-upsell-item-variant-selector` | upsell 产品的款式下拉菜单。    |

<div id="product-settings">
  ### 产品设置
</div>

|                                      |                |
| ------------------------------------ | -------------- |
| **CSS 选择器**                          | **说明**         |
| `.upcart-products-section`           | 购物车中所有产品的容器。   |
| `.upcart-product-item`               | 单个产品项的包裹层。     |
| `.upcart-product-title`              | 购物车中产品的名称。     |
| `.upcart-product-title-link`         | 包裹产品标题的链接。     |
| `.upcart-item-prices-row`            | 包含价格信息的行。      |
| `.upcart-item-price`                 | 向客户显示的最终价格。    |
| `.upcart-item-compare-price`         | 原价（划线价）。       |
| `.upcart-product-savings`            | 购物车商品的具体节省金额。  |
| `.upcart-item-option`                | 尺寸或颜色等产品选项的容器。 |
| `.upcart-item-option-category`       | 产品选项类别的标签。     |
| `.upcart-item-option-value`          | 所选产品选项的值。      |
| `.upcart-item-properties`            | 产品附加元数据的包裹层。   |
| `.upcart-item-property`              | 单个产品属性。        |
| `.upcart-item-property-subscription` | 显示商品的订阅详情。     |
| `.upcart-product-quantity-input`     | 产品的数量输入字段。     |
| `.upcart-product-quantity-minus`     | 减少数量的按钮。       |
| `.upcart-product-quantity-plus`      | 增加数量的按钮。       |
| `.upcart-product-image-wrapper`      | 产品图片的包裹层。      |
| `.upcart-quantity-warning`           | 数量限制消息的容器。     |
| `.upcart-quantity-warning-text`      | 向用户显示的数量警告文本。  |

<div id="footer-settings">
  ## 页脚设置
</div>

<div id="add-ons-module">
  ### 附加项目模块
</div>

|                                      |                 |
| ------------------------------------ | --------------- |
| **CSS 选择器**                          | **说明**          |
| `.upcart-addons`                     | 附加项目部分的主容器。     |
| `.upcart-addons-title`               | 附加项目部分的标题。      |
| `.upcart-addons-product-description` | 附加产品的描述。        |
| `.upcart-addons-price`               | 附加产品的价格。        |
| `.upcart-addons-compare-price`       | 附加产品的原价（划线价）。   |
| `.upcart-addons-toggle`              | 添加/移除附加项目的切换开关。 |
| `.upcart-addons-image-wrapper`       | 附加项目图片的包裹层。     |

<div id="discount-codes-module">
  ### 折扣码模块
</div>

<div id="savings-row">
  ### 节省金额行
</div>

|                                  |                           |
| -------------------------------- | ------------------------- |
| **CSS 选择器**                      | **说明**                    |
| `.upcart-savings-row`            | 购物车中整个折扣/节省金额部分的包裹层。      |
| `.styles_Footer__savingsCodes__` | 标签（"Discounts"）及相关折扣码的容器。 |
| `.upcart-discount-code-badge`    | UI 中显示的每个折扣码徽章的包裹层。       |
| `.upcart-discount-code-icon`     | 折扣图标（例如 SVG 票券符号）的容器。     |
| `.upcart-discount-code-text`     | 折扣码的文本表示（例如 "AUTO 5"）。    |
| `.upcart-savings-amount`         | 显示折扣实际节省的金额。              |

<div id="express-payments-module">
  ### 快捷支付模块
</div>

<div id="note-2">
  ## 注意
</div>

Upcart 中的快捷支付按钮仅作为视觉容器，其中的内容和功能完全由 Shopify 控制。因此，我们无法修改它们的行为或外观。更多信息请参阅[**快捷支付模块**](/zh/upcart/express_payments_module)指南。

|                                         |                   |
| --------------------------------------- | ----------------- |
| **CSS 选择器**                             | **说明**            |
| `.upcart-express-pay-buttons-container` | 所有快捷支付按钮的容器。      |
| `.upcart-express-pay-buttons-row`       | 快捷支付按钮的行布局。       |
| `.upcart-express-pay-button`            | 快捷支付按钮的通用选择器。     |
| `.upcart-express-pay-button-shop-pay`   | Shop Pay 的专用按钮。   |
| `.upcart-express-pay-button-google-pay` | Google Pay 的专用按钮。 |
| `.upcart-express-pay-button-paypal`     | PayPal 的专用按钮。     |
| `.upcart-express-pay-button-apple-pay`  | Apple Pay 的专用按钮。  |
| `.upcart-express-pay-button-amazon-pay` | Amazon Pay 的专用按钮。 |
| `.upcart-express-pay-button-meta-pay`   | Meta Pay 的专用按钮。   |

<div id="trust-badges-module">
  ### 信任徽章模块
</div>

|                             |               |
| --------------------------- | ------------- |
| **CSS 选择器**                 | **说明**        |
| `.upcart-trust-badge`       | 信任徽章的容器。      |
| `.upcart-trust-badge-image` | 信任徽章中使用的图片元素。 |

<div id="additional-notes-module">
  ### 附加备注模块
</div>

|                                                   |                   |
| ------------------------------------------------- | ----------------- |
| **CSS 选择器**                                       | **说明**            |
| `.NotesModule_NotesModule__`                      | 附加备注的容器。          |
| `.NotesModule_NotesModule__titleContainer__`      | 备注部分的标题容器         |
| `.NotesModule_NotesModule__dropdownContainer__`   | 备注部分下拉区域的标题       |
| `.NotesModule_NotesModule__textModule__ textarea` | 为购物车添加自定义备注的输入区域。 |

<div id="upcart-settings-module">
  ## Upcart 设置模块
</div>

<div id="skeleton-selectors">
  ### 骨架选择器
</div>

|                                                  |                 |
| ------------------------------------------------ | --------------- |
| **CSS 选择器**                                      | **说明**          |
| `.upcart-skeleton`                               | 购物车的通用骨架加载器包裹层。 |
| `.upcart-product-item-skeleton`                  | 产品加载时的占位符。      |
| `.upcart-product-image-skeleton`                 | 产品图片的占位符。       |
| `.upcart-product-title-skeleton`                 | 产品标题文本的占位符。     |
| `.upcart-product-price-container-skeleton`       | 价格区域的占位符。       |
| `.upcart-product-quantity-skeleton`              | 数量控件的占位符。       |
| `.upcart-item-option-skeleton`                   | 商品选项的占位符。       |
| `.upcart-upsells-module-skeleton`                | upsell 模块的骨架。   |
| `.upcart-upsells-title-skeleton`                 | upsell 部分标题的骨架。 |
| `.upcart-upsell-item-image-skeleton`             | upsell 产品图片的骨架。 |
| `.upcart-upsell-item-title-skeleton`             | upsell 产品标题的骨架。 |
| `.upcart-upsell-item-price-skeleton`             | upsell 产品价格的骨架。 |
| `.upcart-upsells-button-skeleton`                | upsell 操作按钮的骨架。 |
| `.upcart-trust-badge-skeleton`                   | 信任徽章容器的骨架。      |
| `.upcart-trust-badge-image-skeleton`             | 信任徽章图片的骨架。      |
| `.upcart-announcement-skeleton`                  | 公告的骨架占位符。       |
| `.upcart-rewards-skeleton`                       | 奖励部分的骨架。        |
| `.upcart-rewards-message-skeleton`               | 奖励消息的骨架。        |
| `.upcart-rewards-bar-skeleton`                   | 奖励进度条的骨架。       |
| `.upcart-addons-skeleton`                        | 附加项目部分的骨架。      |
| `.upcart-addons-image-wrapper-skeleton`          | 附加产品图片的骨架。      |
| `.upcart-addons-skeleton-text-container`         | 附加项目中文本内容的骨架。   |
| `.upcart-discount-code-module-skeleton`          | 折扣码模块的骨架。       |
| `.upcart-discount-code-input-skeleton`           | 折扣码输入框的骨架。      |
| `.upcart-discount-code-button-skeleton`          | 折扣码应用按钮的骨架。     |
| `.upcart-checkout-button-container-skeleton`     | 结账按钮包裹层的骨架。     |
| `.upcart-checkout-button-skeleton`               | 结账按钮的骨架。        |
| `.upcart-express-pay-buttons-container-skeleton` | 快捷支付容器的骨架。      |
| `.upcart-express-pay-button-skeleton`            | 单个快捷支付按钮的骨架。    |

<div id="helpful-resources-to-get-started">
  ## **入门实用资源：**
</div>

* **[自定义 CSS 入门](/zh/upcart/custom_css)：** 了解如何在 Upcart 中安全地添加自定义 CSS。
* **[Upcart 自定义简介](/zh/upcart/getting_started_with_upcart_customizations)：** 了解自定义的工作原理以及从何开始。
* **[使用 AI 为 Upcart 编写自定义代码](/zh/upcart/ai_prompt_suggestions_for_adding_custom_code_to_your_upcart_settings)：** 通过简单的提示词获得编写 CSS 或 JavaScript 的帮助。
* **[提升购物车转化率的最佳实践](/zh/upcart/best_practices_to_increase_upcart_conversions)：** 使用经过验证的技巧优化你的购物车设计。