---

name: shopify-development description: 使用 GraphQL Admin API、Shopify CLI、Polaris UI 和 Liquid 构建 Shopify 应用、扩展和主题。 risk: unknown source: community date_added: '2026-02-27'

Shopify 开发技能

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

• 构建 Shopify 应用或扩展
• 创建结账/管理后台/POS UI 自定义
• 使用 Liquid 模板开发主题
• 集成 Shopify GraphQL 或 REST API
• 实现 Webhooks 或计费功能
• 使用 Metafields 或 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
          }
        }
      }
    }
  }
}

设置 Metafields

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 | image_url: width: 400 }}"
        alt="{{ product.featured_image.alt | escape }}"
      />
    {% endif %}
  </a>
</div>