說明
登入

在網路商店設定下拉式選單

您可以使用下拉式選單，將商品、商品系列或頁面歸類在一起，讓顧客更容易瀏覽您的網路商店。例如，如果您有大量商品，可以先將它們加入商品系列，然後在主選單中使用下拉式選單來組織這些商品系列。這能幫助顧客找到他們想要的商品類型。

您也可以在下拉式選單或預設選單中新增、移除或編輯選單項目。

您可以在 Shopify 管理介面的內容 > 選單 檢視與變更網路商店的選單。

本頁內容

將選單項目巢狀排列以建立下拉式選單

您可以透過建立或移動選單項目，將其巢狀排列在最上層項目之下，來建立下拉式選單。最上層項目會顯示在您的網路商店主選單中，而巢狀的選單項目會顯示為下拉式選單。最上層項目最多可包含兩層巢狀的下拉式選單。

所有佈景主題都會在主選單中以下拉式選單顯示巢狀項目，部分佈景主題也會在其他位置以下拉式選單顯示巢狀項目。

主選單與下拉式選單在您的網路商店中的顯示位置會依據您的佈景主題而異。有些佈景主題會在主選單中的下拉式選單名稱旁顯示圖示，協助顧客識別該處有下拉式選單。

從主選單新增下拉式選單

您可以從主選單中的任何選單項目新增下拉式選單。

步驟：

電腦版

  1. 在 Shopify 管理介面，前往內容 > 選單。

  2. 按一下主選單的名稱。

  3. 選取主選單中的某個項目作為下拉式選單的標頭，或新增選單項目。如果您不希望標頭連結到任何內容，請在該標頭選單項目的搜尋或貼上連結欄位中輸入#。

  4. 若要新增要包含在下拉式選單中的選單項目，請完成以下作業：

    1. 按一下新增選單項目。
    2. 在名稱欄位輸入此選單項目的名稱。
    3. 在搜尋或貼上連結欄位輸入或選取此選單項目的連結目標。

  5. 按一下新增，然後按一下Drag 並拖曳該選單項目，將其巢狀排列在標頭選單項目之下。

  6. 按一下儲存選單。

行動版

  1. 在 Shopify app 中，點選 選單 圖示。

  2. 在 內容 選單中，點選 arrow down 圖示，然後點選 選單。

  3. 點選您的主選單名稱。

  4. 選擇其中一個主選單項目作為下拉式選單的標題，或 新增選單項目 作為標題。若不希望標題連結到任何內容，請在標題選單項目的 搜尋或貼上連結 欄位輸入 #。

  5. 若要新增要包含在下拉式選單中的選單項目，請完成以下作業：

    1. 點選 新增選單項目。
    2. 在名稱欄位輸入此選單項目的名稱。
    3. 在搜尋或貼上連結欄位輸入或選取此選單項目的連結目標。

  6. 點選 新增，然後點選 Drag 並拖曳該選單項目，將其巢狀放在標題選單項目之下。

  7. 點選 儲存 或 ✓。

頁尾選單也可實作下拉式選單。

步驟：

  1. 在 Shopify 管理介面，前往內容 > 選單。
  2. 選用：遵循 主選單相同的巢狀原則，例如點選 Drag 並將項目拖曳到標題項目下方，以建立下拉結構。
  3. 對不應連結至頁面的標題項目，請在 連結 欄位輸入 # (例如，「支援」或「探索」標題)。

佈景主題相容性考量

在佈景主題中新增下拉式選單前，請先檢閱下列考量事項：

  • 多數佈景主題支援最多兩層的巢狀下拉式選單。請查閱 佈景主題文件，或實際測試巢狀項目以確認相容性。
  • 某些佈景主題可能需要調整 CSS，以改善行動裝置的可用性。若您不熟悉佈景主題程式碼，請勿自訂。瞭解如何 自訂佈景主題。

判斷佈景主題是否支援巢狀下拉式選單

若要判斷目前的佈景主題是否支援您想實作的巢狀下拉式選單層級上限，您可以使用下列資源：

  1. 查閱佈景主題文件：檢視 佈景主題文件，瞭解選單功能與支援的巢狀層級。
  2. 測試巢狀項目：建立一個含有欲設定之巢狀層級數的測試選單結構，並確認在電腦版與行動裝置上皆能正確顯示。

多數佈景主題支援最多兩層巢狀的下拉式選單。若您遇到下拉式選單問題，請確認佈景主題是否支援您要實作的巢狀層級數，因為有些佈景主題可能需要額外自訂才能支援多層巢狀。

下拉式選單最佳做法

請參考下列最佳做法，建立在各種裝置上運作良好的實用選單結構：

  • 對使用 # 連結的最上層選單項目，請使用具描述性的標籤，例如「依類別選購」。
  • 請確保選單已針對行動裝置最佳化。您可以在行動裝置上測試，確認下拉式選單會如預期展開。
  • 最上層選單項目請新增不超過 7 個，以避免擁擠。
  • 使用清楚且具描述性的連結標題。例如：「商品系列」與「夏日洋裝」。
  • 每個選單最多可包含 10,000 個項目，您的商店最多可擁有 1,000 個選單。在下拉式選單中，凡是含有子項目的選單項目都會另外視為一個獨立選單，計入此上限。

下拉式選單的無障礙功能

大多數佈景主題會將下拉式選單的標題實作為按鈕，而非可點擊的連結。這是刻意的無障礙設計，可協助使用輔助技術的顧客理解導覽結構。

當最上層選單項目用來控制下拉子選單時，該項目會作為展開選單的按鈕，而不是連到新頁面的連結。此作法可確保使用螢幕閱讀器或其他輔助技術的顧客能正確導覽您商店的選單系統。

若希望顧客能存取主分類頁面 (例如，「所有商品」或「所有商品系列」)，請將此連結新增為下拉式選單中的第一個項目，而不要讓標題可點擊。

常見問題疑難排解

設定導覽選單時若遇到下列常見問題，請參考這些解決方案：

  • 行動選單重新導向：若點選最上層選單連結會重新導向至新頁面，請在您的 Shopify 管理介面檢查該選單，確認連結欄位為 #。

  • 顯示問題：若未顯示巢狀項目，請確認已將它們完整拖曳到標題項目下方，並在 選單 介面中呈現縮排。同時確認您的佈景主題支援您設定的巢狀層級數。

  • 佈景主題相容性：若您遇到下拉式選單問題，請確認佈景主題是否支援您要實作的巢狀層級數。有些佈景主題可能需要額外自訂才能支援多層巢狀。

  • 無法建立巢狀選單：若您看到錯誤訊息「Menu cannot contain nested menus. Opt in the nested navigation feature to use this」，您的商店可能需要啟用巢狀導覽功能。這通常影響 2018 年以前建立的商店。若遇到此錯誤，請聯絡 Shopify 支援服務。

  • 顯示錯誤的選單：如果有多個導覽連結指向同一個頁面 (例如首頁)，佈景主題可能會顯示錯誤的子選單。請確保每個導覽區段都連結到獨一無二的頁面，以避免混淆。

  • 選單項目消失：若選單連結未經刪除卻消失，請檢查您是否刪除了該選單項目所連結的商品、商品系列或頁面。刪除已連結的資源也會移除該選單項目。

自訂下拉式選單的佈景主題程式碼

若佈景主題需要更進階的自訂，您可以考慮 自訂佈景主題程式碼。