Desktop Mega Menu Slide Menu Tab Bar

Heater — thay header chính bằng Navi+ để gập một website lớn thành điều hướng dễ, đồng nhất mobile và desktop

Cách một chuỗi sửa chữa lớn ở Hong Kong thay toàn bộ header mặc định bằng Navi+ — biến hàng trăm trang hãng × model × lỗi × cửa hàng thành một hệ điều hướng nhất quán trên cả mobile lẫn desktop.

H
Heater
heaterhk.net
Sửa điện thoại & tablet Shopify Website lớn
Tóm tắt nhanh
Ngành
Sửa chữa điện thoại & tablet (Hong Kong)
Nền tảng
Shopify
Thách thức
Website rất lớn; header mặc định không gánh nổi; mobile và desktop rời rạc
Navi+ menus
Desktop Mega Menu · Slide Menu · Tab Bar (thay header chính)
Trọng tâm
Thay header, hợp nhất điều hướng mobile + desktop

Vấn đề của khách hàng

Heater là một website lớn: hơn 13 hãng máy, mỗi hãng nhiều model, mỗi model nhiều loại lỗi (màn hình, pin, cổng sạc, camera, vào nước…), cộng thêm 5 cửa hàng và một luồng đặt lịch / báo giá. Cấu trúc thực chất là một cây rất rộng và sâu: hãng × model × lỗi × cửa hàng.

Header mặc định của theme không gánh nổi cây đó. Trên desktop nó là một thanh menu phẳng; trên mobile lại là một hamburger drawer dựng riêng. Hai trải nghiệm khác nhau, hai logic khác nhau — khách quen desktop sang mobile phải học lại từ đầu. Một website lớn mà header yếu thì toàn bộ site trở nên khó điều hướng, và khách đang vội vì máy hỏng càng dễ bỏ đi.

Navi+ giải quyết được gì

Hướng đề xuất không phải “thêm một menu” mà thay vai trò của header chính bằng một hệ Navi+ thống nhất — cùng một nguồn cấu trúc cho mọi thiết bị, để mobile và desktop nói cùng một ngôn ngữ điều hướng.

Desktop Mega Menu — thay header desktop, gập cả site vào một chỗ

Mega Menu thay thanh menu mặc định trên desktop: toàn bộ hãng × loại lỗi được gom thành một cấu trúc có cột rõ ràng, có hình. Một website lớn trở nên dễ quét chỉ trong một lần rê chuột — khách thấy ngay store sửa được hãng nào, lỗi nào, thay vì phải bấm thử từng trang hãng.

Slide Menu — thay menu mobile, cùng cấu trúc với desktop

Trên mobile, Slide Menu thay hamburger mặc định và dùng chính cấu trúc của mega menu: khách trượt theo cấp hãng → model → lỗi. Vì cùng một nguồn, mobile và desktop đồng nhất — không phải dựng và bảo trì hai menu riêng, và khách không phải học lại khi đổi thiết bị.

Tab Bar — hoàn thiện header mới với hành động luôn trong tầm tay

Tab Bar cố định dưới cùng màn hình mobile, giữ các hành động quan trọng luôn sẵn: Đặt lịch, Cửa hàng, Gọi, Menu. Cùng với Slide Menu, nó thay nốt phần còn lại của header mặc định — khách có một thanh điều hướng gọn, đúng tầm ngón cái, thay vì phải kéo lên đầu trang.

Kết quả hướng tới

Khi header chính được thay bằng một hệ Navi+ thống nhất, một website rất lớn trở nên dễ điều hướng, và quan trọng hơn — trải nghiệm trên mobile và desktop trở thành một. Khách học một lần, dùng được ở mọi nơi.

  • Header mặc định được thay bằng một hệ điều hướng Navi+ duy nhất.
  • Cây site lớn (hãng × model × lỗi) được gập gọn thành vài bước rõ ràng.
  • Mobile và desktop đồng nhất vì lấy chung một nguồn cấu trúc.
  • Ít công bảo trì hơn: không còn hai menu rời cho hai thiết bị — không cần thay theme.

Nguyên tắc rút ra

Những điểm áp dụng được cho hầu hết website lớn, nhiều cấp — không riêng Heater.

  • Header là xương sống của site lớn: site càng lớn, header càng phải mạnh — Navi+ thay được vai trò đó.
  • Một nguồn cấu trúc cho mọi thiết bị: mobile và desktop lấy chung một cây danh mục để luôn đồng nhất.
  • Gập site lớn thành vài bước: mega menu + slide menu biến hàng trăm trang thành một đường đi ngắn.
  • Thay header, không thay theme: nâng cấp điều hướng mà không phải làm lại store hay bỏ app đang chạy.

Có một store tương tự và muốn thử Navi+? Xem qua các loại menu hoặc đọc tài liệu hướng dẫn.

K
Khoi — Founder, Navi+
Xây dựng Navi+ và trực tiếp tư vấn điều hướng cho các store Shopify nhiều danh mục.

Bắt đầu với Navi+ AI Menu Builder

Chọn nền tảng của bạn — miễn phí cài đặt, hoạt động trong vài phút.