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

行動裝置底部導覽列

新增固定在畫面上、像應用程式一樣的圖示列，為顧客提供快速連結與操作。

操作指南 Pro Navigation 4 分鐘閱讀

顧客捲動頁面時，導覽列會一直留在畫面上，就像行動應用程式的分頁列，只要點一下就能前往首頁、選單、購物車、搜尋、聊天或撥打電話。項目也可以開啟小型子選單，例如包含帳戶、聯絡和常見問題連結的 More（更多）項目。

底部導覽列編輯器：設定分頁 (1) 與即時預覽 (2)。使用預覽左下方的按鈕切換預覽裝置。

設定分頁包括 Menu items（選單項目）、General（一般）、Typography（字體排版）、Colors（顏色）、Position（位置）、Advanced（進階）和 Version history（版本記錄）。

建立底部導覽列

  1. 建立導覽列

    在應用程式的 Home（首頁）頁面點擊 Add bottom navigation（新增底部導覽列），或在 Menu manager（選單管理員）中點擊 Create menu（建立選單），然後選擇 Mobile bottom bar（行動裝置底部導覽列）。

    首頁：(1) 建立或匯入選單的快速操作，(2) 啟用應用程式嵌入的按鈕

  2. 設定項目

    在 Menu items 中編輯預設項目，並加入您自己的項目。請參閱新增與編輯項目。

    底部導覽列編輯器：設定分頁 (1) 與即時預覽 (2)。使用預覽左下方的按鈕切換預覽裝置。

  3. 調整導覽列樣式

    調整 General、Typography 和 Colors 分頁。請參閱調整導覽列樣式。

    一般設定，包括子選單的位置與開啟方式。

  4. 選擇顯示的位置

    在 Position 中選擇裝置與畫面上的位置。請參閱選擇導覽列的顯示位置。

    為行動裝置 (1) 與桌面裝置 (2) 開啟導覽列，然後選擇位置。

  5. 儲存並發佈

    點擊 Save（儲存），然後點擊右上角的 Publish（發佈）。請參閱發佈導覽列。

新增與編輯項目

  1. 顯示項目操作

    在 Menu items 中，將游標移到項目上，即會顯示 Edit（編輯）、Duplicate（複製）和 Delete（刪除）。拖曳項目的控點即可調整順序。

    將游標移到項目上，即可編輯、複製或刪除。

  2. 新增項目與子選單

    點擊 Add item（新增項目）可在該層級新增項目，或在項目上點擊 Add submenu（新增子選單），將項目放在它底下。巢狀項目會以子選單開啟，最多三層。

  3. 設定圖示、標題與連結

    點擊 Edit 開啟 Edit menu item（編輯選單項目）。選擇 Icon（圖示，點擊 Change（變更）），輸入 Title（標題），然後點擊 Link（連結）欄位。

    點擊 Link 欄位，選擇項目的動作。

  4. 選擇動作

    在 Select link（選擇連結）中，點擊動作旁的 Select（選擇）(1)。Link 方塊 (2) 會填入連結的開頭，例如 Products by collection 會填入 /collections/。依照 Syntax（語法）欄的格式補完連結，例如 /collections/summer-sale，然後點擊 Update（更新）(3)。

    點擊 Select (1)，補完連結 (2)，然後點擊 Update (3)。

項目設定

Icon（圖示）
點擊 Change 選擇圖示或上傳圖片。
Title（標題）
圖示下方的文字。
Link（連結）
點按後執行的動作。點擊此欄位會開啟 Select link（請參閱項目動作）。
Open in new tab（在新分頁開啟）
在新的瀏覽器分頁開啟連結。
Description（說明）
與項目一起顯示的簡短文字（選填）。
Icon size（圖示大小）
圖示大小，單位為 px。
Box > Border radius（方塊 > 圓角半徑）
將項目方塊的角變圓，0 到 100 px。
Box > Box padding（方塊 > 方塊內距）
項目方塊內的空間，0 到 100 px。
Box > Position（方塊 > 位置）
將項目向左（負值）或向右（正值）移動，-100 到 100 px。
Color（顏色）
僅套用於此項目的文字、圖示、圖示背景和背景顏色，每種顏色都有對應的懸停顏色。Clear settings（清除設定）會恢復為導覽列的顏色。
Badge（徽章）
項目上的小標籤，包含 Title、Badge text color（徽章文字顏色）和 Badge background color（徽章背景顏色）。
Visibility（顯示設定）
在部分裝置上或對部分顧客隱藏項目，或只在兩個日期之間顯示。請參閱顯示規則。
Advanced（進階）
Extra classname（額外類別名稱）會加入 CSS 類別，供自訂 CSS 使用。Divide（分隔）會在項目旁加入分隔線。

