Skip to main content
📝 注意 V1 选择器针对的是旧版 cart drawer 模块。如果你已升级到 V2,本页面的模块选择器将不再匹配——请参阅 V2 CSS 选择器库获取当前的选择器。 有两个例外值得了解:.upcart-cart.upcart-cart-body 位于抽屉外壳而非模块上,因此它们在 V2 上仍然适用。针对整个抽屉的布局修复(限制其宽度、阻止水平溢出)在升级后仍然有效。

概览

如果你想更改购物车的外观,例如隐藏价格、调整文本大小或重新定位按钮,这里就是起点。这个 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 等)进行测试。

CSS 选择器库

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

常规设置

设计模块

头部模块

主体设置

公告模块

奖励模块

推荐模块

订阅升级模块

Upsell 模块

产品设置

附加项目模块

折扣码模块

节省金额行

快捷支付模块

注意

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

信任徽章模块

附加备注模块

Upcart 设置模块

骨架选择器

入门实用资源: