設定選單與導覽列

設定網站的選單、導覽列與頁腳。

| 全版本

選單與導覽列說明¶

選單與導覽列設定 可分為兩大部分：

1. 選單內容設定：管理網站的選單項目與層級結構。
2. 選單外觀呈現：控制選單在網站前台的顯示方式與風格。

此設定可協助商家建立清晰、直觀的網站導航，提升使用者操作體驗。

選單內容設定 連結列表¶

商家需先在後台設定選單包含哪些項目及層級，設定完成後才能套用至網站外觀。

1. 設定路徑： 前往 網站外觀 > 選單/導覽列設定 > 選單設定。

2. 編輯選單： 系統預設有「主選單」與「頁腳」兩組選單，商家可點選名稱進入編輯。

   多國語系商店請見 多國語系選單設定，逐語系編輯選單項目名稱。

3. 新增項目： 進入選單編輯頁面後，點擊「新增連結」可加入多種導覽項目，包括：

   • 商品分類： 包含自訂分類、條件分類及多層級分類。
   • 行銷活動： 如紅配綠組合優惠、任選折扣、紅利商城等。
   • 內容頁面： 指定單一商品、自訂頁面、部落格主題或文章。
   • 功能連結： 查詢頁面、聯絡店家、首頁或外部連結。

   

4. 層級與排序： 項目建立後，可透過 滑鼠拖拉 調整順序，將項目向右縮排即可建立次級選單， 最多支援三層結構。

   

5. 前台畫面： 點擊右上角 前往商店 圖示可以前往前台檢視設定成果。

   

導覽列外觀設定 Navbar¶

根據商家使用的版型（拖拉版型或預設版型），外觀設定路徑與功能略有不同。

拖拉版型設定¶

拖拉版型的導覽列編輯器由上而下分為 8 個設定區塊：

網站 Logo¶

• 電腦版／平板版／手機版圖片： 可分別上傳三種裝置的 Logo。建議 不超過 1MB、寬不限、高 100px，支援 JPG／PNG／JPEG／GIF。

  若僅上傳電腦版，系統會自動同步顯示於平板與手機版。

• 電腦版 LOGO 高度： 可輸入 20px–300px 之間的數值，調整 Logo 在電腦版的顯示高度。

• 平板版、手機版選單 LOGO 位置： 可選擇 置左（預設）或 置中。
• 圖片替代文字（Alt）： 輸入 Logo 的說明文字以優化 SEO。

導覽列樣式¶

• 電腦版導覽列樣式： 三選一
  • 預設： 網站 Logo 與選單換排、置中顯示（Logo 在上、選單在下）。
  • 併排置左： Logo 與選單併排，整體靠左。
  • 併排置中： Logo 與選單併排，整體置中。
• 背景透明： 勾選後導覽列背景透明（常搭配滿版主視覺使用）。

導覽列字體¶

可分別調整 電腦版 與 平板/手機版 的字體縮放比例，標題與內文各自獨立：

• 標題字體大小／內文字體大小： 可選 80%／90%／100%（預設）／110%／120%。

主要導覽列選單設定¶

• 電腦版選單： 挑選要顯示在電腦版導覽列的選單。需先於選單內容設定建立好選單項目。

• 電腦版選單樣式：

  • 次選單不同步展開（三維選單，預設）： 第二、三層選單分開顯示。
  • 次選單同步展開（二維選單）： 第二、三層選單同步一起展開。

• 平板版、手機版選單： 挑選要顯示在行動裝置側邊選單的選單。

• 非電腦版選單預設展開： 勾選後，平板／手機的側邊選單預設為展開狀態。

搜尋欄位設定¶

• 顯示搜尋欄： 控制導覽列是否出現搜尋欄（預設開啟）。

置頂公告¶

顯示於網站最上方的公告橫幅，可設定為圖片或文字，並支援上下架時間與倒數計時。

• 僅顯示於首頁： 勾選後公告只在首頁出現。

• 公告類型： 選擇 圖片公告 或 文字公告。

  • 圖片公告： 分別上傳電腦版（建議寬 1920px）、平板版（960px）、手機版（480px）圖片，並可填寫圖片替代文字。
  • 文字公告： 輸入公告內容，並設定 字級、文字顏色、背景顏色。

  

• 公告連結／在新分頁開啟： 為公告加上點擊連結，可選擇是否於新分頁開啟。

