Webflow 持續管理設計 + Shopify Theme 同步方案 (2)

這是一個進階需求！你希望保留 Webflow 作為視覺設計工具，同時輸出可用的 Shopify Theme。以下是幾種可行的架構方案：

方案比較總覽

方案	複雜度	維護成本	設計自由度	適合對象
A. Headless 架構	⭐⭐⭐⭐	中	最高	技術團隊
B. 自動化轉換 Pipeline	⭐⭐⭐	中高	高	開發者
C. Webflow + Shopify Buy Button	⭐⭐	低	高	小型電商
D. 設計系統同步	⭐⭐⭐	中	中	品牌團隊

方案 A：Headless 架構（推薦）

概念： Webflow 負責前端呈現，Shopify 負責後端商務邏輯

┌─────────────┐     API      ┌─────────────┐
│   Webflow   │ ◄──────────► │  Shopify    │
│  (前端設計)  │  Storefront  │ (商品/訂單)  │
└─────────────┘     API      └─────────────┘

實作步驟

1. 啟用 Shopify Storefront API

在 Shopify 後台：

Settings → Apps and sales channels → Develop apps
建立 Private App，啟用 Storefront API 權限

2. 在 Webflow 中整合 Shopify

請 Claude Code 幫你生成整合腳本：

請幫我建立一個 Webflow 專用的 Shopify Storefront API 整合腳本：

需求：
1. 使用 Shopify Storefront API (GraphQL)
2. 功能包含：
   - 載入商品列表到 Webflow Collection List
   - 商品詳情頁動態載入
   - 加入購物車（AJAX）
   - 購物車側邊欄
   - 結帳導向 Shopify Checkout
3. 使用 vanilla JavaScript（不依賴框架）
4. 支援商品變體選擇
5. 處理庫存狀態顯示

請提供完整的 JavaScript 檔案和 Webflow 設定說明。

3. Claude Code 會生成類似這樣的整合代碼：

// shopify-webflow-integration.js
const SHOPIFY_DOMAIN = 'your-store.myshopify.com';
const STOREFRONT_TOKEN = 'your-storefront-access-token';

class ShopifyWebflowBridge {
  constructor() {
    this.cart = [];
    this.init();
  }

  async fetchProducts(collectionHandle) {
    const query = `
      query getCollection($handle: String!) {
        collection(handle: $handle) {
          products(first: 20) {
            edges {
              node {
                id
                title
                handle
                priceRange {
                  minVariantPrice {
                    amount
                    currencyCode
                  }
                }
                images(first: 1) {
                  edges {
                    node {
                      url
                    }
                  }
                }
              }
            }
          }
        }
      }
    `;
    // ... API 呼叫邏輯
  }

  async addToCart(variantId, quantity) {
    // 購物車邏輯
  }

  async createCheckout() {
    // 導向 Shopify Checkout
  }
}

4. Webflow 設定

在 Webflow 中：

使用 Custom Attributes 標記動態元素
data-shopify-product-list → 商品列表容器
data-shopify-cart → 購物車容器
data-shopify-add-to-cart → 加入購物車按鈕

方案 B：自動化轉換 Pipeline

概念： 建立自動化流程，每次 Webflow 更新後自動轉換為 Shopify Theme

┌──────────┐    Webhook    ┌──────────┐    Deploy    ┌──────────┐
│ Webflow  │ ────────────► │ 轉換服務  │ ───────────► │ Shopify  │
│  發布    │               │(Claude)  │              │  Theme   │
└──────────┘               └──────────┘              └──────────┘

使用 Claude Code 建立轉換腳本

請幫我建立一個 Node.js 自動化腳本，用於 Webflow → Shopify Theme 轉換：

需求：
1. 監聽 Webflow webhook（網站發布事件）
2. 下載最新的 Webflow 匯出檔案
3. 執行轉換邏輯：
   - HTML → Liquid templates
   - 識別並抽取 sections
   - 更新 asset 路徑
   - 保留 CSS class 結構
4. 產生差異報告（哪些檔案被更新）
5. 透過 Shopify Theme API 部署
6. 發送 Slack 通知

技術堆疊：Node.js + Cheerio + Shopify API

目錄結構範例：

webflow-shopify-sync/
├── src/
│   ├── webhooks/
│   │   └── webflow-publish.js
│   ├── converters/
│   │   ├── html-to-liquid.js
│   │   ├── section-extractor.js
│   │   └── asset-transformer.js
│   ├── deployers/
│   │   └── shopify-theme-api.js
│   └── index.js
├── templates/
│   ├── section-wrapper.liquid
│   └── theme-base.liquid
├── config/
│   └── mapping.json      # Webflow class → Shopify section 對應
└── package.json

