樣式色碼：同個商品網址
樣式色碼：同個商品網址
同一款商品有多種顏色與尺寸，想讓所有顏色都集中在同一個商品網址、顧客點色塊就能直接切換，就用 樣式色碼。設定重點在於：顏色要放在第一層樣式，再為每個顏色填上色碼。
如果每個顏色希望是各自獨立的商品頁（各有各的網址、圖片與文案），要改用另一種做法，可以看〈商品色碼：不同商品網址〉。
一、應用情境
| 情境 | 說明 | 適用對象 |
|---|---|---|
| 同款多色多尺寸 | 一件上衣有黑白兩色、S／M／L 三個尺寸，顧客在同一頁選完顏色與尺寸就能加入購物車 | 同款有多色多尺寸的店家 |
| 想集中 SEO 權重 | 整款只有一個商品網址，瀏覽數、評價與搜尋權重不會被拆散 | 重視自然搜尋的品牌 |
| 想降低維護成本 | 改價、改文案只要改一個商品，不必每個顏色各維護一份 | 品項多、人力少的店家 |
| 顏色用色塊呈現 | 顧客一眼看到所有可選顏色的色塊，點下去就切換，不用換頁 | 顏色可以用色塊表達的店家 |
二、前置準備
- 先建立好商品：於後台左側選單進入 商品設定 → 商品 → 新增 建立商品，完整流程可以看〈建立一般商品〉。
- 列出顏色與尺寸清單：先想好這款商品有哪些顏色、哪些尺寸，設定時會用到。
- 準備各顏色的色碼：不知道色碼可查色碼表。
⚠️ 注意：
顏色數 × 尺寸數就是要建立的樣式筆數（例：5 色 × 5 尺寸 ＝ 25 筆）。一次儲存的新增樣式達到 100 筆會被擋下，樣式很多時請分批新增、分次儲存。
三、設定步驟
步驟一：找到商品樣式的設定位置
進入商品編輯頁，在頁面下方找到 商品樣式 區。這一區有三個地方要填：
- 樣式名稱（紅框）：這一層樣式的名稱，例如「顏色」「尺寸」。
- 選項名稱（橘框）：該層底下的各個選項，例如顏色底下的「黑色」「白色」。
- 樣式色碼（綠框）：每個顏色對應的色碼，前台會依此顯示色塊。
圖：商品樣式區的三個設定位置（紅框為樣式名稱、橘框為選項名稱、綠框為樣式色碼）
步驟二：設定各層的樣式名稱
以上衣為例，顧客要選顏色與尺寸，就把兩者分別填在第一層與第二層的樣式名稱欄位。顏色務必填在第一層，原因往下看〈顏色一定要放第一層樣式〉。
圖：第一層樣式名稱填「顏色」、第二層填「尺寸」
步驟三：設定各層的選項名稱
接著填入每一層底下實際的選項，例如顏色層填「黑色」「白色」，尺寸層填「S」「M」「L」。系統會依這些選項自動組出所有樣式組合。
圖：分別填入顏色與尺寸的選項名稱
步驟四：為每個樣式填上樣式色碼
在每一筆樣式的 樣式色碼 欄位填入該顏色的色碼，前台就會用色塊呈現顏色選項。同一個顏色的所有尺寸都要填相同色碼，系統才會把它們歸成同一個色塊。
圖：逐一填寫各樣式的樣式色碼
完成後的前台畫面
儲存後，顧客在商品頁會看到一排顏色色塊，點選即可切換顏色，不會換頁、不會重新整理。
圖：前台商品頁的顏色色塊與尺寸選項
四、顏色一定要放第一層樣式
這是設定樣式色碼最常見的錯誤。前台是用第一層樣式產生色塊那一列，第一層填什麼、色塊就代表什麼，填成尺寸就會導致選項錯亂、點不動。
錯誤示範：第一層填尺寸
商品樣式只填了「尺寸」和「樣式色碼」，沒有顏色這一層。
圖：錯誤示範的後台設定（只填了尺寸與樣式色碼，缺少顏色層）
前台會把尺寸當成色塊那一列來判斷，導致選項無法正常選取。
圖：錯誤示範的前台結果（選項無法正常選取）
正確示範：第一層填顏色
商品樣式完整填入「顏色」「尺寸」與「樣式色碼」。
圖：正確示範的後台設定（顏色在第一層、尺寸在第二層，並填上樣式色碼）
前台會用顏色產生色塊那一列，尺寸則是另一列選項，顧客就能正常選取。
圖：正確示範的前台結果（顏色與尺寸都能正常選取）
❌ 重要提醒：
樣式色碼與 分色成列商品（商品色碼／分色圖片）只能擇一。已經設定分色成列商品的商品，請勿再填樣式色碼，否則前台顏色選項會顯示異常。
五、範例：顏色 × 尺寸的上衣
以一件「純棉素色 T 恤」為例，要賣黑、白兩色，各有 S／M／L 三個尺寸：
- 第一層樣式填「顏色」，選項填 黑色、白色。
- 第二層樣式填「尺寸」，選項填 S、M、L。
- 系統自動產生 6 筆樣式（黑／S、黑／M、黑／L、白／S、白／M、白／L）。
- 黑色的三筆樣式色碼都填 #000000，白色的三筆都填 #FFFFFF。
- 逐一調整各樣式的售價、庫存與樣式圖片後儲存。
💡 小技巧：
- 多層樣式不用一筆一筆建，用 批次新增樣式 依層輸入、以半形逗號隔開（例：「黑色,白色」與「S,M,L」），系統會自動產生所有組合。
- 幫每個顏色上傳樣式圖片，顧客點色塊時主圖會跟著換成該顏色的實拍圖，轉換率更好。
- 某個樣式庫存為 0 時，前台只有該樣式顯示售完，其他樣式仍可正常購買。
六、常見問題 FAQ
七、相關教學
- 商品色碼：不同商品網址：每個顏色各自獨立商品頁，用分色設定串起來互相切換，支援花色圖片。
- 建立一般商品：新增商品、填寫基本資料與頁面設計的完整流程。
- 批次修改商品：用檔案匯入一次修改大量商品的樣式、價格與庫存。
- 圖片管理（圖庫功能）：集中管理商品與樣式圖片，方便重複使用。