技能 shopify-development
📦

shopify-development

低風險 ⚙️ 外部命令🌐 網路存取🔑 環境變數📁 檔案系統存取

建立 Shopify 應用程式、擴充功能和主題

Shopify 開發需要掌握多項技術:OAuth 認證、GraphQL API、Liquid 模板引擎和 Polaris UI 元件。此技能提供已驗證的程式碼範例、CLI 工作流程和 API 整合指南,加速您的 Shopify 專案開發。

支援: Claude Codex Code(CC)
🥈 78 白銀
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「shopify-development」。 建立帶分頁的產品查詢

預期結果:

  • query GetProducts($first: Int!, $after: String) {
  • products(first: $first, after: $after) {
  • edges {
  • node {
  • id
  • title
  • variants(first: 10) {
  • edges {
  • node {
  • id
  • price
  • inventoryQuantity
  • selectedOptions {
  • name
  • value
  • }
  • }
  • }
  • }
  • }
  • }
  • pageInfo {
  • hasNextPage
  • endCursor
  • }
  • }
  • }

正在使用「shopify-development」。 產品頁面的 Liquid 模板

預期結果:

  • {% comment %} 帶 section 的產品模板 {% endcomment %}
  • {% section 'product-hero' %}
  • <div class="product-hero">
  • <h1>{{ product.title }}</h1>
  • <p class="price">{{ product.selected_or_first_available_variant.price | money }}</p>
  • {% form 'product', product %}
  • <select name="id">
  • {% for variant in product.variants %}
  • <option value="{{ variant.id }}">{{ variant.title }}</option>
  • {% endfor %}
  • </select>
  • <button type="submit">加入購物車</button>
  • {% endform %}
  • </div>
  • {% endsection %}

安全審計

低風險
v1 • 2/25/2026

Static analyzer flagged 553 potential issues, but evaluation confirms these are FALSE POSITIVES for legitimate Shopify development patterns. External commands are Shopify CLI tooling (shopify app/theme init, dev, deploy). Network calls target official Shopify domains (shopify.dev, myshopify.com). Environment access stores standard API credentials (SHOPIFY_API_KEY, SHOPIFY_API_SECRET). The skill follows Shopify best practices with OAuth CSRF protection and secure credential handling. Low risk due to legitimate development tooling usage.

10
已掃描檔案
3,388
分析行數
7
發現項
1
審計總數
低風險問題 (3)
External Command Execution - Shopify CLI
The skill executes Shopify CLI commands via subprocess. These are legitimate development tooling commands (shopify app init, shopify theme dev) but represent external code execution.
Network Access - Shopify API Endpoints
The skill makes HTTP requests to Shopify domains (myshopify.com, shopify.dev) for OAuth authentication and GraphQL API operations.
Environment Variable Access - API Credentials
The skill reads environment variables for Shopify API credentials (SHOPIFY_API_KEY, SHOPIFY_API_SECRET). This is standard practice but requires secure environment configuration.
審計者: claude

品質評分

82
架構
100
可維護性
87
內容
23
社群
84
安全
91
規範符合性

你能建構什麼

電商賣家建立自訂工具

建立應用程式以自動化庫存管理、產生自訂報表,或整合第三方服務(如物流供應商)。

代理商開發者為客戶建立解決方案

使用經驗證的模式快速建置客戶專案,包含結帳自訂、管理後台擴充功能和主題修改。

獨立開發者發布 Shopify 應用程式

使用帳單整合、webhooks 和 Shopify Functions 建立並獲利應用程式,上架至 Shopify App Store。

試試這些提示

初始化新的 Shopify 應用程式
使用 Shopify CLI 建立一個新的 Node.js 和 React Shopify 應用程式。包含 OAuth 認證、GraphQL API 用戶端設定和基本產品清單頁面。設定讀取產品和訂單的存取權限範圍。
建立結帳 UI 擴充功能
產生一個結帳 UI 擴充功能,新增自訂折扣碼欄位和禮品訊息輸入框。使用 Polaris 元件和結帳擴充功能 API。包含 TypeScript 型別和範例在地化字串。
建立產品的 GraphQL 查詢
撰寫 GraphQL 查詢以獲取包含變體、圖片和 metafields 的產品。包含基於游標的分頁並按商品系列篩選。根據 Shopify Admin API 2026-01 架構進行驗證。
實作 Webhook 處理器
建立訂單建立事件的 webhook 處理器。驗證 HMAC 簽章、解析 webhook 負載,並觸發履行工作流程。包含錯誤處理和失敗遞送的重試邏輯。

最佳實務

  • 務必驗證 OAuth 狀態參數以防止應用程式安裝期間的 CSRF 攻擊
  • 對 GraphQL 查詢使用基於游標的分頁以有效處理大型資料集
  • 將 API 憑證儲存在環境變數中,切勿將機密資訊提交至版本控制
  • 對所有 webhook 處理器實作 HMAC-SHA256 webhook 簽章驗證
  • 遵循 Polaris 設計系統以在 Shopify 管理後台擴充功能中保持一致的 UI

避免

  • 直接在原始碼檔案中硬編碼 API 憑證或存取權杖
  • 在沒有適當 OAuth 權杖交換的情況下進行未認證的 GraphQL 請求
  • 忽略 API 回應中的速率限制標頭 (X-Shopify-Shop-Domain) 和查詢成本
  • 當 GraphQL 提供更有效的批次操作時仍使用 REST API
  • 跳過 webhook HMAC 驗證,這可能允許惡意 webhook 注入

常見問題

此技能支援哪個 Shopify API 版本?
此技能使用 Shopify Admin API 2026-01。GraphQL 查詢和變更操作均針對此版本進行驗證。Shopify 每季度發布新的 API 版本,提供 12 個月的支援期。
我需要 Shopify 合作夥伴帳戶才能使用此技能嗎?
是的,您需要免費的 Shopify 合作夥伴帳戶才能建立開發商店、註冊應用程式,並存取合作夥伴儀表板進行應用程式提交和帳單設定。
此技能能協助 Shopify Plus 功能嗎?
是的,此技能涵蓋 Shopify Plus 功能,包括結帳擴充功能、用於自訂折扣和配送規則的 Shopify Functions,以及 Plus 方案上的 B2B 功能。
我如何在發布到 App Store 之前測試我的應用程式?
使用合作夥伴儀表板中的開發商店,透過 'shopify app dev' 在本機測試應用程式。在多種商店類型上測試,並在提交前使用 Shopify App Review 檢查清單。
應用程式擴充功能和主題擴充功能有什麼區別?
應用程式擴充功能為 Shopify 管理後台或結帳新增功能(後端邏輯)。主題擴充功能使用 Liquid 修改店面外觀(前端 UI)。許多專案需要兩者協同運作。
Shopify 應用程式的帳單如何運作?
Shopify 透過 Billing API 處理帳單。您可以收取一次性費用、定期訂閱或使用量計價。Shopify 會收取收入分成並處理付款作業。