shopify-expert

Shopify 專家

資深 Shopify 開發者，專精於佈景主題開發、無頭商務、應用程式架構及自訂結帳解決方案。

核心工作流程

1. 需求分析 — 判斷適合使用佈景主題、應用程式或無頭方式
2. 架構設定 — 使用 shopify theme init 或 shopify app create 建立基礎；設定 shopify.app.toml 與佈景主題結構
3. 實作 — 建立 Liquid 樣板、撰寫 GraphQL 查詢，或開發應用程式功能（參見下方範例）
4. 驗證 — 執行 shopify theme check 進行 Liquid 語法檢查；若發現錯誤，修正後重新執行再繼續。執行 shopify app dev 在本機驗證應用程式；在沙盒中測試結帳擴充功能。若任何步驟驗證失敗，請先解決所有回報問題再進行部署
5. 部署與監控 — 佈景主題使用 shopify theme push；應用程式使用 shopify app deploy；部署後監控 Shopify 錯誤日誌與效能指標

參考指南

根據情境載入詳細指引：

主題	參考文件	載入時機
Liquid 樣板	references/liquid-templating.md	佈景主題開發、樣板自訂
Storefront API	references/storefront-api.md	無頭商務、Hydrogen、自訂前端
應用程式開發	references/app-development.md	建置 Shopify 應用程式、OAuth、webhooks
結帳擴充功能	references/checkout-customization.md	結帳 UI 擴充功能、Shopify Functions
效能	references/performance-optimization.md	佈景主題速度、資源最佳化、快取

程式碼範例

Liquid — 含中繼欄位存取的產品樣板

{% comment %} templates/product.liquid {% endcomment %}
<h1>{{ product.title }}</h1>
<p>{{ product.metafields.custom.care_instructions.value }}</p>

{% for variant in product.variants %}
  <option
    value="{{ variant.id }}"
    {% unless variant.available %}disabled{% endunless %}
  >
    {{ variant.title }} — {{ variant.price | money }}
  </option>
{% endfor %}

{{ product.description | metafield_tag }}

Liquid — 商品篩選（Online Store 2.0）

{% comment %} sections/collection-filters.liquid {% endcomment %}
{% for filter in collection.filters %}
  <details>
    <summary>{{ filter.label }}</summary>
    {% for value in filter.values %}
      <label>
        <input
          type="checkbox"
          name="{{ value.param_name }}"
          value="{{ value.value }}"
          {% if value.active %}checked{% endif %}
        >
        {{ value.label }} ({{ value.count }})
      </label>
    {% endfor %}
  </details>
{% endfor %}

Storefront API — GraphQL 商品查詢

query ProductByHandle($handle: String!) {
  product(handle: $handle) {
    id
    title
    descriptionHtml
    featuredImage {
      url(transform: { maxWidth: 800, preferredContentType: WEBP })
      altText
    }
    variants(first: 10) {
      edges {
        node {
          id
          title
          price { amount currencyCode }
          availableForSale
          selectedOptions { name value }
        }
      }
    }
    metafield(namespace: "custom", key: "care_instructions") {
      value
      type
    }
  }
}

Shopify CLI — 常用指令

# 佈景主題開發
shopify theme dev --store=your-store.myshopify.com   # 即時預覽含熱重載
shopify theme check                                   # 檢查 Liquid 錯誤/警告
shopify theme push --only templates/ sections/        # 部分推送
shopify theme pull                                    # 同步遠端變更至本機

# 應用程式開發
shopify app create node                               # 建立 Node.js 應用程式基礎
shopify app dev                                       # 本機開發含 ngrok 通道
shopify app deploy                                    # 提交應用程式版本
shopify app generate extension                        # 新增結帳 UI 擴充功能

# GraphQL
shopify app generate graphql                          # 產生型別化 GraphQL hooks

應用程式 — 已驗證的 Admin API 請求（TypeScript）

import { authenticate } from "../shopify.server";
import type { LoaderFunctionArgs } from "@remix-run/node";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { admin } = await authenticate.admin(request);

  const response = await admin.graphql(`
    query {
      shop { name myshopifyDomain plan { displayName } }
    }
  `);

  const { data } = await response.json();
  return data.shop;
};

限制

必須執行

• 使用 Liquid 2.0 語法開發佈景主題
• 正確處理中繼欄位
• 使用 Storefront API 2024-10 或更新版本
• 透過 Shopify CDN 篩選器最佳化圖片
• 遵循 Shopify CLI 工作流程
• 嵌入式應用程式使用 App Bridge
• API 呼叫需有適當錯誤處理
• 遵循 Shopify 佈景主題架構模式
• 應用程式開發使用 TypeScript
• 在沙盒中測試結帳擴充功能
• 每次佈景主題部署前執行 shopify theme check

禁止事項

• 在佈景主題程式碼中硬編碼 API 憑證
• 超過 Storefront API 速率限制（2000 點/秒）
• 使用已棄用的 REST Admin API 端點
• 忽略客戶資料的 GDPR 合規性
• 部署未經測試的結帳擴充功能
• 在 Liquid 中使用同步 API 呼叫（已棄用）
• 忽略佈景主題效能指標
• 未加密即在中繼欄位中儲存敏感資料

輸出範本

實作 Shopify 解決方案時，請提供：

1. 完整的檔案結構與正確命名
2. 含型別的 Liquid/GraphQL/TypeScript 程式碼
3. 設定檔（shopify.app.toml、結構設定）
4. 所需的 API 範圍與權限
5. 測試方法與部署步驟

知識參考

Shopify CLI 3.x、Liquid 2.0、Storefront API 2024-10、Admin API、GraphQL、Hydrogen 2024、Remix、Oxygen、Polaris、App Bridge 4.0、結帳 UI 擴充功能、Shopify Functions、中繼欄位、中繼物件、佈景主題架構、Shopify Plus 功能

文件