項目動作

Select link 將動作分成八個區段。點擊動作旁的資訊圖示即可查看範例。

1. Link to your store internal pages（連結到商店內部網頁）
Exact short url /[your-url]、Home page /、All products /collections/all、Products by collection /collections/[collection-handle]、A product detail /products/[your-product-shorturl]、All blog posts /blogs/news、A blog posts detail /blogs/news/[your-blog-shorturl]、A page detail /pages/[your-page-shorturl]、Cart page /cart、Search page /search、Contact form /pages/contact。
2. Open panels (Compatible with popular themes)（開啟面板，相容於熱門佈景主題）
Open Menu (mobile) gm-open:MobileMenu、Open Cart gm-open:Cart、Open Search gm-open:Search。
3. Open other applications (E.g. Shopify inbox...)（開啟其他應用程式）
Open Chatbox gm-open:Inbox 會開啟 Shopify Inbox 聊天。
4. Scroll on page（在頁面上捲動）
Scroll to top gm-scroll:Top、Scroll to bottom gm-scroll:Bottom、Scroll to a on-page element gm-scroll:OnPage(htmlElement)。
5. Call javascript function（呼叫 JavaScript 函式）
gm-javascript:Function 會在您的網站上執行 JavaScript 函式。
6. Support tools（客服支援工具）
Make a phone call tel:、Send a SMS message sms:、Send an email mailto:，以及透過 Messenger、Whatsapp、Telegram、Line 或 Zalo 聊天。
7. Share（分享）
Copy current URL gm-share:CopyUrl、Share to Facebook gm-share:Facebook、Share to X (Twitter) gm-share:X。
8. Link to extend websites（連結到外部網站）
Full url（任何完整網址）、Don’t redirect #。
區段 2 到 4：開啟面板、其他應用程式與捲動。
區段 5 和 6：JavaScript 與客服支援工具。
區段 7 和 8：分享與外部連結。

