名称: shopify 描述: 使用GraphQL/REST API、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 GetProducts($first: Int!) {
  products(first: $first) {
    edges {
      node {
        id
        title
        handle
        variants(first: 5) {
          edges {
            node {
              id
              price
              inventoryQuantity
            }
          }
        }
      }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

结账扩展（React）

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

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

function Extension() {
  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、API、Webhook、计费
扩展 - 结账、管理、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资源管理器（管理 → 设置 → 应用 → 开发应用）
合作伙伴仪表板（应用管理）
开发店铺（免费测试）

API版本控制:

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

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