透過 SHOP Builder 編輯進階分頁時，您可以新增「商品分類標籤」元件，讓商店版面佈局更加靈活，同時精簡頁面空間以展示更多商品。顧客點擊不同的標籤按鈕，即可輕鬆切換分類瀏覽商品。
⚠️ 開始前請注意：
- SHOP Builder 目前僅支援 Ultra Chic、Kingsman、Varm、Philia 版型使用。
- 使用 SHOP Builder 建立分頁後，若切換其他店面版型，該分頁仍然可以顯示，但無法編輯且可能發生跑版情形，在確認發佈分頁前請多加留意。
本篇文章將介紹：
一、新增商品分類標籤元件
步驟一
前往商店後台「網店設計 > 網店分頁」，選擇「新增分頁 > 進階分頁」或點選既有分頁旁的「編輯」。
＊注意：僅支援編輯有標示 的進階分頁。
步驟二
點選「+ 元件」新增元件。
步驟三
在商品類別欄位，點選「商品分類標籤」。
＊注意：此元件暫不支援 Shopper App 使用。
步驟四
可根據需求選擇展示商品分類或單一商品，點選「＋商品分類 Tab」或「＋商品 Tab」即可新增標籤按鈕。
＊注意：
- 一個「單一商品」的標籤按鈕最多可加入 20 個商品。
- 一個「商品分類」的標籤按鈕最多可展示 20 個商品，如需查閱更多商品，顧客可點擊下方的「查看更多」按鈕。一個進階分頁最多可加入 10 個商品分類。
步驟五
新增標籤按鈕後，請參考下方表格進行內容及樣式設定。
標籤名稱 |
可自訂商品分類標籤名稱，最多 40 字。 |
| 商品 |
點選「商品」旁的 |
| 標籤按鈕樣式 |
可設定標籤按鈕的樣式，共有「底線」、「色塊」或「邊框」三種選擇，並可更改對齊方向、按鈕字體大小。 如按鈕選擇「色塊」或「邊框」樣式，可調整「標籤按鈕圓角」。 |
| 元件標題名稱 |
可輸入元件標題名稱，並選擇標題文字對齊樣式。 |
| 商品欄數與輪播樣式 |
圖片比例可選擇為 3:4 或 1:1，可分別設定電腦版商品欄數（最多 6 欄）以及手機版商品欄數（最多 3 欄）。 可設定輪播列表左右滑動的方式，共有「按鈕」及「圓點」兩種可供選擇。 如您想了解更多商品輪播列表元件資訊，請參考：商品輪播列表元件。 |
步驟六
接續下列三項設定，請參考下方表格。
| 顯示隱藏商品 |
選擇是否顯示隱藏商品，預設為關閉。若一個標籤按鈕分類超過 20 個商品，顧客可點選「查看更多」進入該商品分類頁；若此功能為關閉，前台將隱藏「查看更多」按鈕，僅呈現最多 20 個商品。 |
展示按鈕 |
選擇是否展示「查看更多」按鈕，預設為開啟。啟用後：
|
邊距 |
支援調整元件的上下邊距及四周邊距：
＊注意：手機版無法同時調整四周邊距。 |
步驟七
完成上述設定後，點選「儲存」將於右側顯示套用效果；點選上方 圖示可切換桌機版、手機版。
步驟八
建議先點選「預覽商店」確認設定內容是否無誤，再點選「發佈」進階分頁。
二、網店前台效果
依據您設定的商品分類標籤，前台將可點選不同標籤並查看商品。
桌機版
手機版
延伸閱讀
評論