shopify-development

Shopify 开发技能

当用户询问以下内容时，使用此技能：

• 构建 Shopify 应用或扩展
• 创建结账/管理/POS UI 自定义
• 使用 Liquid 模板开发主题
• 集成 Shopify GraphQL 或 REST API
• 实现 Webhook 或计费
• 使用元字段或 Shopify Functions

---

路由：构建什么

如果用户想要集成外部服务，或构建商家工具，或对功能收费： → 构建 App（参见 references/app-development.md）

如果用户想要自定义结账，或添加管理 UI，或创建 POS 操作，或实现折扣规则： → 构建 Extension（参见 references/extensions.md）

如果用户想要自定义店面设计，或修改产品/集合页面： → 构建 Theme（参见 references/themes.md）

如果用户同时需要后端逻辑和店面 UI： → 构建 App + Theme Extension 组合

---

Shopify CLI 命令

安装 CLI：

npm install -g @shopify/cli@latest

创建并运行应用：

shopify app init          # Create new app
shopify app dev           # Start dev server with tunnel
shopify app deploy        # Build and upload to Shopify

生成扩展：

shopify app generate extension --type checkout_ui_extension
shopify app generate extension --type admin_action
shopify app generate extension --type admin_block
shopify app generate extension --type pos_ui_extension
shopify app generate extension --type function

主题开发：

shopify theme init        # Create new theme
shopify theme dev         # Start local preview at localhost:9292
shopify theme pull --live # Pull live theme
shopify theme push --development  # Push to dev theme

---

访问范围

在 shopify.app.toml 中配置：

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

常见范围：

• read_products、write_products - 产品目录访问
• read_orders、write_orders - 订单管理
• read_customers、write_customers - 客户数据
• read_inventory、write_inventory - 库存水平
• read_fulfillments、write_fulfillments - 订单履行

---

GraphQL 模式（已根据 API 2026-01 验证）

查询产品

query GetProducts($first: Int!, $query: String) {
  products(first: $first, query: $query) {
    edges {
      node {
        id
        title
        handle
        status
        variants(first: 5) {
          edges {
            node {
              id
              price
              inventoryQuantity
            }
          }
        }
      }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

查询订单

query GetOrders($first: Int!) {
  orders(first: $first) {
    edges {
      node {
        id
        name
        createdAt
        displayFinancialStatus
        totalPriceSet {
          shopMoney {
            amount
            currencyCode
          }
        }
      }
    }
  }
}

设置元字段

mutation SetMetafields($metafields: [MetafieldsSetInput!]!) {
  metafieldsSet(metafields: $metafields) {
    metafields {
      id
      namespace
      key
      value
    }
    userErrors {
      field
      message
    }
  }
}

变量示例：

{
  "metafields": [
    {
      "ownerId": "gid://shopify/Product/123",
      "namespace": "custom",
      "key": "care_instructions",
      "value": "Handle with care",
      "type": "single_line_text_field"
    }
  ]
}

---

结账扩展示例

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

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

function GiftMessage() {
  const [isGift, setIsGift] = useState(false);
  const [message, setMessage] = useState("");
  const applyAttributeChange = useApplyAttributeChange();

  useEffect(() => {
    if (isGift && message) {
      applyAttributeChange({
        type: "updateAttribute",
        key: "gift_message",
        value: message,
      });
    }
  }, [isGift, message]);

  return (
    <BlockStack spacing="loose">
      <Checkbox checked={isGift} onChange={setIsGift}>
        This is a gift
      </Checkbox>
      {isGift && (
        <TextField
          label="Gift Message"
          value={message}
          onChange={setMessage}
          multiline={3}
        />
      )}
    </BlockStack>
  );
}

---

Liquid 模板示例

{% comment %} Product Card Snippet {% endcomment %}
<div class="product-card">
  <a href="{{ product.url }}">
    {% if product.featured_image %}
      <img
        src="{{ product.featured_image | img_url: 'medium' }}"
        alt="{{ product.title | escape }}"
        loading="lazy"
      >
    {% endif %}
    <h3>{{ product.title }}</h3>
    <p class="price">{{ product.price | money }}</p>
    {% if product.compare_at_price > product.price %}
      <p class="sale-badge">Sale</p>
    {% endif %}
  </a>
</div>

---

Webhook 配置

在 shopify.app.toml 中：

[webhooks]
api_version = "2026-01"

[[webhooks.subscriptions]]
topics = ["orders/create", "orders/updated"]
uri = "/webhooks/orders"

[[webhooks.subscriptions]]
topics = ["products/update"]
uri = "/webhooks/products"

# GDPR mandatory webhooks (required for app approval)
[webhooks.privacy_compliance]
customer_data_request_url = "/webhooks/gdpr/data-request"
customer_deletion_url = "/webhooks/gdpr/customer-deletion"
shop_deletion_url = "/webhooks/gdpr/shop-deletion"

---

最佳实践

API 使用

• 新开发优先使用 GraphQL 而非 REST
• 只请求你需要的字段（降低查询成本）
• 使用 pageInfo.endCursor 实现基于游标的分页
• 处理超过 250 个项目时使用批量操作
• 使用指数退避处理速率限制

安全

• 将 API 凭据存储在环境变量中
• 处理前始终验证 Webhook HMAC 签名
• 验证 OAuth state 参数以防止 CSRF
• 请求最小访问范围
• 为嵌入式应用使用会话令牌

性能

• 当数据不经常变化时缓存 API 响应
• 在扩展中使用懒加载
• 使用 img_url 过滤器优化主题中的图片
• 通过响应头监控 GraphQL 查询成本

---

故障排查

如果看到速率限制错误： → 实现指数退避重试逻辑 → 对大型数据集切换到批量操作 → 监控 X-Shopify-Shop-Api-Call-Limit 头

如果身份验证失败： → 验证访问令牌是否仍然有效 → 检查是否已授予所有必需的范围 → 确保 OAuth 流程成功完成

如果扩展未显示： → 验证扩展目标是否正确 → 检查扩展是否通过 shopify app deploy 发布 → 确认应用已安装在测试商店上

如果 Webhook 未收到事件： → 验证 Webhook URL 是否可公开访问 → 检查 HMAC 签名验证逻辑 → 在 Partner Dashboard 中查看 Webhook 日志

如果 GraphQL 查询失败： → 根据 schema 验证查询（使用 GraphiQL 浏览器） → 检查错误消息中是否有已弃用字段 → 验证你是否具有所需的访问范围

---

参考文件

有关详细的实现指南，请阅读以下文件：

• references/app-development.md - OAuth 身份验证流程、产品/订单/计费的 GraphQL 变更、Webhook 处理器、计费 API 集成
• references/extensions.md - 结账 UI 组件、管理 UI 扩展、POS 扩展、用于折扣/支付/配送的 Shopify Functions
• references/themes.md - Liquid 语法参考、主题目录结构、区块和片段、常见模式

---

脚本

• scripts/shopify_init.py - 交互式项目脚手架。运行：python scripts/shopify_init.py
• scripts/shopify_graphql.py - GraphQL 工具，包含查询模板、分页、速率限制。导入：from shopify_graphql import ShopifyGraphQL

---

官方文档链接

• Shopify 开发者文档：https://shopify.dev/docs
• GraphQL Admin API 参考：https://shopify.dev/docs/api/admin-graphql
• Shopify CLI 参考：https://shopify.dev/docs/api/shopify-cli
• Polaris 设计系统：https://polaris.shopify.com

API 版本：2026-01（季度发布，12 个月弃用窗口）