Skip to main content
Aftersell Cart 的设计分为两个层级:为整个购物车设置样式的全局设置,以及微调单个区块的按区块覆盖。

全局设计设置

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

Design

Buttons

Layout

按区块设计覆盖

Custom code 之外的每个区块都在其设置面板底部拥有自己的按区块设计覆盖——除 Express payments 之外的所有区块都以 Design 为标题,Express payments 的覆盖则位于未加标签的 Style 和 Spacing 部分。(Custom code 完全没有设置面板——区块本身就是代码,所以它只显示一个 Code 标签页。)这些覆盖控制样式、间距和其他区块特定的设计设置。这些按区块设计设置留空时,将回退到该属性的全局设置。 许多区块的 Design 面板中还包含一个 Text(文字)部分,你可以在其中为该区块中特定的文字元素设置排版——字体族、大小、行高和字符间距。含有多个文字元素的区块(例如 Notes 和 Empty cart)会显示一个 Text element 选择器,让你可以分别为每个元素设置样式。
购物车编辑器中按区块 Design 设置面板的动画预览

字体和抽屉位置

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

行为设置

除样式之外,Cart settings 还包含行为选项——加入购物车时打开抽屉,以及保持店面同步的主题选择器。参阅 Cart settings

何时改用自定义 CSS

内置设置涵盖了常见情形。任何超出它们的需求——针对特定元素、自定义间距、响应式微调——请使用自定义 CSS