shopify-development

Shopify 开发技能指南

技能概述

Shopify Development Skill 提供构建 Shopify 应用、扩展和主题的完整开发指南，涵盖 GraphQL Admin API、Shopify CLI、Polaris UI 组件库和 Liquid 模板引擎的使用方法。

适用场景

1. 构建 Shopify 商家工具和集成

当需要为 Shopify 商家开发后台管理工具、集成第三方服务、实现自动化工作流程，或添加订阅付费功能时，使用此技能开发 Shopify App。适合构建订单处理系统、库存同步工具、客户管理平台等商家端解决方案。

2. 自定义结账和管理界面

当需要定制结账流程、添加管理员操作按钮、创建 POS 扩展或实现动态折扣规则时，使用此技能开发 Shopify Extension。支持结账 UI 扩展、Admin 操作扩展、POS UI 扩展和 Shopify Functions 等多种扩展类型。

3. 修改店铺前端展示

当需要自定义店铺外观、修改产品详情页、优化购物体验或添加自定义功能模块时，使用此技能开发 Shopify Theme。基于 Liquid 模板引擎，可以灵活控制店铺的每个页面元素，实现独特的品牌展示效果。

核心功能

1. Shopify CLI 项目脚手架

提供完整的 Shopify 命令行工具支持，包括应用初始化、扩展生成、主题开发等常用命令。通过 shopify app init 快速创建新项目，使用 shopify app generate extension 生成各类扩展模板，配合 shopify app dev 本地开发服务器实现快速迭代。

2. GraphQL Admin API 集成

内置经过验证的 GraphQL 查询模式，支持产品查询、订单获取、Metafields 设置等常用操作。提供 API 2026-01 版本的查询模板，包含游标分页、批量操作和速率限制处理等最佳实践，帮助开发者高效集成 Shopify 数据。

3. 扩展和主题开发模板

提供结账扩展、Liquid 主题模板、Webhook 配置等代码示例。包含 React 组件示例（使用 @shopify/ui-extensions-react/checkout）、Liquid 模板片段、Webhook 订阅配置等实用代码，可直接用于项目开发。

常见问题

Shopify 开发需要什么基础？

建议具备 JavaScript/TypeScript 基础、React 框架经验（用于扩展开发）、了解 GraphQL 查询语法。主题开发需要熟悉 HTML/CSS 和 Liquid 模板语法。后端开发可以使用 Node.js、Python、Ruby 等语言。

如何选择开发 App 还是 Extension？

如果需要独立的后端逻辑、数据库存储或向商家收费，选择开发 App。如果只是修改 Shopify 界面元素（如结账页面、Admin 按钮、折扣规则），选择 Extension。也可以将两者结合使用。

Shopify CLI 如何安装和使用？

通过 npm 全局安装：npm install -g @shopify/cli@latest。安装后使用 shopify app init 创建新应用，shopify app dev 启动开发服务器，shopify app deploy 部署到 Shopify。主题开发使用 shopify theme init 和 shopify theme dev 命令。

Shopify GraphQL 和 REST API 有什么区别？

GraphQL 是 Shopify 推荐的现代 API，支持按需获取字段、减少请求次数、提供更好的类型安全。REST API 是传统接口，适合简单场景。新项目建议使用 GraphQL，API 2026-01 版本包含最新功能。

Shopify Liquid 模板难学吗？

Liquid 是 Shopify 专用的模板语言，语法相对简单，包含变量输出、过滤器、条件判断和循环等基础概念。对于有前端基础的开发者，通常几天就能掌握常用用法。此技能提供了完整的代码示例和最佳实践参考。

如何测试 Shopify 应用？

使用 Shopify CLI 的 shopify app dev 命令会自动创建隧道并连接开发商店。建议创建专门的测试商店进行开发测试。扩展开发支持实时预览，主题开发可通过 shopify theme dev 在 localhost:9292 本地预览。