• 上架時間／下架時間： 設定公告自動顯示與隱藏的時間。

• 顯示時間倒數： 開啟後於公告顯示倒數計時，並可自訂 倒數文字顏色 與 倒數背景顏色。

  

預設版型設定¶

• 路徑： 網站外觀 > 套版主題管理 > 網站設定 > 導覽列。

• Logo 設定： 上傳一般 Logo 與手機側邊選單專用的 Logo。

• 選單模式： 可根據需求選擇 「二維選單」或「三維選單」 模式。

• 其他設定： 可控制是否顯示搜尋欄位及「全部商品」collections/all 頁面的商品列表樣式。

頁腳選單與外觀設定 Footer¶

頁腳設定可決定網站最下方顯示哪些內容與排列方式，包含選單、聯絡資訊、自訂文字與社群媒體圖示。此設定適用於 拖拉版型，於 套版主題管理 中進行。

頁腳內容¶

頁腳最多可新增 4 個內容區塊，每個區塊可獨立設定。新增與編輯方式如下：

1. 進入頁腳設定： 登入管理後台，前往 網站外觀 > 套版主題管理 > 網站設定，於左側點擊 頁腳 進入編輯頁面。
2. 新增區塊： 點擊 新增區塊，可加入「選單」、「聯絡資訊」、「自訂文字」三種內容類型。
3. 編輯區塊內容： 點擊區塊名稱進入該區塊的設定頁面進行調整(三種區塊的設定內容見下方說明)。

頁腳選單 導覽列¶

頁腳的「選單」區塊負責 挑選要顯示哪一組選單，選單本身的項目與層級則在 選單內容設定 建立。兩者分工如下：

1. 建立選單內容： 先於 網站外觀 > 選單/導覽列設定 > 選單設定 建立好選單與其項目、層級。
2. 新增選單區塊： 於頁腳設定頁面點擊 新增區塊 > 選單，再點擊該區塊進入設定頁面。
3. 設定區塊標題： 於 標題 欄位輸入此區塊在前台顯示的名稱(預設為「關於我們」)。
4. 選擇要顯示的選單： 於 選擇選單 下拉選單中，挑選步驟 1 已建立的選單，該組選單的項目即會顯示於頁腳。

聯絡資訊與自訂文字¶

除了選單，頁腳區塊還可加入聯絡資訊與自訂文字：

• 聯絡資訊： 顯示店家聯絡方式。可自訂標題(預設為「聯絡資訊」)，並逐項勾選是否顯示 聯絡電話、傳真號碼、營業時間、信箱、聯絡地址、統一編號，每個欄位皆有獨立的顯示開關與輸入框。

• 自訂文字： 輸入自訂說明文字或版權資訊。可設定標題與內文，內文支援文字排版編輯。

調整選單排列樣式¶

點選展開 其他版面設定，在 選單設定 區塊中，可調整選單區塊的排列方向：

• 上下排列： 選單列表由上至下排列顯示(預設值)。

• 左右排列： 選單列表由左至右排列顯示。

社群媒體¶

點選展開 其他版面設定，在 社群媒體設定 區塊中，可設定 Facebook 粉專區塊與各社群圖示連結：

• 顯示 FB 粉專區塊： 開啟後可於頁腳嵌入 Facebook 粉絲專頁插件(預設為開啟)。

  設定須知與限制

  • 先決條件：須先完成 Facebook 新版商業擴充套件 (FBE) 設定，方可正常顯示。
  • 裝置限制：此區塊僅支援 電腦版 顯示，平板與手機版不支援。
  • 關閉此設定僅是不顯示嵌入式粉專內容，不影響 Facebook 串接與像素追蹤。

• 顯示 Icon： 可逐一勾選要在頁腳顯示的社群圖示，並於對應欄位輸入網址，包含 Facebook、Instagram、LINE、YouTube。

多國語系選單設定¶

若已開通多國語系功能， 主選單 與 頁腳選單 的項目名稱都在此處逐語系編輯。兩者做法相同，差別只在選的是哪一組選單。系統不會自動翻譯，各語系需分別填寫。

操作步驟：

1. 前往 網站外觀 > 選單/導覽列設定，點選要編輯的選單(主選單或頁腳)。

2. 點選 切換至目標語言。

   

3. 逐項點「編輯」修改選單項目名稱，輸入後按確認。

   

4. 改完後 儲存選單，前台即會依瀏覽語言顯示對應文字。

常見問題¶