樣式色碼：同個商品網址

同一款商品有多種顏色與尺寸，想讓所有顏色都集中在同一個商品網址、顧客點色塊就能直接切換，就用 樣式色碼。設定重點在於：顏色要放在第一層樣式，再為每個顏色填上色碼。

如果每個顏色希望是各自獨立的商品頁（各有各的網址、圖片與文案），要改用另一種做法，可以看〈商品色碼：不同商品網址〉。

目錄
一、應用情境二、前置準備三、設定步驟四、顏色一定要放第一層樣式五、範例：顏色 × 尺寸的上衣六、常見問題 FAQ 七、相關教學

一、應用情境

情境 | 說明 | 適用對象
同款多色多尺寸 | 一件上衣有黑白兩色、S／M／L 三個尺寸，顧客在同一頁選完顏色與尺寸就能加入購物車 | 同款有多色多尺寸的店家
想集中 SEO 權重 | 整款只有一個商品網址，瀏覽數、評價與搜尋權重不會被拆散 | 重視自然搜尋的品牌
想降低維護成本 | 改價、改文案只要改一個商品，不必每個顏色各維護一份 | 品項多、人力少的店家
顏色用色塊呈現 | 顧客一眼看到所有可選顏色的色塊，點下去就切換，不用換頁 | 顏色可以用色塊表達的店家

注意：
樣式色碼只能填色碼、呈現純色塊，無法顯示花色圖案。豹紋、格紋、條紋這類需要用圖片當選項的商品，要改用〈商品色碼：不同商品網址〉的分色圖片。

二、前置準備

先建立好商品：於後台左側選單進入 商品設定 → 商品 → 新增 建立商品，完整流程可以看〈建立一般商品〉。

列出顏色與尺寸清單：先想好這款商品有哪些顏色、哪些尺寸，設定時會用到。

準備各顏色的色碼：不知道色碼可查色碼表。

注意：
顏色數 × 尺寸數就是要建立的樣式筆數（例：5 色 × 5 尺寸 ＝ 25 筆）。一次儲存的新增樣式達到 100 筆會被擋下，樣式很多時請分批新增、分次儲存。

三、設定步驟

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

進入商品編輯頁，在頁面下方找到 商品樣式 區。這一區有三個地方要填：

樣式名稱（紅框）：這一層樣式的名稱，例如「顏色」「尺寸」。

選項名稱（橘框）：該層底下的各個選項，例如顏色底下的「黑色」「白色」。

樣式色碼（綠框）：每個顏色對應的色碼，前台會依此顯示色塊。

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

步驟二：設定各層的樣式名稱

以上衣為例，顧客要選顏色與尺寸，就把兩者分別填在第一層與第二層的樣式名稱欄位。顏色務必填在第一層，原因往下看〈顏色一定要放第一層樣式〉。

圖：第一層樣式名稱填「顏色」、第二層填「尺寸」

步驟三：設定各層的選項名稱

接著填入每一層底下實際的選項，例如顏色層填「黑色」「白色」，尺寸層填「S」「M」「L」。系統會依這些選項自動組出所有樣式組合。

圖：分別填入顏色與尺寸的選項名稱

步驟四：為每個樣式填上樣式色碼

在每一筆樣式的 樣式色碼 欄位填入該顏色的色碼，前台就會用色塊呈現顏色選項。同一個顏色的所有尺寸都要填相同色碼，系統才會把它們歸成同一個色塊。

圖：逐一填寫各樣式的樣式色碼

注意：
色碼必須是 # 開頭加 6 碼（或 3 碼縮寫），例如 #000000、#FFF。漏掉 # 或填中文顏色名稱會存不進去。可到色碼表查詢對應色碼。

完成後的前台畫面

儲存後，顧客在商品頁會看到一排顏色色塊，點選即可切換顏色，不會換頁、不會重新整理。

圖：前台商品頁的顏色色塊與尺寸選項

