EN
Shopify 知识库 · 指南

Shopify 购物车页(cart)配方

从 cart template type 出发,说明 /cart 页面与购物车抽屉两种入口的页面组成:行项目与平台金额、折扣与运费预估、免运费进度、追加购买、配送支付与退换摘要、客服入口、空车状态,以及结账不属于主题模板的边界。

购物车页的任务是让顾客在结账前核对“买什么、买多少、大概付多少、下一步是什么”。它由 Shopify cart template type 承载,路径样例 /cart;cart 只有一个默认业务页面,所以本文把入口与配方合并。顾客进入时知道自己加购了什么,不知道的是金额如何构成、运费与优惠是否生效。

cart → 可选 alternate(通常不需要)→ 购物车页 / 购物车抽屉 → 页面内容清单 → 内容 × 展现 → Theme 实现

购物车有两个入口:/cart 页面,以及许多主题提供的抽屉。抽屉不是 Template type,而是主题在页面上渲染的另一个入口,两者读同一份购物车。行项目、金额、数量与错误的模块契约见购物车摘要模块;本文只决定页面放哪些模块、按什么顺序、何时删掉。

先判断是否需要 alternate

默认 cart.json 已足够。官方 alternate 页面描述的是按资源在后台分配模板并用 ?view= 预览,没有说明 cart 这种无关联资源的类型如何选用 alternate,该做法未核验。有无追加购买、有无免运费规则,用同一模板内的 Section 与设置开关调整。一般规则见 Template type 与 alternate template。

页面内容清单

运行时数据不得写成静态文案;编辑内容各有权威来源,页面只放摘要与链接。

类别优先级页面内容回答的问题来源边界
运行时核心行项目(变体、图片、数量、行价)买的对不对购物车对象 cart.items,不缓存
运行时核心小计、折扣、合计与结账入口大概付多少、去哪结账平台计算值,口径见购物车摘要
运行时可选折扣结果、数量规则与库存提示优惠生效了吗、还能加吗见促销兑现、库存状态
运行时可选运费预估、订单备注大概运费、有无特殊说明平台规则与交易动作;无法核实时写“结账时计算”
编辑可选配送摘要与免运费提示多久到、何时免运费配送信息,数值与运费规则同源
编辑可选支付方式与退换、保证摘要怎么付、买错能否退支付方式只写结账实际启用的;保证详情摘要不得比正式条款更宽
编辑可选追加购买还能配什么关系与依据见交叉销售与追加购买
编辑可选客服入口有问题找谁客服渠道
编辑空车时浏览入口接下来看什么商品分类或特色商品

购物车页不复述完整政策、品牌故事或评价墙:顾客此刻的任务是核对与提交,长内容回到专门页面(如配送与退换页面)并以链接引用。

页面组合

顺序是待验证假设,不是必备清单。

序模块回答的问题缺失时
1行项目买的对不对、数量能否改不可缺;零项走空车状态
2促销兑现优惠有没有生效没有可输入的优惠时删除,不放空输入框
3免运费进度与运费预估差多少免运费、大概运费数据无法与运费规则同步时删除
4摘要与结账入口现在付多少、去哪结账不可缺
5追加购买还能配什么无可解释的搭配关系时整块删除,不用随机商品填充
6配送、支付与退换摘要多久到、怎么付、能否退与结账实际不一致或无核实来源的项删除,不保留矛盾版本
7客服入口出问题怎么办全站页脚已有入口时只留一条链接

最小成立组合:行项目 → 摘要与结账入口。需要优惠码时加第 2 段,运费规则稳定时加“结账时计算”文字。追加购买放在行项目之后还是摘要之下是待验证位置,无论哪种,结账入口都不得被遮挡或推离视线。

不应默认出现:评价墙、品牌故事、完整推荐列表、订阅表单、弹窗促销。它们回答决策阶段的问题,放进购物车会稀释“核对与提交”。

免运费进度:在已读官方页面中没有找到平台内置的进度机制,Shipping rates 帮助页只把免运费列为一种运费选项,未写按金额设门槛的细节。门槛数值必须与运费规则同源,不得在主题设置里另填一份长期不同步的数字;做不到时删除该模块,改用静态说明并写明“以结账为准”。

