最後更新：2026/07/27｜畫面範例：ZD8 CMS
首頁設定
本章涵蓋前台主選單、首頁區塊、頁尾、網站配色與 R18+ 宣告。首頁相關設定會直接影響公開網站，建議先儲存草稿或預覽，再正式發布。
主選單設定
用途： 建立前台主導覽分類、外部連結與內容頁。
進入路徑： 左側選單 → 首頁設定 → 主選單設定
新增選單
- 按「新增選單」。
- 輸入分類名稱。
- 選擇選單顏色、標示與顯示／隱藏。
- 選擇選單用途：
- 連到商品分類：先完成商品分類與商品歸類。
- 連到網址：填寫完整且可公開開啟的 HTTPS 網址。
- 編輯網頁內容：使用「編輯內容」建立站內內容頁。
- 將選單拖曳到正確階層與順序。
- 按「儲存分類」。
- 開啟前台桌機版與手機版，確認順序、階層與連結。
編輯內容頁
- 在目標選單按「編輯內容」。
- 編輯標題、文字、圖片與連結。
- 檢查圖片替代文字、連結與手機排版。
- 儲存後回到主選單，確認該項為顯示狀態。
完成判斷
- 前台選單順序與後台一致。
- 隱藏項目不會出現在前台。
- 連結與內容頁都可開啟，且不會導向 CMS 後台網址。
刪除或改變上層分類可能影響下層選單與既有連結。先記錄原階層，必要時以「隱藏」代替刪除。
首頁佈局設定
用途： 以既有看板與內容區塊排列首頁，支援草稿、預覽、發布檢查與還原。
進入路徑： 左側選單 → 首頁設定 → 首頁佈局設定
建立或調整首頁
- 進入後先按「重載正式版」，確認以目前線上版本為基準。
- 如要快速建立，按「套用模版」選擇適合產業的版型。
- 按「新增區塊」，選擇橫幅輪播、三格／二格看板、自訂內容、最新商品或品牌合作等區塊。
- 在區塊按「編輯」設定圖片、標題、連結與商品來源。
- 需要重複樣式時使用「複製」；不需要時使用「移除」，移除前先確認不是唯一內容。
- 拖曳調整位置與尺寸；若畫面鎖定，先按「解除鎖定」。
- 按「暫存草稿」保留進度。
- 執行「素材檢查」與「發布檢查」，修正圖片路徑、必填內容與連結。
- 按「預覽畫面」，檢查桌機與手機。
- 確認後按「儲存發布」。
還原與重載
重載正式版：捨棄目前未保存的畫面，重新載入線上版本。還原上次發布：將內容回到上一個發布版本；使用後仍要預覽並確認。替換舊圖路徑：只在素材檢查指出舊路徑，且已完成備份時使用。
完成判斷
- 發布檢查沒有阻擋項目。
- 前台首頁重新整理後顯示新版本。
- 所有圖片、連結、商品區塊在桌機與手機都可用。
首頁視覺編輯器
用途： 以拖曳式區塊建立首頁，提供即時桌機／手機預覽、草稿與發布。
進入路徑： 左側選單 → 首頁設定 → 首頁視覺編輯器
畫面區塊
圖中 A～D：A 主選單設定、B 首頁佈局設定、C 首頁視覺編輯器、D 頁尾選單設定。請先確認目前分頁與儲存按鈕，再開始調整前台版面。
圖 1：依實際後台區塊與按鈕重繪；不包含店家首頁素材或登入資料。
可加入的常用區塊包括首頁主視覺、Banner 輪播、活動橫幅、商品展示、最新商品、主選單商品列表、精選系列、品牌故事、自訂內容、服務賣點與常見問題。
建立首頁
- 按「載入已發布」，以目前線上內容開始。
- 按「選擇區塊」，依分類或搜尋找到需要的區塊。
- 加入區塊後，在左側拖曳排序。
- 點選區塊，在編輯區填寫標題、圖片、按鈕文字、連結、商品來源與配色。
- 使用眼睛／啟用控制確認區塊是否顯示。
- 切換「桌機」與「手機」，使用縮放功能檢查畫面。
- 按「儲存草稿」；重新整理後確認草稿仍在。
- 逐一處理發布檢查訊息；只有在確認可接受時才選「仍要發布」。
- 按「發布」，再到前台檢查。
自訂內容安全
自訂內容可使用 HTML、CSS 或 JavaScript 時，只能由熟悉前端與網站安全的人員操作。不得貼入來源不明的追蹤碼、外部腳本、表單或要求登入資料的程式。
完成判斷
- 草稿重新開啟後內容未遺失。
- 發布後前台區塊順序、顯示狀態與後台一致。
- 手機版沒有文字重疊、圖片裁切或按鈕無法點擊。
頁尾選單設定
用途： 維護前台頁尾的服務說明、政策、聯絡方式與站外連結。
進入路徑： 左側選單 → 首頁設定 → 頁尾選單設定
操作步驟
- 新增或選取頁尾分類。
- 輸入分類名稱並設定顯示／隱藏。
- 選擇連結網址或「編輯網頁內容」。
- 建立隱私權、服務條款、配送、退換貨與聯絡方式等內容。
- 拖曳調整階層與順序。
- 按「儲存分類」。
- 到前台每一頁的頁尾確認連結。
完成判斷
- 頁尾在桌機與手機都能展開與點選。
- 政策內容為最新核准版本。
- 外部連結使用 HTTPS，且不含後台登入或測試網址。
圖中 A～B：A 網站主題顏色、B R18+ 限制級宣告。修改後請另開前台頁面檢查文字對比、按鈕顏色與宣告顯示是否正確。
網站主題顏色
用途： 套用預設主題或建立自訂配色，統一 Topbar、主選單、內容、頁尾與購物車圖示。
進入路徑： 左側選單 → 首頁設定 → 網站主題顏色
套用預設主題
- 瀏覽預設主題色票。
- 選擇一組主題並按「套用」。
- 開前台預覽主選單、內容、按鈕、購物車與頁尾。
- 檢查文字與背景對比，尤其是滑鼠移入、目前頁面與手機選單。
建立自訂主題
- 按「新增主題」。
- 輸入可辨識的主題名稱。
- 依序設定預設文字、內容背景、Topbar、主選單、購物車、Breadcrumb、頁尾與 Copyright 顏色。
- 按「套用自訂主題」或儲存。
- 若修改既有主題，使用「修改主題」；不要直接刪除正在使用的主題。
完成判斷
- 所有主要文字在背景上清楚可讀。
- 滑鼠移入與目前頁面狀態仍可辨識。
- 前台桌機與手機顏色一致，Logo 不會因背景色而消失。
R18+ 限制級宣告
用途： 在全站或指定限制級商品開啟年齡／內容警語。
進入路徑： 左側選單 → 首頁設定 → R18+ 限制級宣告
建議角色： 商店管理員、法遵或內容負責人。
啟用步驟
- 勾選「啟用網站限制級警語」。
- 選擇套用範圍：
- 全站：進入任一頁面都顯示。
- 商品：只有商品本身設定為 18 禁時顯示。
- 輸入同意與不同意按鈕文字。
- 設定不同意時的導向網址；使用可公開的安全頁面。
- 使用預設內容或富文本編輯器建立警語。
- 按「預覽」檢查桌機與手機。
- 按「儲存」。
- 使用未登入或無痕視窗驗證出現條件、按鈕與導向。
HTML／CSS 進階設定
Html 編碼／解碼、CSS Code與「產生 Html Code」屬進階功能。- 修改前保存目前內容；只允許授權的網頁維護人員操作。
- 不得加入蒐集個資、繞過警語或來源不明的程式碼。
完成判斷
- 警語只在設定的範圍出現。
- 同意後可進入內容；不同意後導向正確網址。
- 關閉或清除瀏覽器狀態後仍能依規則重新驗證。
注意：R18+ 宣告不能取代法令要求、商品標示或實際年齡驗證。內容與套用範圍應由商店法遵／負責人核准。