⚠️ 重要提示 这些选择器仅适用于 Upcart 购物车模块的版本 2（V2）。如果你使用的是版本 1（V1），这些选择器将不起作用。对于 V1 购物车，请参阅**版本 1 CSS 选择器文档**，其中涵盖旧版模块结构和选择器。要检查你使用的版本，请打开 Cart Editor 并查看左侧菜单顶部。当购物车中的每个模块都升级到 V2 后，那里会出现 Cart version 下拉菜单；如果你没有看到它，说明你的购物车仍有 V1 模块。有关从 V1 迁移到 V2 的更多信息，请参阅 V2.0 迁移指南。

概览

如果你想更改购物车的外观，例如隐藏价格、调整文本大小或重新定位按钮，这里就是起点。这个 CSS 选择器库提供了使用自定义代码进行这些更改所需的工具。本文汇总了所有可用的 CSS 选择器，并附有编写和测试样式的实用资源链接。

注意

虽然我们提供此库以方便你使用，但 Upcart 支持团队无法协助构建或修复自定义代码。 这是我们自定义政策的一部分。我们建议咨询 Shopify 专家以获取自定义代码解决方案。查看 Shopify 专家

如何使用 Upcart CSS 选择器

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

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

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

添加 CSS 前须知

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

CSS 自定义检查清单：

在安全环境中测试： 上线前尽可能使用预览或未发布的主题。
从小处着手： 一次只做一个更改，这样更容易追踪哪些有效、哪些无效。
将样式粘贴到正确的位置： 使用 Upcart Editor > Settings > Custom CSS 字段添加代码。
使用检查工具： 在浏览器中右键点击元素并选择 Inspect（检查），以实时查找和测试选择器。
避免想当然： 并非所有元素都会出现在所有购物车中——请使用不同的购物车（有/无奖励、upsell 等）进行测试。

以下选择器适用于 Upcart 购物车模块的版本 2。V2 引入了带有 public 和 internal 类名前缀的结构化命名系统。

V2 选择器的重要准则

⚠️ 仅使用 public 选择器进行自定义

Public 选择器（以 upcart-public- 为前缀）属于稳定 API 的一部分，可安全用于自定义样式
Internal 选择器（以 upcart-internal- 为前缀）保留供内部使用，可能随时更改，恕不另行通知

✅ 应该： 使用 public 类名来设置样式

/* ✅ Correct usage */   
.upcart-public-header {     
    font-size: 18px;     
    font-weight: bold;   
}

❌ 不应该： 覆盖 internal 类名或使用深层选择器

/* ❌ Avoid this */   
.upcart-internal-header {     
    font-size: 18px;     
    font-weight: bold;   
}    
  
/* ❌ Avoid this */   
.upcart-public-upsell div a {     
   font-size: 18px;     
   font-weight: bold;   
}

CSS 选择器

通用组件


CSS 选择器	说明
`.upcart-public-skeleton`	购物车的通用骨架加载器包裹层。
`.upcart-public-component__button`	各模块通用的按钮组件。
`.upcart-public-component-loader`	加载中旋转图标组件。
`.upcart-public-component-tag`	标签组件包裹层。
`.upcart-public-component-tag__icon`	标签内的图标。
`.upcart-public-component-tag__text`	标签的文本内容。
`.upcart-public-component-tag__remove-button`	可移除标签内的移除（“x”）按钮。
`.upcart-public-component-collapse__dropdown-container`	可折叠下拉部分的容器。
`.upcart-public-component-collapse__expand-icon`	指示展开/折叠状态的图标。
`.upcart-public-component-carousel__container`	轮播的外层包裹层。
`.upcart-public-component-carousel__window`	幻灯片滚动所在的裁剪窗口。
`.upcart-public-component-carousel__track`	承载幻灯片的移动轨道。
`.upcart-public-component-carousel__slide`	单个轮播幻灯片。
`.upcart-public-component-carousel__button`	上一个/下一个箭头按钮。
`.upcart-public-component-progress-bar`	普通（无分段）进度条组件。
`.upcart-public-component-progress-bar__track`	普通进度条的轨道。
`.upcart-public-component-progress-bar__fill`	普通进度条的已填充部分。
`.upcart-public-component-progress-bar__milestone`	普通进度条上的里程碑标记。
`.upcart-public-component-progress-bar__milestone-icon`	普通进度条里程碑处的图标。
`.upcart-public-component-progress-bar__milestone-label`	普通进度条里程碑处的标签。