範例：

  • gm-scroll:Top(150)：捲動到頂端，並保留 150 px 的邊距。
  • gm-scroll:OnPage(#page-title)：捲動到 ID 為 page-title 的元素。
  • tel:+0123456789：撥打這個號碼。
  • sms:+012345678?body=I need help：開啟已填入文字的簡訊。
  • https://wa.me/0123456789：開啟 WhatsApp 聊天。請使用國碼，不要加 +。

調整導覽列樣式

一般設定，包括子選單的位置與開啟方式。

Main menu（主選單，第 1 層）

Menu rounded（選單圓角）
導覽列的圓角半徑，0 到 50 px。
Item spacing（項目間距）
項目之間的空間，0 到 50 px。
Padding inline · Padding block（水平內距 · 垂直內距）
每個項目內的水平與垂直空間，0 到 100 px。
Use box shadow（使用方塊陰影）
在導覽列周圍加上陰影。

Submenu（子選單，第 2、3 層）

Submenu position（子選單位置）
Left（靠左）、Right（靠右）、Center（置中）或 Full（全寬）。
Submenu open style（子選單開啟方式）
Dropdown（下拉式選單）或 Slideout（滑出面板）。
Submenu width（子選單寬度）
100 到 900 px。
Padding inline · Padding block（水平內距 · 垂直內距）
每個子選單項目內的水平與垂直空間，0 到 100 px。

Icon & text（圖示與文字）

Icon size · Submenu icon size（圖示大小 · 子選單圖示大小）
導覽列及其子選單的圖示大小，0 到 100 px。
Main menu gap: text - icon · Submenu gap: text - icon（主選單文字與圖示間距 · 子選單文字與圖示間距）
圖示與文字之間的空間，0 到 50 px。

Advanced（進階）

Hide menu text（隱藏選單文字）
導覽列中只顯示圖示。
Hide submenu text（隱藏子選單文字）
子選單中只顯示圖示。
Hide submenu description（隱藏子選單說明）
隱藏子選單中的項目說明。

選擇導覽列的顯示位置

  1. 選擇裝置

    在 Position 中開啟 Display on mobile（在行動裝置顯示）(1)、Display on desktop（在桌面裝置顯示）(2)，或兩者都開啟。

    為行動裝置 (1) 與桌面裝置 (2) 開啟導覽列，然後選擇位置。

  2. 選擇位置

    在每個開關下方點擊一種版面：

    • Mobile（行動裝置）：Bottom、Top、Center left、Center right、Bottom left 或 Bottom right。
    • Desktop（桌面裝置）：Bottom center、Bottom left、Bottom right、Bottom full width、Center left 或 Center right。

  3. 向下捲動時隱藏（選用）

    勾選 Hide when scrolling down（向下捲動時隱藏），讓導覽列在顧客向下捲動時不會遮住內容。

進階設定

Market availability（市場供應情況）
只在選取的市場顯示導覽列。請參閱依市場顯示選單。
Menu z-index（選單 z-index）
堆疊順序。如果其他元素遮住導覽列，請調高；如果導覽列遮住彈出視窗，請調低。
Menu opacity（選單不透明度）
導覽列的透明度，0 到 100%。
Bottom margin（底部邊距）
導覽列與畫面底部之間的空間。
Stylesheet / CSS
導覽列的自訂 CSS。
JavaScript
導覽列的自訂 JavaScript。

顯示規則

位置 設定 效果
Position 分頁 Display on mobile、Display on desktop 依裝置顯示或隱藏整個導覽列。
Advanced 分頁 Market availability 只在選取的市場顯示整個導覽列。
項目 > Visibility Hide on desktop（在桌面裝置隱藏）、Hide on mobile（在行動裝置隱藏） 在某種裝置上隱藏單一項目。
項目 > Visibility Hide when logged in（登入時隱藏）、Only show when logged in（僅在登入時顯示） 單一項目只對訪客顯示，或只對已登入的顧客顯示。
項目 > Visibility Schedule publishing（排程發佈） 單一項目只在 Date starting（開始日期）與 Date ending（結束日期）之間顯示。

發佈導覽列

  1. 發佈

    點擊 Save，然後點擊右上角的 Publish，選擇佈景主題並確認。對話方塊的用法與大型選單相同（請參閱發佈選單）。狀態會從 Draft（草稿）變成 Active（啟用中）。

    發佈選單對話方塊：(1) 選擇佈景主題，(2) 預覽並發佈

  2. 檢查您的網路商店

    用手機開啟您的網路商店，或在較窄的瀏覽器視窗中開啟。

變更或移除

  • 從網路商店移除：點擊編輯器上方的 Disable（停用）。
  • 還原先前的版本：開啟 Version history 分頁。請參閱版本記錄。

疑難排解

導覽列沒有出現在我的網路商店

導覽列和所有選單一樣，透過應用程式嵌入載入。請確認該佈景主題已開啟應用程式嵌入，請參閱啟用應用程式嵌入。

Open panels 動作沒有反應

Open panels（開啟面板）動作會開啟佈景主題本身的選單抽屜、購物車抽屜或搜尋，因此適用於熱門佈景主題。如果在您的佈景主題上沒有反應，請改為連結到該網頁（例如 Cart page /cart），或聯絡我們。

導覽列與聊天按鈕或 Cookie 橫幅重疊

在 Advanced 分頁中調高 Bottom margin 或變更 Menu z-index，或在 Position 分頁中選擇其他位置。

這個頁面有幫助嗎？

回報問題