Skip to main content
预览购物车有两种方式:在构建过程中于编辑器内实时预览,以及在公开之前在你的店面主题上预览。

编辑器画布

购物车编辑器的中央是一个渲染真实购物车的实时预览。它并排显示两个购物车状态——一张 Filled cart 卡片和一张 Empty cart 卡片——让你在工作时可以同时看到两者。
  • 选择正在编辑的状态:使用侧边栏中的 Filled / Empty 开关,或点击卡片上方的标题。点击卡片内部不会切换状态——它会选中光标下的区块。活动卡片会显示轮廓线,你正在编辑的区块会有自己的高亮。
  • 缩放:使用画布上的缩放胶囊控件(25%–200%):+ 以 10% 为步进,点击百分比可重置为 75%。Ctrl/Cmd + 滚轮以光标为中心缩放,普通滚动和拖动用于平移。
  • 预览会随着你更改设计设置自定义 CSS 实时反映变化。

在店面上预览

对购物车使用 Preview,即可在新标签页中的真实主题上查看它,而无需将其公开:
  • 上线购物车直接打开你的店面——上线购物车已经就是购物者看到的内容。
  • 草稿购物车打开主题预览。你选择在哪个主题上预览(默认是你的主主题),Aftersell 会仅为你的预览会话在该主题上暂载草稿购物车,不会影响你的上线购物车。你选择的主题必须已启用 app embed。
草稿预览可能无法完全反映上线购物车的行为——请把它当作一个接近的近似,并在发布后做最终检查。
预览前请保存更改——编辑器会提示你保存,以便预览反映你的最新工作。

空状态与已装满状态

两个状态在编辑器画布中始终都可用(两张卡片),所以你可以独立设计和检查空购物车和已装满购物车。在店面上,购物者看到与其购物车匹配的状态。

示例数据场景

Cart items 区块的设置面板有一个带 Sample data 选择器的 Preview 部分,让你在不同的行项目场景之间切换编辑器预览,从而无需构建匹配的购物车即可检查每种场景的效果: 你的选择只影响编辑器预览。它永远不会保存到购物车,重新加载编辑器时会重置。