Shopify开发怎么落地？覆盖Liquid主题和API

Shopify 开发栈太宽，资料总在四处找

Shopify 的技术栈横跨好几层：前端有 Liquid 模板和 OS 2.0 主题，数据有 GraphQL Admin 和 Storefront API，交互有 Ajax 购物车，业务规则有 Functions，无头店面又是 Hydrogen 那一套。每一层的语法、对象、版本约定都不一样，开发者要么在官方文档里来回翻，要么凭旧经验写、再被废弃提示打回来。尤其是版本演进——Scripts 要迁到 Functions、Polaris React 要换成 Web Components，这些迁移路径如果没人梳理清楚，很容易写出过时的实现。

这个技能能帮你查到什么

它是一份覆盖完整 Shopify 开发栈的参考，按你手头的任务给出对应资料。主题方向，它梳理 Liquid 的标签、过滤器、对象和 OS 2.0 主题架构，支持你改 .liquid 模板或 JSON section；API 方向，它指导 GraphQL Admin、Storefront 和 Ajax API 的安全调用；扩展方向，它支持应用、Functions、Hydrogen 和扩展的开发路径；工程方向，它提供性能优化、废弃迁移和 Liquid/API 的故障排查参考。输出包括主题代码、API 调用示例、扩展实现思路、迁移提示和排障建议，帮你按官方栈把功能落地。

怎么用它

用法是把开发任务和约束（哪个接口、哪个版本、要不要迁移）用自然语言交给它，由它给出对应的代码与思路。例如可以这样对它说：

它适合这些场景：需要修改 .liquid 模板或 JSON section 来实现自定义商品展示；应用需要通过 GraphQL Admin API 读取或变更商品、订单数据；主题购物车交互异常、要排查 Ajax API 或 JavaScript 问题；以及从 Scripts 或 Polaris React 迁移到 Functions 与 Web Components。

大家常问

Shopify 的 Scripts 和 Functions 有什么区别？为什么现在要从 Scripts 迁移到 Functions？

两者都用来写购物车折扣、运费、支付限制等自定义逻辑，但 Scripts 用 Ruby、只兼容旧版结账、共享运行时、难调试；Functions 编译成 WebAssembly 跑在独立沙箱、执行时间有上限、用 Shopify CLI 部署、支持版本管理。要迁移是因为旧版 Checkout 正被淘汰，Scripts 已停更，新功能只基于 Functions 开发。本技能可给出迁移路径与实现思路。

Shopify 主题开发里说的 OS 2.0 和老主题有什么区别？Liquid 模板和 JSON section 是什么关系？

OS 2.0 把编辑权还给商家：所有页面都能在可视化编辑器里拖拽配置、原生支持元字段、App 通过 App Blocks 注入不易冲突；老主题大多硬编码在 Liquid 里、商家改不了。关系上，JSON 模板是"布局清单"，列出页面用哪些 section、顺序和参数；Liquid section 是"功能单元"，定义长什么样、取什么数据。本技能按这套架构给主题代码。

Shopify 的 Hydrogen、无头（Headless）店面是什么意思？和直接改 Liquid 主题有什么区别？

无头是把前端（头）和 Shopify 后端（身体）分离：后端仍管商品库存结账，前端自选 React/Vue 等技术栈，通过 Storefront API 取数据，性能和定制自由度更高但开发运维更重。Hydrogen 是 Shopify 官方的无头 React 框架、内置电商组件。改 Liquid 主题则是一体化、开箱即用、适合多数中小商家。本技能能讲清各路径取舍与落地。

Shopify 主题里购物车交互（加购、改数量）异常，一般和 Ajax Cart API 是什么关系？

主题购物车的加购、改数量在前端通过 Ajax Cart API 异步操作：/cart/add.js 加购、/cart/change.js 改数量、/cart.js 取购物车，不刷新页面就更新数据。交互异常多在这条链路上：JS 没绑定事件就请求不发出、回调没刷新 UI 就角标价格不动、特殊 SKU 会返 422。本技能可对照 Network 请求与 API 返回逐项排查。