商品增加後,導覽列不能只把更多分類塞進 mega menu。顧客可能從品類、使用情境、品牌、規格、相容型號或問題開始找。大型目錄需要分類法、搜尋、集合頁篩選和內容入口分工,導覽只是其中一層。
先用真實搜尋字詞、客服、分析和 card sorting 了解顧客怎麼稱呼商品,不直接沿用內部組織或 ERP 類別。
建立穩定分類法
頂層分類保持少量、互斥程度高且能長期存在。下層可以依商品類型,再用 filter 處理材質、尺寸、價格和用途。把所有屬性都建立成 menu 會產生重複路徑,也讓更新困難。
為每個分類寫定義、包含與不包含範例、owner 和對應 collection。商品上架時依規則分類,避免不同人用近義名稱建立新節點。
Mega menu 支援掃讀
用清楚 headings 和 columns 分組,不把數十個 links 平鋪。可加入少量促銷或內容卡,但主要分類應保持優先。Hover 只是其中一種開啟方式,鍵盤 focus、click、觸控和 Escape 都要可用;menu 關閉後焦點回到觸發項。
目前頁面和展開狀態要有視覺與語意提示。若 menu 太高超出 viewport,提供可滾動區和可見關閉,避免 focus 被遮住。
集合頁接手精細篩選
進入分類後,用 availability、price、size、color、brand、compatibility 等 filter 縮小結果。Filter 值來自乾淨商品資料;同一顏色若有十種拼法,前台會變成十個選項。行動版 drawer 顯示已選數量、結果預估、清除與套用。
Filter URL 是否可索引要有 SEO 規則,避免無限制組合產生 crawl 空間。重要需求可建立策展 collection 與獨立內容,其餘參數頁保持適當 canonical 或索引控制。
搜尋處理已知名稱與長尾
搜尋入口在桌面與手機都要容易找到,autocomplete 支援商品、分類、內容、SKU 和常見同義詞。零結果記錄回內容與商品團隊。詳細資料管線可參考 Headless 搜尋規劃,Theme 商店也需同樣的 query 品質治理。
搜尋和導覽互相補充。熱門搜尋若反覆指向不存在分類,可能表示資訊架構缺口;導覽節點很少被使用,則需檢查名稱或位置。
行動版改用逐層任務
手機空間不適合縮小 mega menu。使用清楚的 drill-down、返回、目前層級和可直接前往分類頁的 link。搜尋、購物車與帳號入口保持固定且不互相遮擋。開啟 menu 時管理背景捲動與 focus。
測試拇指觸控、螢幕放大、橫向和長翻譯。WCAG 2.2 的 target size 與 focus not obscured 也應納入驗收。
建立導覽變更流程
新節點需有顧客證據、商品範圍、URL、SEO、owner 和下線條件。大促入口設定開始與結束時間,活動後不留死連結。每季用 click、search、zero result、集合到商品和可用性測試回顧,不能只以點擊率判斷分類好壞。
Breadcrumb 和頁面標題保持一致
顧客進入深層集合後,需要知道目前位置並回到上層。Breadcrumb 使用可點擊的真實分類關係,頁面 H1、menu label 和 title 不必字字相同,但語意不能互相衝突。商品屬於多個集合時,定義主要路徑,避免同一頁依入口產生不穩定 breadcrumb。
結構化資料應反映頁面實際路徑,不能產生一條顧客無法操作的假階層。重新分類時同步 redirect、內鏈、breadcrumb 和 sitemap。
權限和發布需要預覽
大型目錄的 menu 變更可能影響全站。限制可編輯角色,在 Theme 副本或 staging 預覽桌面與手機,檢查空集合、重複 label、失效 URL 和不同語系。發布前保存上一版結構,出錯時能回復。
市場導覽允許不同內容,但不應讓 locale URL 混入錯誤語言。缺少分類版本時顯示明確未提供狀態或阻擋發布,不能 fallback 到繁中。
將 menu、breadcrumb、filter、search 和 mobile drawer 納入 Shopify 設計系統,並用最長標籤、最多層級、零商品與不同市場做回歸,讓目錄成長時不必重做整套導覽。