Skip to main content
你购物车的布局是由一组区块堆叠而成的：这些是你可以在购物车编辑器中添加、重新排序、设置样式和自定义的可配置组件。你包含哪些区块以及以什么顺序排列，就是顾客看到的购物车。 有关区块如何置于状态和版块之中，请参阅购物车是如何运作的？。

​
区块与子区块

区块有两种：
  • 区块直接位于购物车中，处于三个版块之一：Header（头部）、Body（主体）或 Footer（底部）。每个版块提供不同的区块集合。
  • 子区块嵌套在另一个区块内。目前只有 Cart items 承载子区块：Product 行（商品行本身）、Subscription upgrade 和 Custom code。

​
添加、重新排序和移除区块

  • 使用 Add block（添加区块）选择器添加区块。如果区块不能放置在你要添加的位置，或者已达到其数量限制（选择器会显示 count/max 标记），该区块会显示为灰色。
  • 在版块内拖动区块即可重新排序。
  • 使用垃圾桶图标移除，锁定的区块除外（见下文）。
  • 使用眼睛开关显示/隐藏大多数区块，这会在不删除区块的情况下对顾客隐藏它。少数结构性区块无法隐藏：Cart items、Checkout button 和 Product 行。

​
锁定的区块

有些区块可以重新排序但不能删除，以防核心购物车行为（例如结账）被意外移除：
  • Cart items
  • Checkout button

​
默认区块

新购物车以一个可用的默认布局开始：
  • 有商品的购物车： Header、Banner、Cart items、Summary、Checkout button
  • 空购物车： Header、Empty cart 区块
空购物车状态是整个空布局。Empty cart 区块是其中的一个区块。两者的区别请参阅购物车是如何运作的？。

​
每种区块可以添加多少个

数量限制按购物车状态计算，而不是按购物车计算。有商品的购物车和空购物车各有自己的额度，因此一个购物车可以在有商品布局中放三个 Banner，在空布局中再放三个。 大多数区块每种状态限一个。例外如下：

​
Content、Design 和 Code

每个区块最多通过编辑器中的三个界面进行配置：
  • Content：区块的设置（文字、产品选择、阈值等）。Custom code 区块是唯一的例外：它没有 Content 面板，因为该区块本身就是代码。
  • Design：按区块的样式设置，叠加在你的全局设计设置之上。除 Custom code（完全没有设置面板）之外，每个区块都有。
  • Code：使用自定义模板覆盖区块的内置渲染。大多数区块支持此功能；少数不支持。

​
按市场、国家或货币显示或隐藏

有些区块可以根据买家身份显示不同的设置，或完全隐藏。这与侧边栏的眼睛开关不同，后者是对所有人开启或关闭一个区块。 目前支持的条件类型： Shopify 市场、顾客国家和顾客货币（每种都有 In 或 Not in）。购物车总额和购物车内容不是条件类型。如需按消费金额/数量进度设置，请使用 Rewards 层级阈值；如需编辑器无法表达的规则，请使用 Cart SDK。 条件是一个有序列表：第一个匹配的条件生效。请将具体规则放在 All buyers（所有买家）兜底规则之上。如果没有任何匹配，该区块对该顾客不渲染任何内容。 目前在编辑器中，完整的条件 UI 已在 Rewards 区块上提供：可按市场、国家或货币设置不同的层级组合。其他区块要么使用单一的”所有买家”配置，要么尚未接入此系统。 编辑器预览不会根据实际买家进行判断。在面板中选择某个条件即可预览该变体。

​
所有区块

结构
  • Header：标题、商品数量、logo 和关闭控件，固定在顶部。
  • Cart items：顾客添加到购物车的商品；每行商品重复显示。
  • Subscription upgrade：提供将某行商品转换为订阅的子区块。
  • Summary：总额、节省金额和已应用的折扣。
  • Checkout button：进入结账的主要行动号召按钮。
  • Empty cart：购物车为空时显示的内容。
  • Express payments：购物车内的快捷结账按钮（Shop Pay、PayPal 等）。
商品营销 顾客输入 内容
  • Banner：消息横幅，可选配倒计时。
  • Image：单张图片或托管预设（例如支付图标）。
  • Custom code：购物车任意位置的自定义 HTML 或 React。
扩展
  • Custom templates：从区块的 Code 标签页覆盖任意区块的渲染方式。

​
每个版块可用的区块

每个版块提供不同的区块集合。这样可以保持布局聚焦，减少杂乱。 其中一些区块是特定状态专用的（例如 Empty cart 仅在空状态下可用）。请参阅购物车是如何运作的？。

​
区块验证错误

如果区块的设置包含无效值，侧边栏中该区块名称旁会出现一个红色小圆点。在你修复问题之前，圆点会一直存在。它不是可关闭的通知。 只要有任何区块存在错误，保存就会被阻止。Save（保存）按钮仍可点击，但点击后会显示错误提示（“Fix the errors in your cart blocks before saving”，保存前请修复购物车区块中的错误），并跳转到第一个有问题的区块，打开其设置，以便你修正高亮显示的字段。Publish（发布）还要求没有未保存的更改，因此在成功完成一次干净的保存之前，它一直不可用。 无效字段修正后，圆点会自动消失，保存也会正常进行。
隐藏的区块仍会被验证。你隐藏的区块可能包含无效设置、显示错误圆点，并像可见区块一样阻止保存。因此，如果保存被阻止而所有可见区块看起来都正常，请检查你隐藏的区块。