透過 Menu Builder 打造進階目錄，不僅可以細緻區分精選項目、有效引導顧客，更提供豐富多樣的圖文版型選擇，立刻著手為商店設計專屬的快捷索引吧。
⚠️ 開始前請注意：
- 有開啟 Layout engine 編輯器的店家，請參考進階目錄遷移教學調整代碼，或與線上顧問聯絡。
- Menu Builder 與 SHOP Builder 介面大致無異，如需概覽說明請參考 FAQ。
本篇文章將介紹：
一、進階目錄
新增進階目錄
步驟一
前往商店後台「網店設計 > 網店目錄」，點選「新增進階目錄」。
＊注意：
- 僅支援 Ultra Chic／Kingsman／Varm／Philia 商店版型。
- 每間商店最多支援新增 1 個進階目錄。
步驟二
進入「進階目錄設計 > 新增目錄」後，即可開始使用 Menu Builder。
套用進階目錄
步驟一
前往商店後台「網店設計 > 網店目錄」，點選「套用」。
步驟二
閱覽彈出視窗內容後點選「確認」，套用該進階目錄。
步驟三
當進階目錄右側顯示「套用中」即完成。
編輯／刪除
前往商店後台「網店設計 > 網店目錄 > 進階目錄」，點選「編輯」可跳轉至 Menu Builder，點選「⋯」可刪除進階目錄。
刪除前請閱覽彈出視窗內容，先勾選條款方可「刪除」。
二、Menu Builder
請先選擇欲新增的進階目錄佈局，共分為四種：
- 逐層展開 - 圖文清單
- 全層展開 - 純文字清單
- 全層展開 - 圖文清單
- 全層展開 - 純文字 + 圖文清單
進階目錄設計
步驟一
目錄名稱預設為「L1 xx 展開 - xx 清單」，將游標移至該目錄元件上方，將出現「編輯／新增子目錄／刪除」圖示。
＊注意：L1 目錄最多以新增 8 個為限。
步驟二
點選「 」圖示可編輯該 L1 目錄，點選「
」圖示可刪除，完成請「儲存」設定。
設定項說明 |
|
|
目錄名稱 最多輸入 50 字元，支援語系同商店支援語言設定 | |
|
目錄連結 支援輸入外部連結網址或選擇系統分頁 | |
|
開啟連結方式 選擇原視窗或新視窗開啟連結 | |
|
子目錄展開方式 支援全層展開或逐層展開兩種
| |
|
第二層子目錄每行數量（桌機） 當子目錄展開方式為全層展開時，支援自訂 L2 目錄每行顯示數量（1 至 6） |
步驟三
點選 L1 目錄旁的「 + 」圖示，可新增 L2 子目錄；點選 L2 目錄旁的「 + 」圖示，可新增 L3 子目錄。
＊注意：L2 目錄最多以新增 12 個為限，L3 目錄則以 10 個為限。
步驟四
點選「 」圖示可編輯該 L2／L3 目錄，點選「
」圖示可刪除，完成請「儲存」設定。
設定項說明 |
|
|
目錄名稱 最多輸入 50 字元，支援語系同商店支援語言設定 | |
|
文字對齊 文字置左／中／右對齊 | |
|
文字粗體 文字粗體／非粗體 | |
|
目錄連結 支援輸入外部連結網址或選擇系統分頁 | |
|
開啟連結方式 選擇原視窗或新視窗開啟連結 | |
|
於桌機／手機顯示圖片
| |
|
圖片（桌機／手機） 支援 JPG／JPEG／PNG 格式圖片；L3 目錄圖片僅限 1:1 比例 | |
|
圖片比例（桌機／手機）
| |
|
圖文位置（桌機／手機）
|
步驟五
點選並拖曳「 」圖示，可移動目錄元件順序；以目錄層級為單位移動，例如：移動 L1 目錄時，其包含的 L2、L3 目錄也將被移動。
步驟六
確認所有目錄設計皆已「儲存」後，即可「預覽商店 > 發佈」。
全域佈局設定
步驟一
進入「全域佈局設定」頁面後，點選「樣式設定」。
步驟二
完成請「儲存」設定。
設定項說明 |
|
|
目錄對齊方式（桌機） 置左／中／右對齊 | |
|
父層目錄展開樣式 選擇父層目錄（即 L1 目錄）無展開樣式或箭頭
| |
|
自訂子層目錄顏色 開啟按鈕即支援自訂 L2／L3 目錄背景與文字顏色，關閉則自動帶入 SHOP Builder 設定的目錄顏色 | |
|
背景顏色 選擇目錄背景顏色 | |
|
文字顏色 選擇目錄文字顏色 |
步驟三
確認所有樣式設定皆已「儲存」後，即可「預覽商店 > 發佈」。
三、注意事項
- 僅支援 Ultra Chic／Kingsman／Varm／Philia 商店版型，且每間商店最多新增 1 個進階目錄。
-
若您有開啟「於桌機／手機顯示圖片」按鈕但未上傳圖片，系統將顯示預設圖片。
延伸閱讀
評論