> ## 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.

# 自定义 CSS

> 编写 CSS 来自定义 cart drawer 的设计。

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

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

<div id="where-to-find-it">
  ## **在哪里找到它**
</div>

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

<div id="how-it-works">
  ## **工作原理**
</div>

你可以添加 CSS 来：

* 为默认购物车元素设置样式
* 修改自定义 HTML 的外观
* 调整间距、对齐、排版等

在你输入时，**自动补全弹窗**会推荐有效的 Upcart 选择器以加快编辑速度。选择建议项会自动补全规则并帮助你组织代码。如果更改未按预期显示，请查看常见排查建议，例如在浏览器和 Upcart 编辑器中刷新缓存、检查 CSS 放置位置，以及确保 CSS 规则具有适当的优先级。

<div id="using-selectors">
  ## **使用选择器**
</div>

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

```
.upcart-cart .upcart-checkout-button {    border-radius: 20px !important;    background-color: #CFA17E !important;    color: #1A1A1A !important;}
```

示例（安全的选择器）：

```
.upcart-cart h3 { font-size: 20px; }
```

<div id="example-thank-you-message-styling">
  ## **示例：感谢消息样式**
</div>

假设你在 checkout 按钮下方添加了以下自定义 HTML：

```
<div class="thank-you-message">Thanks for shopping with us!</div>
```

没有 CSS 时，这条消息看起来会很朴素。为它设置样式：

```css theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.thank-you-message { color: green; font-size: 16px; font-weight: bold; text-align: center; margin-top: 5px; }
```

<div id="common-problems-and-solutions">
  # 常见问题与解决方案
</div>

<div id="css-not-appearing-on-mobile-devices">
  ## CSS 在移动设备上不显示
</div>

如果你的自定义文本或样式在移动端不可见：

* 在 **Upcart Editor** 和移动端浏览器中都刷新页面，以清除缓存版本。
* 确保最新发布的购物车版本处于激活状态。
* 确认 CSS 已保存在 **Upcart > Cart Editor > Settings** 的 **Custom CSS** 标签页中。

<div id="discrepancies-between-editor-and-live-store">
  ## 编辑器与线上商店之间的差异
</div>

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

```
.upcart-cart .upcart-checkout-button { font-size: 18px !important; background: blue !important; color: white !important; }
```

<div id="incorrect-css-selector-usage">
  ## CSS 选择器使用错误
</div>

请核实所定位的是正确的类或 ID。针对 Upcart 特有元素时，请务必包含 `.upcart-` 等前缀，以避免意外结果。如果样式未按预期应用，请确保选择器 `.thank-you-message` 正确定位到了目标 HTML 元素，并检查 CSS 代码是否放在了正确的标签页中（Upcart > Cart Editor > Settings > Custom CSS）。

***

自定义方面的支持：

Upcart 支持团队无法协助实现或调试自定义 CSS。如需高级样式帮助，我们建议与 Shopify Expert 合作。有关自定义 CSS 的故障排查，请参阅常见问题部分，其中提供了解决移动设备样式缺失、编辑器预览与线上店面差异以及选择器位置错误等问题的指导。