選單設定
變更套用到整個選單的版面、元素、動畫、間距及其他設定。
Settings（設定）分頁控制選單顯示的位置，以及選單中每個項目的外觀與行為。若只想調整單一項目的樣式，請改用該項目本身的設定，請參閱編輯選單項目。
開啟設定
-
開啟設定分頁
在 Menu manager（選單管理員）中開啟選單，然後點擊編輯器左側邊欄的齒輪圖示。您編輯時，預覽會隨之更新。
齒輪圖示會開啟選單設定。 -
儲存並發佈
點擊 Save（儲存），然後點擊 Publish（發佈）。
下方的預設值是新選單通常的起始值；部分預設值取決於您的佈景主題。
設定
位置
- Automatically replace（自動取代）
- 應用程式會找出佈景主題的主選單並加以取代。
- Replace existing menu（取代現有選單）
- 您在 Select your main menu（選擇您的主選單）和 Select your mobile menu（選擇您的行動版選單）中挑選要取代的佈景主題選單。
- Show menu on this CSS selector（在此 CSS 選擇器上顯示選單）
- 您在 CSS selector of your main menu（主選單的 CSS 選擇器）和 CSS selector of your mobile menu（行動版選單的 CSS 選擇器）中輸入該區域的選擇器。只有在上述選項不適用於您的佈景主題時才使用。
將選單發佈到佈景主題中有每個選項的逐步說明。
版面與元素
- Orientation（方向）
- Horizontal（水平）會將最上層項目排成一列。Vertical（垂直）會將它們堆疊成一欄，就像側邊欄選單。
- Align（對齊）
- 將最上層項目在選單列中 Left（靠左）、Right（靠右）或 Center（置中）對齊。
- Menu max width（選單最大寬度）
- 選單的最大寬度（px），例如
1200。留空時使用全部可用寬度。 - Show search box（顯示搜尋框）
- 在選單中加入商品搜尋欄位。
- Show divider on desktop（在桌面裝置顯示分隔線）
- 在桌面裝置上，最上層項目之間的分隔線。顏色：Colors（顏色）> Separator color（分隔線顏色）。
- Show divider on mobile（在行動裝置顯示分隔線）
- 行動版選單中項目之間的分隔線。
- Show indicators (arrow down)（顯示指示符號（向下箭頭））
- 在有子選單的項目旁顯示小箭頭。
子選單
- Show border（顯示框線）
- 子選單周圍的框線。顏色：Colors > Submenu（子選單）> Border color（框線顏色）。
- Enable scrollbar on desktop（在桌面裝置啟用捲軸）
- 子選單比螢幕還高時，顧客可以在子選單內捲動，而不會被截斷。
- Enable scrollbar on mobile（在行動裝置啟用捲軸）
- 相同功能，適用於行動版選單。
- Submenu max width（子選單最大寬度）
- 子選單的最大寬度（px）。留空時使用預設寬度。
- Open style on mobile（行動裝置開啟方式）
- Dropdown（下拉式選單）會在上層項目下方展開子選單。Slide（滑動）會以新面板開啟子選單，並提供返回上一層的方式。
選單動畫
- Trigger - Desktop（觸發方式 – 桌面裝置）
- 子選單在桌面裝置上的開啟方式：Hover（滑鼠懸停）、Click（點擊）或 Click toggle（點擊切換）。
- Trigger - Mobile（觸發方式 – 行動裝置）
- 子選單在行動版選單中的開啟方式，選項同樣是這三種。
- Effect（效果）
- 開啟時的動畫：Fade（淡入）或 Shift up（向上移入）。
- Transition speed（轉場速度）
- 動畫長度（ms），最多 1500。
- Transition delay（轉場延遲）
- 子選單開啟或關閉前的等待時間（ms），最多 1500。使用 Hover 時，可避免滑鼠經過時子選單一閃而過。
觸發方式：
- Hover：滑鼠移到項目上時開啟子選單。
- Click：第一次點擊或輕觸會開啟子選單；再次點擊該項目則會前往其連結。
- Click toggle：每次點擊都會開啟或關閉子選單；上層項目永遠不會前往其連結。
帳戶連結
會隨顧客登入狀態切換的顧客帳戶捷徑。預設全部關閉。開啟其中一項後，會顯示其圖示與標題的欄位（例如 Login icon（登入圖示）和 Login title（登入標題），可將「Login」改名為「Sign in」）。
- Show login link（顯示登入連結）
- 顧客未登入時顯示。
- Show register link（顯示註冊連結）
- 建立帳戶的連結。顧客未登入時顯示。
- Show account link（顯示帳戶連結）
- 前往顧客帳戶頁面的連結。顧客登入時顯示。
- Show logout link（顯示登出連結）
- 顧客登入時顯示。
間距
拖曳滑桿或輸入以 px 為單位的數值。
- Main menu padding（主選單內距）
- 每個最上層項目兩側的水平空間。
- Main menu line height（主選單行高）
- 最上層選單列的高度。
- Dropdown line height（下拉式選單行高）
- 下拉式子選單中每一列的高度。
- Tab line height（分頁行高）
- 分頁式選單中每個分頁的高度。
- Link list line height（連結清單行高）
- 連結清單區塊中每個連結的高度。
輪播
適用於會滑動的區塊，例如商品輪播和圖片輪播。
- Auto play（自動播放）
- 投影片會自動移動。
- Infinity loop（無限循環）
- 播放到最後一張投影片後，輪播會從第一張重新開始。
進階
- Mobile menu when width less than（寬度小於此值時使用行動版選單）
- 螢幕寬度（px）小於此值時使用行動版選單。較寬的螢幕則使用桌面版選單。
- Hide submenu of linklist block（隱藏連結清單區塊的子選單）
- 僅限行動裝置。 收合每個連結清單標題下的連結；顧客輕觸標題的箭頭即可展開。
- Show add to cart button（顯示加入購物車按鈕）
- 在選單商品區塊中的商品上顯示加入購物車按鈕。顏色：Colors > Add to cart button（加入購物車按鈕）。
- Enable lazyload image（啟用圖片延遲載入）
- 只在需要時才載入選單圖片，有助於提升頁面速度。建議保持開啟。
疑難排解
在行動裝置上輕觸上層項目無法開啟其頁面
當 Trigger - Mobile 設為 Click toggle 時，輕觸上層項目只會開啟其子選單。請改為 Click，或將上層頁面新增為子選單內的第一個連結。請參閱選單項目在行動裝置上無法跳轉。
行動版選單沒有出現在平板電腦或小型筆電上
螢幕寬度大於 Mobile menu when width less than 時，一律使用桌面版選單。請調高這個數值。
這個頁面有幫助嗎？
感謝您的意見回饋！ 告訴我們缺少了什麼
回報問題