商品色碼：不同商品網址
商品色碼：不同商品網址
每個顏色都是各自獨立的商品頁（各有網址、圖片與文案），但又希望顧客在商品頁能看到其他顏色、點一下就切換過去，就用 分色設定 把這些商品串起來。顏色選項可以呈現成色塊或花色圖片兩種樣子。
如果所有顏色與尺寸希望集中在同一個商品網址、同一頁切換，要改用另一種做法，可以看〈樣式色碼：同個商品網址〉。
一、應用情境
| 情境 | 說明 | 適用對象 |
|---|---|---|
| 每色各自經營 | 每個顏色有完全不同的整套圖片與詳細介紹，想當獨立商品曝光 | 想讓每個顏色各自曝光的店家 |
| 顏色要用花色圖 | 豹紋、格紋、條紋等花色無法用純色塊表達，需要用圖片當選項 | 顏色是圖案、無法用色塊表達的店家 |
| 各色分開上架 | 持續出新色時，新色先開放預告、舊色照常販售，各自控制上下架時間 | 會不斷擴充色系的品牌 |
| 針對單色投廣告 | 廣告可導向特定顏色的商品頁，各色銷量也分開統計 | 有投放需求的店家 |
二、前置準備
- 每個顏色各建立一個商品：於後台左側選單進入 商品設定 → 商品 → 新增，有幾個顏色就建立幾個商品。完整流程可以看〈建立一般商品〉。
- 決定顏色選項要長什麼樣：純色用商品色碼顯示色塊，花色用分色圖片上傳圖片。
- 準備素材：色塊需要各顏色的色碼（可查色碼表）；花色需要各花色的圖片，每個商品各上傳一張。
⚠️ 注意：
分色設定要每個商品都各自設定一次。例如紅、黑、白三件上衣，三個商品都要各自填自己的顏色選項，並且都要把另外兩件加進分色成列商品，前台切換才會完整。
三、做法一：用色塊切換顏色
適合純色商品。每個顏色是獨立商品，用 商品色碼 顯示成色塊，再用 分色成列商品 把彼此串起來。
步驟一：找到分色設定的位置
進入商品編輯頁的 商品資訊 分頁，找到分色相關欄位：
- 分色成列商品：選擇要跟這件商品一起呈現、可互相切換的其他顏色商品。
- 商品色碼：這一件商品本身的顏色，前台會顯示成色塊。
- 顏色名稱：這個顏色的名稱，會顯示在購物車與結帳頁的商品規格上。
圖：商品資訊分頁中的分色成列商品與商品色碼欄位
💡 小技巧：
以三件上衣為例，後台分別建立紅色、黑色、白色三個商品。在黑色上衣的編輯頁，商品色碼 就填 #000000；紅色那件填紅色色碼，依此類推。
步驟二：設定樣式和選項名稱
在下方 商品樣式 區設定這件商品自己的樣式，例如尺寸 S／M／L。顏色已經由商品色碼負責，樣式這裡不需要再放顏色。
圖：設定商品自己的樣式與選項名稱（例如尺寸）
步驟三：選擇要一起成列的商品並儲存
在 分色成列商品 欄位選擇其他顏色的商品，完成後點擊儲存。
圖：在分色成列商品欄位選擇其他顏色的商品
⚠️ 注意：
被選到的商品，也要各自前往設定自己的 商品色碼，沒設色碼的商品不會出現在顏色選項裡。
完成後的前台畫面
顧客在商品頁的「顏色」選項會看到所有串起來的顏色色塊，點擊其他顏色時，頁面會跳到該顏色的商品頁。
圖：前台商品頁的顏色色塊（點擊會切換到該顏色的商品頁）
四、做法二：用花色圖片切換
適合豹紋、格紋、條紋這類純色塊表達不出來的商品。改用 分色圖片 上傳花色圖當作顏色選項，一樣要搭配分色成列商品串起來。
步驟一：找到商品樣式的設定位置
進入商品編輯頁，在下方 商品樣式 區找到樣式名稱（紅框）與選項名稱（橘框）的設定位置。
圖：商品樣式區的設定位置（紅框為樣式名稱、橘框為選項名稱）
步驟二：設定樣式名稱
以一件要用花色當選項的衣服為例，尺寸有 S／M／L，花色有豹紋與黑白條紋。花色由分色圖片負責，所以樣式這裡填尺寸即可。
圖：填寫樣式名稱
步驟三：設定選項名稱
接著填入該層底下的選項，例如尺寸的 S、M、L。
圖：填寫選項名稱
步驟四：上傳分色圖片
在 商品資訊 分頁找到 分色圖片 欄位，上傳這件商品要顯示成顏色選項的花色圖（限一張）。建議直接用花色的特寫，顧客才看得出差異。
圖：在分色圖片欄位上傳要顯示的花色圖
步驟五：選擇要一起成列的商品並儲存
同樣在 商品資訊 分頁找到 分色成列商品 欄位，選擇其他花色的商品，完成後點擊儲存。
圖：選擇要一起成列的其他花色商品
完成後的前台畫面
顧客會在商品頁看到一排花色縮圖，點擊其他花色時，頁面會跳到該花色的商品頁。
圖：前台商品頁的花色圖片選項（點擊會切換到該花色的商品頁）
五、注意事項
- 顏色選項必須有色碼或圖片：分色成列商品只支援 商品色碼 與 分色圖片，兩者都沒設定的商品不會出現在前台的顏色選項裡。
- 不要再設樣式色碼：設定分色成列商品後，請勿在商品樣式裡再填樣式色碼，兩種做法只能擇一。
- 同時設定時以圖片優先：若一件商品同時設了商品色碼與分色圖片，前台會顯示分色圖片，色碼不會生效。
- 分色圖片要搭配分色成列：只上傳分色圖片、沒有設定分色成列商品的話，顏色選項不會出現。
❌ 重要提醒：
分色設定是雙向的。A 商品加了 B，但 B 沒有加 A，顧客從 B 就看不到 A、也切換不回去。
六、常見問題 FAQ
七、相關教學
- 樣式色碼：同個商品網址：所有顏色尺寸集中在同一頁，用色塊切換、不換頁。
- 建立一般商品：新增商品、填寫基本資料與頁面設計的完整流程。
- 批次修改商品：用檔案匯入一次修改大量商品的價格、庫存與分色設定。
- 圖片管理（圖庫功能）：集中管理商品與分色圖片，方便重複使用。