商品色碼：不同商品網址

每個顏色都是各自獨立的商品頁（各有網址、圖片與文案），但又希望顧客在商品頁能看到其他顏色、點一下就切換過去，就用 分色設定 把這些商品串起來。顏色選項可以呈現成色塊或花色圖片兩種樣子。

如果所有顏色與尺寸希望集中在同一個商品網址、同一頁切換，要改用另一種做法，可以看〈樣式色碼：同個商品網址〉。

目錄
一、應用情境二、前置準備三、做法一：用色塊切換顏色四、做法二：用花色圖片切換五、注意事項六、常見問題 FAQ 七、相關教學

一、應用情境

情境 | 說明 | 適用對象
每色各自經營 | 每個顏色有完全不同的整套圖片與詳細介紹，想當獨立商品曝光 | 想讓每個顏色各自曝光的店家
顏色要用花色圖 | 豹紋、格紋、條紋等花色無法用純色塊表達，需要用圖片當選項 | 顏色是圖案、無法用色塊表達的店家
各色分開上架 | 持續出新色時，新色先開放預告、舊色照常販售，各自控制上下架時間 | 會不斷擴充色系的品牌
針對單色投廣告 | 廣告可導向特定顏色的商品頁，各色銷量也分開統計 | 有投放需求的店家

二、前置準備

每個顏色各建立一個商品：於後台左側選單進入 商品設定 → 商品 → 新增，有幾個顏色就建立幾個商品。完整流程可以看〈建立一般商品〉。

決定顏色選項要長什麼樣：純色用商品色碼顯示色塊，花色用分色圖片上傳圖片。

準備素材：色塊需要各顏色的色碼（可查色碼表）；花色需要各花色的圖片，每個商品各上傳一張。

注意：
分色設定要每個商品都各自設定一次。例如紅、黑、白三件上衣，三個商品都要各自填自己的顏色選項，並且都要把另外兩件加進分色成列商品，前台切換才會完整。

三、做法一：用色塊切換顏色

適合純色商品。每個顏色是獨立商品，用 商品色碼 顯示成色塊，再用 分色成列商品 把彼此串起來。

步驟一：找到分色設定的位置

進入商品編輯頁的 商品資訊 分頁，找到分色相關欄位：

分色成列商品：選擇要跟這件商品一起呈現、可互相切換的其他顏色商品。

商品色碼：這一件商品本身的顏色，前台會顯示成色塊。

顏色名稱：這個顏色的名稱，會顯示在購物車與結帳頁的商品規格上。

圖：商品資訊分頁中的分色成列商品與商品色碼欄位

小技巧：
以三件上衣為例，後台分別建立紅色、黑色、白色三個商品。在黑色上衣的編輯頁，商品色碼 就填 #000000；紅色那件填紅色色碼，依此類推。

步驟二：設定樣式和選項名稱

在下方 商品樣式 區設定這件商品自己的樣式，例如尺寸 S／M／L。顏色已經由商品色碼負責，樣式這裡不需要再放顏色。

圖：設定商品自己的樣式與選項名稱（例如尺寸）

步驟三：選擇要一起成列的商品並儲存

在 分色成列商品 欄位選擇其他顏色的商品，完成後點擊儲存。

圖：在分色成列商品欄位選擇其他顏色的商品

注意：
被選到的商品，也要各自前往設定自己的 商品色碼，沒設色碼的商品不會出現在顏色選項裡。

完成後的前台畫面

顧客在商品頁的「顏色」選項會看到所有串起來的顏色色塊，點擊其他顏色時，頁面會跳到該顏色的商品頁。

圖：前台商品頁的顏色色塊（點擊會切換到該顏色的商品頁）

四、做法二：用花色圖片切換

適合豹紋、格紋、條紋這類純色塊表達不出來的商品。改用 分色圖片 上傳花色圖當作顏色選項，一樣要搭配分色成列商品串起來。

步驟一：找到商品樣式的設定位置

進入商品編輯頁，在下方 商品樣式 區找到樣式名稱（紅框）與選項名稱（橘框）的設定位置。

圖：商品樣式區的設定位置（紅框為樣式名稱、橘框為選項名稱）

步驟二：設定樣式名稱

以一件要用花色當選項的衣服為例，尺寸有 S／M／L，花色有豹紋與黑白條紋。花色由分色圖片負責，所以樣式這裡填尺寸即可。

