Skip to main content

5 分鐘上手 Claude Code 進行 Shopify 開發

· One min read
Shopify Dev MasterClass Team
Shopify Dev MasterClass Team
Core Contributors

如果你一直聽說 Claude Code 但不確定它如何融入你的 Shopify 開發工作流程，本指南將在五分鐘內讓你啟動並運行。完成後，你將安裝好 Claude Code，為 Shopify 工作配置完畢，並執行了你的第一個 AI 輔助商店操作。

先決條件​

開始之前，確保你準備好以下項目：

  • Node.js 18+ 已安裝在你的機器上
  • 一個 Shopify Partner 帳戶（可在 partners.shopify.com 免費建立）
  • 一個包含一些範例產品的開發商店
  • 一個具有適當 scopes 的 Shopify Admin API 存取權杖

步驟 1：安裝 Claude Code​

在你的機器上安裝 Claude Code 只需一個命令：

npm install -g @anthropic-ai/claude-code

驗證安裝：

claude --version

你應該會看到版本號印在終端機上。如果遇到權限錯誤，你可能需要配置 npm prefix 或使用 sudo（不過我們建議修復你的 npm 權限）。

步驟 2：初始化你的 Shopify 專案​

導航到你的 Shopify 專案目錄 —— 或建立一個新的：

mkdir my-shopify-app && cd my-shopify-app
npm init -y
npm install @shopify/shopify-api @shopify/shopify-app-remix

現在在你的專案中啟動 Claude Code：

claude

Claude 會自動分析你的專案結構並了解上下文。你可以立即開始問它 Shopify 相關的問題。

步驟 3：配置 MCP 以存取 Shopify​

Claude Code 對 Shopify 開發的真正威力來自透過 MCP（Model Context Protocol）連接到你的商店。在你的專案根目錄建立一個 .mcp.json 檔案：

{
  "mcpServers": {
    "shopify-dev-store": {
      "command": "npx",
      "args": [
        "-y",
        "@anthropic-ai/shopify-mcp-server",
        "--store", "your-store.myshopify.com",
        "--token", "${SHOPIFY_ACCESS_TOKEN}"
      ],
      "env": {
        "SHOPIFY_ACCESS_TOKEN": ""
      }
    }
  }
}

將你的存取權杖設為環境變數：

export SHOPIFY_ACCESS_TOKEN="shpat_xxxxxxxxxxxxxxxxxxxxx"

現在當你啟動 Claude Code 時，它將透過 MCP 伺服器直接存取你的 Shopify 商店資料。

步驟 4：你的第一個 AI 輔助命令​

連接 Claude Code 到你的商店後，試試這些有用的起始命令：

探索你的商店資料​

> List all products in my store with their variants and prices

Claude 會使用 MCP 連接查詢你的商店 Admin API，並直接在你的終端機中返回結構化的產品資料。

產生 Shopify 程式碼​

> Create a webhook handler for orders/create that sends a Slack notification

Claude 會產生正式環境就緒的程式碼，處理 webhook 驗證、payload 解析和 Slack API 呼叫 —— 全部遵循 Shopify 最佳實踐。

除錯 API 問題​

> I'm getting a 429 error when querying the Storefront API. Help me implement proper rate limiting.

Claude 了解 Shopify 的速率限制模型（REST 的漏桶演算法和 GraphQL 的查詢成本），會產生適當的重試邏輯。

Shopify 開發最有用的命令​

以下是我們每天都在使用的 Claude Code 命令：

命令模式功能
> Show me the GraphQL query to fetch products with metafields產生正確的 Storefront 或 Admin API 查詢
> Create a Shopify Function for a volume discount搭建完整的 Shopify Function，使用 Rust 或 JavaScript
> Convert this REST API call to GraphQL將已棄用的 REST 模式遷移到現代 GraphQL
> Review this Liquid template for performance issues分析主題程式碼並建議最佳化
> Set up a CI pipeline for this Shopify app產生 GitHub Actions 或類似的 CI 配置

常見陷阱及如何避免​

陷阱 1：API 版本不匹配​

Claude 可能會產生針對與你的應用程式配置不同的 API 版本的程式碼。始終在你的提示中指定版本：

> Generate a product query using the 2026-01 Admin API version

或者更好的做法是，確保你的 shopify.app.toml 有正確的版本，Claude 會從上下文中獲取它。

陷阱 2：Scope 混淆​

如果 Claude 無法透過 MCP 存取某些商店資料，很可能是 scopes 的問題。確保你的存取權杖包含你需要的 scopes：

# Common scopes for development
read_products, write_products
read_orders, write_orders
read_customers
read_inventory, write_inventory

陷阱 3：權杖安全​

絕不要將你的 .mcp.json 與硬編碼的權杖一起提交。始終使用如上所示的環境變數，並將 .mcp.json 添加到你的 .gitignore：

echo ".mcp.json" >> .gitignore

陷阱 4：GraphQL 查詢複雜度​

Shopify 的 GraphQL API 有查詢成本限制。如果 Claude 產生了深度巢狀的查詢，請要求它最佳化：

> This query exceeds the cost limit. Refactor it to use pagination and reduce nesting.

下一步​

現在你已經為 Shopify 開發設置好了 Claude Code，你已經準備好加速你的工作流程了。在即將推出的文章中，我們將涵蓋：

  • 使用 Claude Code 作為你的配對程式設計師從零開始建構一個完整的 Shopify 應用程式
  • 用於多商店管理的進階 MCP 配置
  • 使用 Claude Code 將主題從 Liquid 遷移到 Hydrogen

Claude Code 和 Shopify 開發的組合確實是革命性的。一旦你體驗了擁有一個了解 Shopify API 表面積的 AI 助手的速度，回到只有文件的開發方式會感覺異常緩慢。

試試看，然後讓我們知道你的體驗。