跳到內容
GloboGlobo Docs
安裝應用程式
繁體中文

新增自訂選單位置

在佈景主題程式碼中加入自己的容器，讓選單顯示在您想要的位置。

操作指南 所有方案 1 分鐘閱讀

當您的佈景主題在想放選單的地方沒有選單元素，或頁首自訂程度太高、無法使用其他 Position（位置）選項時使用。您在佈景主題程式碼中加入空的容器，再將 Show menu on this CSS selector（在此 CSS 選擇器上顯示選單）指向它。

加入容器並讓應用程式指向它們

  1. 開啟佈景主題程式碼

    前往 線上商店 > 佈景主題，點擊該佈景主題的 …，然後選擇 編輯程式碼。

  2. 加入選單容器

    在每個要顯示選單的位置貼上一個空的容器，然後點擊 儲存。任何 ID 都可以，以下為範例：

    <div id="GloboDesktopMenu"></div>
    <div id="GloboMobileMenu"></div>
    • 桌面裝置：通常放在頁首區段檔案中（例如 sections/header.liquid）要顯示導覽的位置。
    • 行動裝置：通常放在佈景主題的選單抽屜檔案中，或 layout/theme.liquid 中。

  3. 在應用程式中輸入容器

    在選單編輯器中開啟 Settings（設定）分頁，在 Position 下選擇 Show menu on this CSS selector。在 CSS selector of your main menu（主選單的 CSS 選擇器）中輸入 #GloboDesktopMenu，在 CSS selector of your mobile menu（行動版選單的 CSS 選擇器）中輸入 #GloboMobileMenu。

    在兩個 CSS 選擇器欄位中輸入您的容器 ID

  4. 儲存、發佈並檢查

    點擊 Save（儲存），然後發佈選單。請在桌面裝置與行動裝置上檢查您的網路商店。

小知識

  • 只用一種版面：只加入一個容器，另一個欄位留空。
  • 既有內容會被取代：應用程式會填入每個容器，並取代其中的所有內容。
  • 佈景主題的選單仍會保留：如果不想同時顯示兩個選單，請在程式碼或佈景主題設定中隱藏或移除它。
  • 依佈景主題而定：程式碼修改只套用到您編輯的佈景主題。若更換或更新佈景主題，請再次加入容器。

疑難排解

行動版選單沒有出現

您的佈景主題可能稍後才用 JavaScript 建立抽屜。請將行動版容器移到一定會出現在頁面上的程式碼中，例如 layout/theme.liquid。

什麼都沒有顯示

請確認此佈景主題已開啟應用程式嵌入。在瀏覽器主控台中，確認 document.querySelector('#GloboDesktopMenu') 能找到您的容器。

這個頁面有幫助嗎？

回報問題