圖：填寫樣式名稱

步驟三：設定選項名稱

接著填入該層底下的選項，例如尺寸的 S、M、L。

圖：填寫選項名稱

步驟四：上傳分色圖片

在 商品資訊 分頁找到 分色圖片 欄位，上傳這件商品要顯示成顏色選項的花色圖（限一張）。建議直接用花色的特寫，顧客才看得出差異。

圖：在分色圖片欄位上傳要顯示的花色圖

步驟五：選擇要一起成列的商品並儲存

同樣在 商品資訊 分頁找到 分色成列商品 欄位，選擇其他花色的商品，完成後點擊儲存。

圖：選擇要一起成列的其他花色商品

完成後的前台畫面

顧客會在商品頁看到一排花色縮圖，點擊其他花色時，頁面會跳到該花色的商品頁。

圖：前台商品頁的花色圖片選項（點擊會切換到該花色的商品頁）

五、注意事項

顏色選項必須有色碼或圖片：分色成列商品只支援 商品色碼 與 分色圖片，兩者都沒設定的商品不會出現在前台的顏色選項裡。

不要再設樣式色碼：設定分色成列商品後，請勿在商品樣式裡再填樣式色碼，兩種做法只能擇一。

同時設定時以圖片優先：若一件商品同時設了商品色碼與分色圖片，前台會顯示分色圖片，色碼不會生效。

分色圖片要搭配分色成列：只上傳分色圖片、沒有設定分色成列商品的話，顏色選項不會出現。

重要提醒：
分色設定是雙向的。A 商品加了 B，但 B 沒有加 A，顧客從 B 就看不到 A、也切換不回去。

六、常見問題 FAQ

Q：設定完分色成列商品，但前台沒看到顏色選項？

A：請依序檢查：

每個商品都要設商品色碼或分色圖片：兩者都沒設的商品不會出現在選項裡。

每個商品都要各自加入其他顏色：分色成列要每件商品各自設定，不會自動互相關聯。

商品都要在上架期間內：未上架的商品不會出現在前台。

Q：商品色碼跟樣式色碼，我該用哪一個？

A：判斷關鍵是顏色要各自獨立成一頁，還是在同一頁切換。

選商品色碼（不同商品網址）：每個顏色要有自己的網址、圖片與文案；各色要分開設定上下架時間；顏色選項要用花色圖片呈現；或想針對單一顏色投放廣告、分開統計銷量。

選樣式色碼（同個商品網址）：想集中管理，改價改文案只動一個商品；希望 SEO 權重、評價與瀏覽數集中在同一個網址；讓顧客在同一頁選完顏色與尺寸，切換時不換頁。

還在猶豫：多數情況建議先用樣式色碼，管理最單純；確定有「每色獨立經營」的需求再改用商品色碼。

Q：分色圖片可以放幾張？

A：每個商品只能放一張，作為這個顏色在選項列上的縮圖。商品本身的主圖與其他照片，仍在商品資訊分頁的圖片欄位上傳（最多 30 張）。

Q：「顏色名稱」有填跟沒填差在哪？

A：因為各顏色是不同商品，顏色不會出現在樣式文字裡。填了顏色名稱後，購物車與結帳頁的商品規格會一併顯示顏色，顧客與出貨人員比較不會看錯。

Q：每個顏色的價格與庫存要分開設定嗎？

A：要。每個顏色是獨立商品，售價、庫存、上下架時間都各自設定，訂單與報表也會記成不同商品、各色銷量分開統計。要一次調整多個顏色，可以用〈批次修改商品〉。

Q：顏色很多的時候，要一個一個設定嗎？

A：可以改用匯入一次設定完。分色成列商品、商品色碼、顏色名稱都是匯入檔支援的欄位，先匯出既有商品、在檔案裡把各色的關聯與色碼填好，再匯入更新即可，不必逐一進後台編輯。做法可以看〈批次修改商品〉。

七、相關教學

樣式色碼：同個商品網址：所有顏色尺寸集中在同一頁，用色塊切換、不換頁。

建立一般商品：新增商品、填寫基本資料與頁面設計的完整流程。

批次修改商品：用檔案匯入一次修改大量商品的價格、庫存與分色設定。

圖片管理（圖庫功能）：集中管理商品與分色圖片，方便重複使用。