运费预估:Ajax Cart 提供 GET /cart/shipping_rates.json,页面写明它可能较慢且受限流,推荐 POST /cart/prepare_shipping_rates.json 加 GET /cart/async_shipping_rates.json,未算完时返回 null。预估需要目的地参数,结果未到时保留“结账时计算”。与结账实际金额的差异未核验,文案不写“总计”。

内容 × 展现形式

内容首选形式适用条件退化方式
行项目表格式列表 / 小屏单列List逐行改量与移除单列列表
摘要与结账入口侧栏摘要;小屏Sticky Bar桌面有余量列表下方;固定入口不得遮挡错误信息
免运费进度一行文字数据同源删除
追加购买1 到 3 张商品卡有可解释关系整块删除
配送、支付、退换摘要短列表加链接每项有核实来源一条“配送与退换”链接
抽屉入口Drawer加购后需就地核对关闭 JavaScript 时退化为 /cart 链接

抽屉只放行项目、小计与结账入口;追加购买以外的政策摘要、客服入口与备注说明留在页面,抽屉里不放完整推荐列表与多步表单。

状态与退化

状态页面级处理
空车保留页面与标题,结账入口不可用并说明原因
加载与更新保留原内容,禁止重复提交,金额区标记为更新中
库存不足、数量规则、折扣失败各自就近提示,不合并成“更新失败”;类型见购物车摘要
商品失效标出该行不可结账,不自动删除
跨市场市场或币种变化后整页重读,配送与支付摘要一并复核
请求失败保留数量与输入,可重试,结果未知时不宣称已更新

空车取舍:有稳定分类时,给 2 到 4 个分类入口和一个搜索入口;没有责任人维护的“推荐商品”不放,过期商品会变成误导。只留“继续购物”一个链接同样成立,哪种更好是待验证假设。Dawn 的空车分支可显示指定集合的卡片,见 Dawn 购物车与 Horizon 购物车。

Shopify Theme 实现

层次已核验的机制 / 建议职责
Template官方 cart 页面:渲染 /cart,模板为 templates/cart.json,可引用 Section;HTML 与 Liquid 必须在被引用的 Section 中
Main Section官方 JSON templates 页面只把 main 当示例 ID,未规定必须有 main section;必须有的是表单 action="{{ routes.cart_url }}"、method="post",以及 type="submit"、name="checkout" 的结账控件
Sections / Blocks模板最多 25 个 Section,每个最多 50 个 Block(JSON templates 页面所写);行项目、摘要、追加购买、政策摘要、客服入口分成可排序 Section
Settings开放内容选择与布局;不开放“覆盖金额或门槛”的开关
数据来源Liquid cart:items、items_subtotal_price、total_price、original_total_price、total_discount、cart_level_discount_applications、note、attributes、requires_shipping、taxes_included、checkout_charge_amount 等,口径见购物车摘要
动态更新Ajax Cart 的 add、change、clear、update 可用 sections 参数取回最多五个分区 HTML;备注与属性经 update.js 提交
结账表单提交后进入 Shopify 结账。结账、感谢页与订单状态不属于 Theme template type,见 Template type与购买旅程

Section schema 页面写明 preset 是商家在“Add section”中可选的预定义配置,enabled_on 与 disabled_on 可限制 Section 出现的模板;没有 preset 的 Section 能否由编辑器添加,该页未明说,本文不断言。主题源码只链接已成文分析:Horizon 购物车、Dawn 购物车。

发布检查

  • 空车、一件、多件、同商品两个变体,页面与抽屉数量和金额一致;
  • 金额区没有自算数值,文案分清“小计”“预估”“结账时确认”;
  • 免运费门槛、时效、支付方式与结账实际一致,或已删除该提示;
  • 库存不足、数量规则与折扣失败各有就近提示,焦点没有随被销毁节点丢失;
  • 追加购买加购后图标、抽屉与页面同步,已在购物车中的商品不再被推荐;
  • 关闭 JavaScript 时抽屉退化为 /cart,表单仍能提交到结账;
  • 验证与记录方式见购买与事件验证与金额排查。

待继续完善

  • 页面组成与顺序未在真实店铺验证;追加购买与空车入口的取舍需要样本;
  • 免运费进度缺少与运费规则同步的可验证做法;cart 类型是否、如何使用 alternate 未核验;
  • 本站关于运费与购物车金额的实验记录仍是未复现的草稿,不作依据;checkout_charge_amount 与结账实际金额的关系未核验。