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