關鍵轉換邏輯

// html-to-liquid.js 核心邏輯
const cheerio = require('cheerio');

function convertToLiquid(html, mappingConfig) {
  const $ = cheerio.load(html);
  
  // 1. 轉換圖片路徑
  $('img').each((i, el) => {
    const src = $(el).attr('src');
    $(el).attr('src', `{{ '${path.basename(src)}' | asset_url }}`);
  });
  
  // 2. 識別動態區塊
  $('[data-shopify-section]').each((i, el) => {
    const sectionType = $(el).data('shopify-section');
    const sectionContent = $(el).html();
    // 抽取為獨立 section 檔案
    createSection(sectionType, sectionContent);
  });
  
  // 3. 替換商品相關內容
  $('[data-shopify-product-title]').each((i, el) => {
    $(el).text('{{ product.title }}');
  });
  
  return $.html();
}

方案 C：Webflow + Shopify Buy Button（最簡單）

適合： 小型電商、內容為主的網站

概念： 完全使用 Webflow 建站，僅嵌入 Shopify Buy Button 處理購物功能

設定步驟

Shopify 後台 → Sales channels → Buy Button
為每個商品生成嵌入代碼
在 Webflow 中使用 Embed 元件貼入

請 Claude Code 幫你批量生成：

請幫我建立一個腳本，從 Shopify 批量取得所有商品的 Buy Button embed code，
並生成一份對照表（商品名稱 → embed code），方便我在 Webflow 中使用。

方案 D：設計系統同步（Design Token）

概念： 從 Webflow 抽取設計變數，同步到 Shopify Theme settings

Webflow 設計                    Shopify Theme
─────────────                   ─────────────
顏色變數          ──────►       settings_schema.json
字型設定          ──────►       CSS 變數
間距系統          ──────►       Liquid 設定

Claude Code 指令

請幫我建立一個設計系統同步工具：

1. 從 Webflow 匯出的 CSS 中抽取：
   - 顏色變數（所有 color 值）
   - 字型設定（font-family, font-size, line-height）
   - 間距值（margin, padding 常用值）

2. 轉換為 Shopify settings_schema.json 格式：
   - 建立「品牌顏色」設定區塊
   - 建立「字型」設定區塊
   - 建立「間距」設定區塊

3. 生成對應的 CSS 變數檔案，使用 Liquid 讀取設定值

這樣商家可以在 Shopify Theme Editor 中調整這些值，
而設計師可以在 Webflow 中定義初始值。

輸出範例：

// settings_schema.json
{
  "name": "品牌顏色",
  "settings": [
    {
      "type": "color",
      "id": "color_primary",
      "label": "主要顏色",
      "default": "#2D3436"
    },
    {
      "type": "color", 
      "id": "color_secondary",
      "label": "次要顏色",
      "default": "#636E72"
    }
  ]
}

/* base.css.liquid */
:root {
  --color-primary: {{ settings.color_primary }};
  --color-secondary: {{ settings.color_secondary }};
  --font-heading: {{ settings.font_heading.family }};
}

我的推薦：混合方案

根據你的需求，我建議 方案 A + 方案 D 的混合：

┌─────────────────────────────────────────────────────────┐
│                    工作流程                              │
├─────────────────────────────────────────────────────────┤
│                                                         │
│   設計師 (Webflow)              開發者 (Claude Code)     │
│   ─────────────────            ──────────────────       │
│         │                              │                │
│         ▼                              │                │
│   ┌───────────┐    Design Tokens       │                │
│   │ 設計更新   │ ─────────────────►    │                │
│   └───────────┘                        ▼                │
│         │                      ┌─────────────┐          │
│         │                      │ 同步設定到   │          │
│         │                      │ Shopify     │          │
│         │                      └─────────────┘          │
│         │                              │                │
│         ▼                              ▼                │
│   ┌───────────┐               ┌─────────────┐          │
│   │ Webflow   │◄─── API ────►│  Shopify    │          │
│   │ 前端顯示   │  Storefront  │  商品/訂單   │          │
│   └───────────┘               └─────────────┘          │
│                                                         │
└─────────────────────────────────────────────────────────┘

優點：

設計師完全在 Webflow 中工作
品牌設定可同步到 Shopify 備用
商務邏輯由 Shopify 處理
結帳流程使用 Shopify 原生（安全、可靠）