头部模块


CSS 选择器	说明
`.upcart-public-header`	购物车头部的主容器。
`.upcart-public-header__logo`	购物车头部的标志图片。
`.upcart-public-header__close-button`	用于关闭 cart drawer 的按钮。
`.upcart-public-header__close-button-icon`	关闭按钮内显示的图标。

公告模块


CSS 选择器	说明
`.upcart-public-announcement`	购物车内的横幅或公告部分。
`.upcart-public-announcement-skeleton`	公告栏的骨架加载器。

备注模块


CSS 选择器	说明
`.upcart-public-notes`	备注部分的主容器。
`.upcart-public-notes__text-container`	备注文本区域的容器。
`.upcart-public-notes__textarea`	为购物车添加自定义备注的文本输入区域。

折扣码模块


CSS 选择器	说明
`.upcart-public-discount-code`	折扣码部分的主容器。
`.upcart-public-discount-code__form`	折扣码输入的表单包裹层。
`.upcart-public-discount-code__input-wrapper`	折扣码输入字段的包裹层。
`.upcart-public-discount-code__input`	输入折扣码的输入字段。
`.upcart-public-discount-code__suffix`	输入字段的后缀元素。
`.upcart-public-discount-code__error`	无效折扣码的错误消息显示。
`.upcart-public-discount-code__button`	应用折扣码的按钮。
`.upcart-public-discount-code__skeleton`	折扣码模块的骨架占位符。
`.upcart-public-discount-code__skeleton-input`	折扣码输入字段的骨架。
`.upcart-public-discount-code__skeleton-button`	折扣码应用按钮的骨架。

信任徽章模块


CSS 选择器	说明
`.upcart-public-trust-badges`	信任徽章的容器。
`.upcart-public-trust-badges__image`	信任徽章中使用的图片元素。

阶梯奖励模块


CSS 选择器	说明
`.upcart-public-rewards`	奖励部分的主容器。
`.upcart-public-rewards__message`	显示与奖励相关的进度消息。
`.upcart-public-rewards__bar`	奖励进度条的容器。
`.upcart-public-component-segmented-progress-bar`	分段进度条组件。
`.upcart-public-component-segmented-progress-bar__segments-container`	所有进度条分段的容器。
`.upcart-public-component-segmented-progress-bar__segment`	进度条的单个分段。
`.upcart-public-component-segmented-progress-bar__segment-fill`	进度条分段的填充部分。
`.upcart-public-component-segmented-progress-bar__milestone`	进度条上的里程碑标记。
`.upcart-public-component-segmented-progress-bar__milestone--bottom`	位于底部的里程碑。
`.upcart-public-component-segmented-progress-bar__milestone--top`	位于顶部的里程碑。
`.upcart-public-component-segmented-progress-bar__milestone--middle`	位于中间的里程碑。
`.upcart-public-component-segmented-progress-bar__milestone-icon`	里程碑处显示的图标。
`.upcart-public-component-segmented-progress-bar__milestone-label`	里程碑的标签文本。
`.upcart-public-component-segmented-progress-bar__milestone-label--align-right`	右对齐的里程碑标签。
`.upcart-public-component-segmented-progress-bar__milestone-label--align-center`	居中对齐的里程碑标签。
`.upcart-public-rewards__skeleton`	奖励部分的骨架容器。
`.upcart-public-rewards__skeleton-message`	奖励进度消息的骨架。
`.upcart-public-rewards__skeleton-bar`	奖励进度条的骨架。

购物车商品模块


