您可以在進階分頁中加入「商品列表」元件，在分頁展示出您的主打商品，馬上抓住消費者的目光。
⚠️ 開始前請注意：
- SHOP Builder 目前僅支援 Ultra Chic、Kingsman、Varm、Philia 版型使用。
- 使用 SHOP Builder 建立分頁後，若切換其他店面版型，該分頁仍然可以顯示，但無法編輯且可能發生跑版情形，在確認發佈分頁前請多加留意。
一、增加「商品列表」元件
步驟一
前往「商店後台 > 網店設計 > 網店分頁」點按「進階分頁／編輯」按鈕，開啟「進階分頁」設定頁面。
步驟二
點按「元件」按鈕。
步驟三
點選「商品列表」元件。
步驟四
您可以點擊「+ 商品」自選商品製作成商品列表，或點擊「+商品分類」選擇既有商品列表。
1. 自訂商品列表
點擊「+商品」可選擇商品，自訂商品列表最多可選擇 25 項商品。選取完畢後點擊「下一步」。
拖拉商品可以調整商品的顯示順序，調整完後點擊「確認」。
點擊左側欄下方「儲存」可預覽效果。點擊鉛筆圖示可以回到商品選擇視窗，點擊鉛筆右側的垃圾桶圖示則可以清除所有選取商品。點擊上方紅色垃圾桶圖示可以刪除「+商品」組件並重新選擇「+ 商品」或「+商品分類」。
＊注意：
- 自訂商品列表沒有「查看更多」按鈕。
- 手機版的排版固定為一行 2 個商品。
2. 既有商品分類
點按「+商品分類」可選擇商品分類，選取完畢後點按「確認」。
點擊左側欄下方「儲存」可預覽效果。點擊鉛筆圖示可以回到商品分類選擇視窗，點擊鉛筆右側的垃圾桶圖示則可以清除已選擇的商品分類。點擊上方紅色垃圾桶圖示可以刪除「+商品分類」組件並重新選擇「+ 商品」或「+商品分類」。
步驟五
輸入商品列表標題，並選擇標題大小。
＊備註：您也可以在此處留白，頁面將不會顯示標題。
點按上方「語系」下拉選單，會顯示商店支援的所有語系，可以個別輸入在各語系介面所要顯示的商品列表標題。
您還可以設定標題的文字對齊方式（置左／置中／置右）。
步驟六
選擇是否展示「查看更多」按鈕。
A. 若您選擇加入「商品」
無論此開關是否開啟，系統將不會顯示「查看更多」按鈕，而是顯示全部商品。
B. 若您選擇加入「商品分類」
開啟此開關後，如果商品總數超過您設定的顯示數量，系統會展示「查看更多」按鈕供顧客點擊查看完整商品列表。關閉後，系統會隱藏按鈕，並依照您設定的顯示數量顯示商品。
＊注意：Shopper App 目前尚未支援此開關。
步驟七
編輯圖片相關設定。
A. 產品圖比例
可設定商品圖片的比例。
B. 商品欄數＆商品行數
設定商品列表的欄數（橫排）以及行數（直排）。
＊注意：
- 預設為 3 欄 2 行，欄數上限為 5，行數上限為 8。
- 僅能調整電腦版的欄、行數。手機版排版則根據電腦版的圖片數量變動，固定為每一行 2 欄。（例如：電腦版為 3 欄 2 行，總共 6 個商品；手機版會顯示 2 欄 3 行，總共 6 個商品 ）。
- 商品出現的順序是根據後台商品類別的自訂順序。如需更改，請前往「商店後台 > 商品及分類 > 分類」，點按商品類別後調整商品順序。
- 若您在步驟四選擇的是「自訂商品列表」，商品列表只會依照欄數排列，調整行數不會產生效果。
C. 邊距
可調整圖片與頁面的邊距。有關邊距的詳細說明，請參考此篇文章。
步驟八
選擇是否顯示隱藏商品。開啟後，顧客可在前台頁面看到隱藏商品。
＊備註：已下架的隱藏商品不會顯示。若想了解如何設定隱藏商品，請參閱隱藏商品｜商品。
步驟九
在設定過程中可點按下方「儲存」按鈕，於右側預覽畫面查看新增的商品列表元件。
或是點按右上方「預覽商店」，查看完整的前台預覽畫面。
步驟十
確認完成上述設定後，請點按右上角「發佈」按鈕，顧客即可在商店前台查看此分頁所有新增的內容。
延伸閱讀
- 公告欄、頁首設定｜SHOP Builder
- SEO 設定｜SHOP Builder
- 頁尾設定｜SHOP Builder
- 圖片組合元件｜SHOP Builder
- 文字組合元件｜SHOP Builder
- 圖文組合元件｜SHOP Builder
- 輪播元件｜SHOP Builder
- 商品輪播列表元件｜SHOP Builder
評論