＊注意：系統標準頁目前僅支援 Ultra Chic 版型。另因系統排版考量，若您有使用 Layout engine 且 HTML Editor 中有 products.liquid 檔案，您將無法使用系統標準頁。
使用 SHOP Bulider 製作的進階分頁支援使用「系統標準頁」，讓您可以將更全面、更細節的調整佈局，並套用至所有進階分頁。在商品列表頁面佈局中，您可以多元安排元件佈局，調整成適合的格式或位置，還能安插更多適合的文字，從而提升 SEO 的成效。
本文將介紹：
一、前往「商品列表頁面佈局」
前往「SHOPLINE 後台 > 網店設計 > 網店分頁 > 系統標準頁」，並在「商品列表頁」右方點按「編輯」。
您即會進入「商品列表頁面佈局」的編輯器。
點按預覽窗上方的下拉式選單可以切換要預覽的商品列表頁（即您在「商店後台 > 商品及分類 > 分類」中設定的「商品分類」頁面）。
＊注意：
- 商品列表頁面佈局編輯器側邊欄並沒有 SEO 設定功能。
- 若您曾使用 layout engine 設計網店，您將無法使用系統標準頁。若要使用系統標準頁的佈局編輯功能，您必須先刪除 products.liquid 檔案。
二、調整商品列表頁面佈局
在商品列表頁面佈局的編輯器中，可以編輯公告欄、頁首、元件、頁尾。公告欄、頁首、頁尾三項與 SHOP Builder 的操作及效果相同，此章將主要介紹如何調整元件設定。
商品列表頁面佈局中，元件可分為固定元件、可移動元件（背景為灰底）。固定元件不可調整位置，可移動元件可以調整位置，且可以新增或刪減。
1. 固定元件
固定元件不可調動位置順序且不可新增刪減，僅可修改內容設定。
A. 麵包屑
＊注意：此功能僅支援桌機版頁面，手機版不具有此功能。
您可以設定商品列表頁的麵包屑（路徑導覽），開啟「顯示麵包屑」開關後，顧客在前台瀏覽各商品類別時，頁面上方處會顯示其所進入的路徑。麵包屑的位置對齊方式可以選擇置左、中、右 3 種。
- 麵包屑範例：
B. 橫幅
若想設定橫幅（頁面橫圖），您必須前往「SHOPLINE 後台 > 商品及分類 > 分類」，並選取欲編輯的分類進行設定。點按「前往設定」可快速前往上述路徑。若想了解更多橫幅的設定方式，請參考設定商品分類。
C. 側邊目錄
- 分類目錄
＊注意：此功能僅支援桌機版頁面，手機版不具有此功能。若要調整手機版目錄，請至前往「店面級別設定」中設定。
打開「分類目錄」下拉選單可看到「顯示分類目錄」開關，開啟開關後，前台即會顯示您設定的商品分類目錄。關閉後目錄即會關閉。
- 網店篩選
若想設定網店篩選，您必須前往「SHOPLINE 後台 > 商品及分類 > 分類」，並點按「設定網店篩選」。點按「前往設定」可快速前往上述路徑。若想了解更多網店篩選的設定方式，請參考網店分類進階篩選。
D. 標題
開啟「顯示標題」開關，即可顯示商品分類的標題。關閉開關則標題消失。您還可以選擇標題文字的對齊方式（置左、中、右）。
E. 排序
您可以調整商品排序選項的語言、樣式。
樣式可選擇文字、圖標、圖標 + 文字 3 種。
2. 可移動元件
可移動元件可以調整上下順序、修改內容設定，也可以新增、刪減。其中「描述」、「商品列表」僅可移動，不可刪減。
A. 描述
您可以在各個商品列表頁中加入自訂的描述，以利行銷或 SEO 優化。
1. 針對「商品分類頁」新增描述：請前往「商店後台 > 商品及分類 > 分類」，並在欲新增的商品分類右側點按「編輯」。
2. 針對「所有商品頁」新增描述：請前往「商店後台 > 網店設計 > 網店分頁」，並在「所有商品」右側按「編輯」。
在分類描述／描述區塊中輸入您自訂的描述內容，最後點按「更新」即可新增。
- 描述範例：
B. 商品列表
您可以調整商品列表的文字語言、商品圖比例、一（橫）行的商品數等設定。
- 語言：可選擇支援的語言。
- 商品圖比例：可選擇長方形（3:4）、正方形（1:1）。
- 一行商品數（桌機）：可選擇一行 1 ~ 5 個商品。
- 一行商品數（手機）：可選擇一行 1 ~ 2 個商品。
C. 其他可移動元件
其他可新增、刪減的可移動元件為既有的 SHOP Bulider 元件，如下：
＊注意：若想要了解這些元件的說明，可直接點擊前往 FAQ。
三、發佈頁面
調整完各項商品分類頁的佈局後，您必須發佈才能使方才的佈局設定生效。點按右上角的「發佈」。
若您是第一次編輯商品列表頁面佈局，系統會提醒您這些佈局會套用到所有商品頁、商品分類頁、搜尋結果頁。請注意套用佈局後，原先的設定將被取代。點按「確定」即可發佈佈局。
延伸閱讀
評論