CSS 选择器	说明
`.upcart-public-cart-items`	购物车商品列表的主包裹层。
`.upcart-public-cart-item`	单个购物车商品的包裹层。
`.upcart-public-cart-items-skeleton__content`	购物车商品的骨架加载器。
`.upcart-public-component-product-tile`	购物车中单个产品项的包裹层。
`.upcart-public-component-product-tile__content`	产品卡片的内容区域。
`.upcart-public-component-product-tile__image-wrapper`	产品图片的包裹层。
`.upcart-public-component-product-tile__image`	购物车中产品的图片。
`.upcart-public-component-product-tile__info`	产品卡片的信息区域。
`.upcart-public-component-product-tile__header`	产品卡片的头部区域。
`.upcart-public-component-product-tile__product-title`	购物车中产品的名称。
`.upcart-public-component-product-tile__title-link`	包裹产品标题的链接。
`.upcart-public-component-product-tile__remove-button`	从购物车中移除产品的按钮。
`.upcart-public-component-product-tile__variant`	款式信息显示。
`.upcart-public-component-product-tile__properties`	产品附加元数据的包裹层。
`.upcart-public-component-product-tile__bundle`	捆绑信息区域。
`.upcart-public-component-product-tile__product-pricing`	产品卡片的价格区域。
`.upcart-public-component-product-tile__price-compare-at`	原价（划线价）。
`.upcart-public-component-product-tile__price`	向客户显示的最终价格。
`.upcart-public-component-product-tile__price-group`	价格和原价对比价格的包裹层。
`.upcart-public-component-product-tile__savings`	购物车商品的具体节省金额。
`.upcart-public-component-product-tile__controls`	控件区域（数量等）。
`.upcart-public-component-product-tile__quantity-selector`	数量选择器包裹层。
`.upcart-public-component-product-tile__quantity-minus`	减少数量的按钮。
`.upcart-public-component-product-tile__quantity-plus`	增加数量的按钮。
`.upcart-public-component-product-tile__discount-codes`	应用于该商品的折扣码。
`.upcart-public-component-product-tile__subscription-upgrade`	订阅升级区域。
`.upcart-public-component-product-tile__subscription-upgrade-btn`	应用订阅升级的按钮。
`.upcart-public-component-product-tile__select-wrapper`	选择下拉菜单的包裹层。
`.upcart-public-component-product-tile__select`	选择下拉菜单元素。
`.upcart-public-product-properties__subscription`	显示商品的订阅详情。
`.upcart-public-product-properties__item`	单个产品属性。
`.upcart-public-product-properties__link`	产品属性内的链接。
`.upcart-public-cart-items__key-value-pair`	商品属性的键值对显示。
`.upcart-public-bundle-properties`	捆绑属性的容器。
`.upcart-public-bundle-properties__variant-title`	捆绑商品的款式标题。
`.upcart-public-bundle-properties__header`	捆绑属性区域的头部。
`.upcart-public-bundle-properties__item-components`	捆绑商品组件的容器。
`.upcart-public-bundle-properties__item-component-row`	每个捆绑商品组件的行。
`.upcart-public-bundle-properties__image-wrapper`	捆绑商品图片的包裹层。
`.upcart-public-bundle-properties__content`	捆绑商品的内容区域。
`.upcart-public-bundle-properties__product-title`	捆绑商品的产品标题。

附加项目模块


CSS 选择器	说明
`.upcart-public-addons`	附加项目部分的主容器。
`.upcart-public-addons__image-wrapper`	附加项目图片的包裹层。
`.upcart-public-addons__content-wrapper`	附加项目信息的内容包裹层。
`.upcart-public-addons__content-title-wrapper`	附加项目标题的包裹层。
`.upcart-public-addons__content-title`	附加产品的标题。
`.upcart-public-addons__content-price`	附加项目的价格区域。
`.upcart-public-addons__compare-at-price`	附加产品的原价（划线价）。
`.upcart-public-addons__price`	附加产品的当前价格。
`.upcart-public-addons__content-description`	附加产品的描述。
`.upcart-public-addons__toggle-wrapper`	附加项目切换开关的包裹层。
`.upcart-public-addons__toggle`	添加/移除附加项目的切换开关。
`.upcart-public-addons__toggle-switch`	切换开关的开关元素。
`.upcart-public-addons__toggle-slider`	切换开关的滑块元素。
`.upcart-public-addons__skeleton`	附加项目部分的骨架占位符。
`.upcart-public-addons__skeleton-image`	附加产品图片的骨架。
`.upcart-public-addons__skeleton-text`	附加项目中文本内容的骨架。

