Skip to main content

​
概述

此部分允许你更改现有购物车元素的外观和风格，或为通过编辑器添加的自定义 HTML 应用样式。

​
在哪里找到它

前往：
Upcart > Cart Editor > Settings > Custom CSS
Settings 是一行标签页；Custom CSS 是其中之一，与 Custom HTML 并列。如果看不到它，它位于 More settings 之下。

​
工作原理

你可以添加 CSS 来：
  • 为默认购物车元素设置样式
  • 修改自定义 HTML 的外观
  • 调整间距、对齐、排版等
在你输入时，自动补全弹窗会推荐有效的 Upcart 选择器以加快编辑速度。选择建议项会自动补全规则并帮助你组织代码。如果更改未按预期显示，请查看常见排查建议，例如在浏览器和 Upcart 编辑器中刷新缓存、检查 CSS 放置位置，以及确保 CSS 规则具有适当的优先级。

​
使用选择器

Upcart 提供了大量自定义选择器。点击 “Show list” 查看所有可用选项。除非使用 .upcart-cart 限定作用域，否则请避免使用 body、div 或 h3 等全局选择器，以防止对店面造成意外更改。当样式未正确应用时，可以考虑提高 CSS 优先级或在 CSS 规则后附加 !important。这样可以确保它们覆盖任何冲突的样式。示例：
示例（安全的选择器）：

​
示例：感谢消息样式

假设你在 checkout 按钮下方添加了以下自定义 HTML：
没有 CSS 时，这条消息看起来会很朴素。为它设置样式：

​
常见问题与解决方案

​
CSS 在移动设备上不显示

如果你的自定义文本或样式在移动端不可见：
  • 在 Upcart Editor 和移动端浏览器中都刷新页面，以清除缓存版本。
  • 确保最新发布的购物车版本处于激活状态。
  • 确认 CSS 已保存在 Upcart > Cart Editor > Settings 的 Custom CSS 标签页中。

​
编辑器与线上商店之间的差异

如果样式在编辑器中显示正确但在线上站点中不正确，可能需要提高选择器优先级，或在关键规则中添加 !important。

​
CSS 选择器使用错误

请核实所定位的是正确的类或 ID。针对 Upcart 特有元素时，请务必包含 .upcart- 等前缀，以避免意外结果。如果样式未按预期应用，请确保选择器 .thank-you-message 正确定位到了目标 HTML 元素，并检查 CSS 代码是否放在了正确的标签页中（Upcart > Cart Editor > Settings > Custom CSS）。
自定义方面的支持： Upcart 支持团队无法协助实现或调试自定义 CSS。如需高级样式帮助，我们建议与 Shopify Expert 合作。有关自定义 CSS 的故障排查，请参阅常见问题部分，其中提供了解决移动设备样式缺失、编辑器预览与线上店面差异以及选择器位置错误等问题的指导。