名称: shopify 描述: 使用GraphQL/REST APIs、Shopify CLI、Polaris UI组件和Liquid模板构建Shopify应用程序、扩展和主题。功能包括带OAuth认证的应用开发、用于自定义结账流程的结账UI扩展、用于仪表板集成的管理UI扩展、用于零售的POS扩展、使用Liquid的主题开发、Webhook管理、计费API集成、产品/订单/客户管理。适用于构建Shopify应用、实现结账自定义、创建管理界面、开发主题、集成支付处理、通过API管理店铺数据或扩展Shopify功能。

Shopify开发

在Shopify平台上构建应用的全面指南：应用、扩展、主题和API集成。

平台概述

核心组件:

Shopify CLI - 开发工作流工具
GraphQL管理API - 数据操作的主要API（推荐）
REST管理API - 传统API（维护模式）
Polaris UI - 一致界面的设计系统
Liquid - 主题模板语言

扩展点:

结账UI - 自定义结账体验
管理UI - 扩展管理仪表板
POS UI - 销售点自定义
客户账户 - 售后页面
主题应用扩展 - 嵌入式主题功能

快速入门

先决条件

# 安装Shopify CLI
npm install -g @shopify/cli@latest

# 验证安装
shopify version

创建新应用

# 初始化应用
shopify app init

# 启动开发服务器
shopify app dev

# 生成扩展
shopify app generate extension --type checkout_ui_extension

# 部署
shopify app deploy

主题开发

# 初始化主题
shopify theme init

# 启动本地预览
shopify theme dev

# 从店铺拉取
shopify theme pull --live

# 推送到店铺
shopify theme push --development

开发工作流

1. 应用开发

设置:

shopify app init
cd my-app

配置访问范围 (shopify.app.toml):

[access_scopes]
scopes = "read_products,write_products,read_orders"

开始开发:

shopify app dev  # 启动带隧道的本地服务器

添加扩展:

shopify app generate extension --type checkout_ui_extension

部署:

shopify app deploy  # 构建并上传到Shopify

2. 扩展开发

可用类型:

结账UI - checkout_ui_extension
管理操作 - admin_action
管理块 - admin_block
POS UI - pos_ui_extension
功能 - function（折扣、支付、交付、验证）

工作流:

shopify app generate extension
# 选择类型、配置
shopify app dev  # 本地测试
shopify app deploy  # 发布

3. 主题开发

设置:

shopify theme init
# 选择Dawn（参考主题）或从头开始

本地开发:

shopify theme dev
# 在localhost:9292预览
# 自动同步到开发主题

部署:

shopify theme push --development  # 推送到开发主题
shopify theme publish --theme=123  # 设置为活动主题

何时构建什么

构建应用当:

集成外部服务
在多个店铺添加功能
构建面向商家的管理工具
以编程方式管理店铺数据
实现复杂业务逻辑
对功能收费

构建扩展当:

自定义结账流程
向管理页面添加字段/功能
为零售创建POS操作
实现折扣/支付/运输规则
扩展客户账户页面

构建主题当:

创建自定义店面设计
构建独特的购物体验
自定义产品/集合页面
实现品牌特定布局
修改主页/内容页面

组合方法:

应用 + 主题扩展:

应用处理后端逻辑和数据
主题扩展提供店面UI
示例: 产品评论、愿望清单、尺寸指南

基本模式

GraphQL产品查询

query 获取产品($first: Int!) {
  产品(first: $first) {
    边 {
      节点 {
        id
        标题
        handle
        变体(first: 5) {
          边 {
            节点 {
              id
              价格
              库存数量
            }
          }
        }
      }
    }
    页面信息 {
      有下一页
      结束游标
    }
  }
}

结账扩展 (React)

import { reactExtension, BlockStack, TextField, Checkbox } from '@shopify/ui-extensions-react/checkout';

export default reactExtension('purchase.checkout.block.render', () => <扩展 />);

function 扩展() {
  const [message, setMessage] = useState('');

  return (
    <BlockStack>
      <TextField label="礼物消息" value={message} onChange={setMessage} />
    </BlockStack>
  );
}

Liquid产品展示

{% for product in collection.products %}
  <div class="product-card">
    <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
    <a href="{{ product.url }}">查看详情</a>
  </div>
{% endfor %}

最佳实践

API使用:

新开发首选GraphQL而非REST
请求仅需字段以降低成本
大数据集实现分页
批处理使用批量操作
尊重速率限制（GraphQL基于成本）

安全:

在环境变量中存储API凭据
验证Webhook签名
公共应用使用OAuth
请求最小访问范围
嵌入式应用实现会话令牌

性能:

适当缓存API响应
优化主题中的图像
最小化Liquid逻辑复杂度
扩展使用异步加载
监控GraphQL查询成本

测试:

使用开发店铺进行测试
跨不同店铺计划测试
验证移动响应性
检查可访问性（键盘、屏幕阅读器）
验证GDPR合规性

参考文档

高级主题的详细指南:

应用开发 - OAuth、APIs、Webhooks、计费
扩展 - 结账、管理、POS、功能
主题 - Liquid、部分、部署

脚本

shopify_init.py - 交互式初始化Shopify项目

python scripts/shopify_init.py

故障排除

速率限制错误:

监控X-Shopify-Shop-Api-Call-Limit头
实现指数退避
大数据集使用批量操作

认证失败:

验证访问令牌有效性
检查所需范围是否授予
确保OAuth流程完成

扩展未出现:

验证扩展目标正确
检查扩展已发布
确保应用安装在店铺上

Webhook未接收:

验证Webhook URL可访问
检查签名验证
在合作伙伴仪表板中查看日志

资源

官方文档:

Shopify文档: https://shopify.dev/docs
GraphQL API: https://shopify.dev/docs/api/admin-graphql
Shopify CLI: https://shopify.dev/docs/api/shopify-cli
Polaris: https://polaris.shopify.com

工具:

GraphiQL Explorer（管理 → 设置 → 应用 → 开发应用）
合作伙伴仪表板（应用管理）
开发店铺（免费测试）

API版本控制:

季度发布（YYYY-MM格式）
当前: 2025-01
每版本12个月支持
版本更新前测试

注意: 本技能涵盖截至2025年1月的Shopify平台。请参阅官方文档获取最新更新。