四、顏色一定要放第一層樣式

這是設定樣式色碼最常見的錯誤。前台是用第一層樣式產生色塊那一列，第一層填什麼、色塊就代表什麼，填成尺寸就會導致選項錯亂、點不動。

錯誤示範：第一層填尺寸

商品樣式只填了「尺寸」和「樣式色碼」，沒有顏色這一層。

圖：錯誤示範的後台設定（只填了尺寸與樣式色碼，缺少顏色層）

前台會把尺寸當成色塊那一列來判斷，導致選項無法正常選取。

圖：錯誤示範的前台結果（選項無法正常選取）

正確示範：第一層填顏色

商品樣式完整填入「顏色」「尺寸」與「樣式色碼」。

圖：正確示範的後台設定（顏色在第一層、尺寸在第二層，並填上樣式色碼）

前台會用顏色產生色塊那一列，尺寸則是另一列選項，顧客就能正常選取。

圖：正確示範的前台結果（顏色與尺寸都能正常選取）

重要提醒：
樣式色碼與 分色成列商品（商品色碼／分色圖片）只能擇一。已經設定分色成列商品的商品，請勿再填樣式色碼，否則前台顏色選項會顯示異常。

五、範例：顏色 × 尺寸的上衣

以一件「純棉素色 T 恤」為例，要賣黑、白兩色，各有 S／M／L 三個尺寸：

第一層樣式填「顏色」，選項填 黑色、白色。

第二層樣式填「尺寸」，選項填 S、M、L。

系統自動產生 6 筆樣式（黑／S、黑／M、黑／L、白／S、白／M、白／L）。

黑色的三筆樣式色碼都填 #000000，白色的三筆都填 #FFFFFF。

逐一調整各樣式的售價、庫存與樣式圖片後儲存。

小技巧：

多層樣式不用一筆一筆建，用 批次新增樣式 依層輸入、以半形逗號隔開（例：「黑色,白色」與「S,M,L」），系統會自動產生所有組合。

幫每個顏色上傳樣式圖片，顧客點色塊時主圖會跟著換成該顏色的實拍圖，轉換率更好。

某個樣式庫存為 0 時，前台只有該樣式顯示售完，其他樣式仍可正常購買。

六、常見問題 FAQ

Q：前台的顏色色塊沒出現，或是點不動？

A：請依序檢查：

第一層樣式必須是顏色：色塊那一列是用第一層樣式產生的，第一層填成尺寸就會點不動。

每一筆樣式都要填色碼：只有部分樣式填色碼，色塊會顯示不全。

色碼格式必須正確：漏了 # 或格式錯誤都存不進去，色塊自然不會出現。

同色的樣式色碼必須一致：同一個顏色的不同尺寸要填相同色碼，填得不一樣會被拆成多個色塊。

不能同時設定分色成列商品：兩種做法只能擇一，同時設定會顯示異常。

Q：樣式色碼可以填「黑色」這種文字嗎？

A：不行。這個欄位只接受 # 開頭的色碼（6 碼或 3 碼縮寫），例如 #000000。想讓顧客看到顏色名稱，把選項名稱寫成「黑色」即可，色碼欄位仍要填色碼。

Q：豹紋、格紋這種花色，可以用樣式色碼嗎？

A：不行，樣式色碼只能呈現純色塊。花色要用圖片當選項，請改用〈商品色碼：不同商品網址〉的分色圖片做法。

Q：不同顏色想分開設定上架時間，做得到嗎？

A：做不到。上架與預告時間是商品層級的設定，同一個商品底下所有顏色共用同一組時間。若需要各色分開上架（例如新色先預告、舊色照常販售），必須改用〈商品色碼：不同商品網址〉。

七、相關教學

商品色碼：不同商品網址：每個顏色各自獨立商品頁，用分色設定串起來互相切換，支援花色圖片。

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

批次修改商品：用檔案匯入一次修改大量商品的樣式、價格與庫存。

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