快捷支付模块


CSS 选择器	说明
`.upcart-public-express-payments__container`	快捷支付按钮的容器。

购物车摘要模块


CSS 选择器	说明
`.upcart-public-cart-summary`	购物车摘要的主容器。
`.upcart-public-cart-summary__discount-codes`	摘要中折扣码的容器。
`.upcart-public-cart-summary__discount-label`	折扣部分的标签。
`.upcart-public-cart-summary__slide-codes`	折扣码的滑动容器。
`.upcart-public-cart-summary__total-discount`	折扣总额显示。

入门实用资源：

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


CSS 选择器	说明
`.upcart-public-upsell`	upsell 模块的主包裹层。
`.upcart-public-upsell__header`	upsell 部分的头部。
`.upcart-public-upsell__title`	upsell 部分的标题文本。
`.upcart-public-upsell__shop-now-button`	upsell 商品上的 Shop Now 按钮。
`.upcart-public-upsell__vertical-layout-wrapper`	垂直 upsell 布局的包裹层。
`.upcart-public-component-upsell-tile`	每个 upsell/推荐产品的卡片布局。
`.upcart-public-component-upsell-tile__image-container`	upsell 产品图片的容器。
`.upcart-public-component-upsell-tile__image`	upsell 产品的图片。
`.upcart-public-component-upsell-tile__info`	upsell 卡片的信息区域。
`.upcart-public-component-upsell-tile__title-link`	产品标题的链接包裹层。
`.upcart-public-component-upsell-tile__title`	upsell 产品的标题。
`.upcart-public-component-upsell-tile__rating-row`	包含产品评分的行。
`.upcart-public-component-upsell-tile__stars`	星级评分显示。
`.upcart-public-component-upsell-tile__star--partial`	小数评分的部分星星。
`.upcart-public-component-upsell-tile__reviews`	评价数量显示。
`.upcart-public-component-upsell-tile__price-row`	包含价格信息的行。
`.upcart-public-component-upsell-tile__price-compare-at`	upsell 的原价（划线价）。
`.upcart-public-component-upsell-tile__price`	upsell 商品的当前价格。
`.upcart-public-component-upsell-tile__variant-row`	包含款式选择的行。
`.upcart-public-upsell__skeleton`	upsell 模块的骨架占位符。
`.upcart-public-upsell__skeleton-title`	upsell 部分标题的骨架。
`.upcart-public-upsell__skeleton-image`	upsell 产品图片的骨架。
`.upcart-public-upsell__skeleton-product-title`	upsell 产品标题的骨架。
`.upcart-public-upsell__skeleton-product-price`	upsell 产品价格的骨架。

购物车功能参考

CSS 参考

样式定制方案

功能定制方案

自定义模板

Upcart 公共 API

Upcart CSS 选择器库（V2）

概览

注意

如何使用 Upcart CSS 选择器

添加 CSS 前须知

CSS 自定义检查清单：

V2 选择器的重要准则

CSS 选择器

通用组件

头部模块

公告模块

推荐和 Upsell 模块

备注模块

折扣码模块

信任徽章模块

阶梯奖励模块

购物车商品模块

附加项目模块

快捷支付模块

购物车摘要模块

入门实用资源：

​概览

​注意

​

​如何使用 Upcart CSS 选择器

​添加 CSS 前须知

​CSS 自定义检查清单：

​V2 选择器的重要准则

​

​CSS 选择器

​通用组件

​

​头部模块

​公告模块

​推荐和 Upsell 模块

​备注模块

​折扣码模块

​信任徽章模块

​阶梯奖励模块

​购物车商品模块

​附加项目模块

​快捷支付模块

​购物车摘要模块

​入门实用资源：

​

​

概览

注意

如何使用 Upcart CSS 选择器

添加 CSS 前须知

CSS 自定义检查清单：

V2 选择器的重要准则

CSS 选择器

通用组件

头部模块

公告模块

推荐和 Upsell 模块

备注模块

折扣码模块

信任徽章模块

阶梯奖励模块

购物车商品模块

附加项目模块

快捷支付模块

购物车摘要模块

入门实用资源：