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

# 设计设置

> Aftersell Cart 的全局和按区块设计设置：颜色、按钮、布局，以及区块覆盖如何在其之上叠加。

Aftersell Cart 的设计分为两个层级：为整个购物车设置样式的**全局**设置，以及微调单个区块的**按区块**覆盖。

<div id="global-design-settings">
  ## 全局设计设置
</div>

从编辑器侧边栏打开 **Cart settings** 即可进入购物车的全局设计。设置分为 Design、Buttons 和 Layout 三组。

<div id="design">
  ### Design
</div>

| 设置                       | 控制内容               | 默认值       |
| ------------------------ | ------------------ | --------- |
| **Background color**     | 购物车的背景。            | `#ffffff` |
| **Text color**           | 主要文本。              | `#000000` |
| **Secondary text color** | 弱化/次要文本。           | `#a8a8a8` |
| **Accent color**         | 徽章、分隔线和划线价格。       | `#f2f2f2` |
| **Border radius**        | 容器、卡片、图片和文本输入框的圆角。 | `8px`     |

<div id="buttons">
  ### Buttons
</div>

| 设置                   | 控制内容             | 默认值       |
| -------------------- | ---------------- | --------- |
| **Background color** | 按钮填充色。           | `#000000` |
| **Text color**       | 按钮文字。            | `#ffffff` |
| **Border color**     | 按钮边框。            | `#000000` |
| **Border radius**    | 按钮、下拉菜单和数量控件的圆角。 | `8px`     |

<div id="layout">
  ### Layout
</div>

| 设置                     | 控制内容                 | 默认值     |
| ---------------------- | -------------------- | ------- |
| **Horizontal padding** | 购物车内部的左右内边距。         | `24px`  |
| **Desktop width**      | 抽屉在桌面端的宽度（最小 320px）。 | `440px` |

<div id="per-block-design-overrides">
  ## 按区块设计覆盖
</div>

除 [**Custom code**](/zh/aftersell/cart/custom-code-blocks) 之外的每个区块都在其设置面板底部拥有自己的按区块设计覆盖——除 **Express payments** 之外的所有区块都以 **Design** 为标题，Express payments 的覆盖则位于未加标签的 Style 和 Spacing 部分。（Custom code 完全没有设置面板——区块本身*就是*代码，所以它只显示一个 Code 标签页。）这些覆盖控制样式、间距和其他区块特定的设计设置。这些**按区块设计设置**留空时，将回退到该属性的全局设置。

许多区块的 Design 面板中还包含一个 **Text**（文字）部分，你可以在其中为该区块中特定的文字元素设置排版——字体族、大小、行高和字符间距。含有多个文字元素的区块（例如 Notes 和 Empty cart）会显示一个 **Text element** 选择器，让你可以分别为每个元素设置样式。

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-design-animated-preview-block-settings.gif?s=ae602b5294a5d8ef7caae96476df2d1b" alt="购物车编辑器中按区块 Design 设置面板的动画预览" title="购物车编辑器中按区块 Design 设置面板的动画预览" width="2188" height="1080" data-path="images/aftersell/cart-design-animated-preview-block-settings.gif" />
</Frame>

<div id="fonts-and-drawer-position">
  ## 字体和抽屉位置
</div>

* **字体：**购物车默认继承你**主题的字体**。你可以在每个区块的 Design 设置中的 **Text**（文字）部分为特定文字元素（例如产品标题和 upsells 标题）设置自定义字体族——详情参阅 [Cart items 区块](/zh/aftersell/cart/cart-items-block)和 [Upsells 区块](/zh/aftersell/cart/upsells-block)。
* **抽屉位置：**抽屉的**宽度**可以调整（见上文 Desktop width）；没有左/右位置设置。

<div id="behavior-settings">
  ## 行为设置
</div>

除样式之外，**Cart settings** 还包含行为选项——加入购物车时打开抽屉，以及保持店面同步的主题选择器。参阅 [Cart settings](/zh/aftersell/cart/cart-settings)。

<div id="when-to-use-custom-css-instead">
  ## 何时改用自定义 CSS
</div>

内置设置涵盖了常见情形。任何超出它们的需求——针对特定元素、自定义间距、响应式微调——请使用[自定义 CSS](/zh/aftersell/cart/custom-css)。