English Tiếng Việt Français Deutsch 中文 日本語 Italiano Português Español
Xem demo Bắt đầu

Câu hỏi thường gặp

Câu hỏi 1: Làm cách nào để ngăn Desktop Mega Menu của tôi xuống dòng thứ hai?

Có hai tình huống có thể làm hỏng bố cục của thanh Desktop Mega Menu: quá nhiều mục cấp 1, hoặc trang web được xem trong cửa sổ hẹp hơn desktop tiêu chuẩn. Hai cài đặt trong Setting → Layout → Desktop sẽ khắc phục điều này — không cần code.

Before — too many items wrap to a second line Home Shop Categories Sale Blog About Contact Support ⚠ The second row pushes page content down, and the header height changes unpredictably across screen sizes. After — "Menu overflow navigation" keeps it on one row Home Shop Categories Sale Blog › About Contact Support Items that don't fit (About, Contact, Support...) live behind the arrow button — click to reveal them, without wrapping.

Bật Show navigation arrows when menu overflows. Thanh cấp 1 luôn ở một hàng; các mục không vừa được ẩn sau nút mũi tên › thay vì xuống dòng. Hai trường màu, Button background color và Arrow icon color, cho phép bạn tạo kiểu cho nút.

Mobile switch breakpoint

Theo mặc định, bất kỳ màn hình nào hẹp hơn 768px sẽ chuyển toàn bộ menu sang chế độ di động, ngay cả khi vẫn còn đủ chỗ cho bố cục desktop — thường gặp trên máy tính bảng hoặc cửa sổ trình duyệt đã thay đổi kích thước. Hạ thấp trường Breakpoint (px) để giữ thanh desktop hiển thị ở độ rộng hẹp hơn.

Setting → Layout → Desktop ↔ Mobile switch breakpoint Screen width below which the menu switches to mobile 768 px › Menu overflow navigation Show navigation arrows when the menu overflows Both cards only appear for a Desktop Mega Menu — not Tabbar, FAB, Slide, or Mobile Mega Menu.
Default — fixed at 768px Mobile / Hamburger Desktop Mega Menu 768px After setting Breakpoint = 600 (+ overflow navigation enabled) Mobile / Hamburger Desktop (new range) Desktop Mega Menu 600px 768px The 600–768px range used to be hidden as mobile — it now keeps the desktop layout.

Dải mới mà điều này mở ra (giữa breakpoint của bạn và 768px) hẹp hơn desktop tiêu chuẩn — bật thêm Menu overflow navigation để các mục cấp 1 không xuống dòng trong dải đó.

Ví dụ: breakpoint = 600 với Menu overflow navigation bật:

Chiều rộng màn hình Hành vi
Dưới 600px Menu di động / hamburger
600px – 768px Desktop Mega Menu, nút mũi tên giữ các mục ở một hàng
Trên 768px Desktop Mega Menu, hành vi tiêu chuẩn

Hai cài đặt này độc lập với nhau, và chỉ ảnh hưởng đến Desktop Mega Menu — không phải Tabbar, FAB, Slide menu, hoặc Mobile Mega Menu.

Câu hỏi 2: Làm cách nào để hiển thị Desktop Mega Menu của tôi dưới dạng Slide menu trên di động?

Đôi khi bạn muốn dùng cách responsive kiểu cũ: dựng một Desktop Mega Menu duy nhất rồi để nó tự thu gọn thành Slide (Hamburger) menu trên di động, thay vì dựng riêng một menu mobile từ đầu.

Điểm mạnh
Bạn chỉ cần maintain 1 menu — bản desktop. Bản mobile tự động ăn theo, không có cây thứ hai phải giữ đồng bộ.
Điểm yếu
Mobile-first mới là xu hướng thiết kế điều hướng đúng hiện nay — điện thoại mang lại lượt truy cập nhiều nhất, thường cả doanh thu cao nhất. Một cây menu dựng cho thanh desktop rộng rồi ép xuống mobile thực chất là desktop-first: quá nhiều lần chạm mới tới được 1 link, các nhóm kiểu dropdown khi xếp dọc lại đọc rất khó, không có chỗ cho các shortcut riêng cho mobile.

Với menu điều hướng chính của store, dựng riêng 1 menu cho mobile ngay từ đầu — Slide, Grid, hoặc TabBar riêng — thường đáng công maintain thêm hơn.

Giải pháp trung dung: phản chiếu Desktop Mega Menu vào 1 Slide menu bằng Smart responsive (các bước bên dưới), kết hợp thêm 1 item TabBar mở thẳng Slide menu đó. Đặt Link To của item thành open:NaviMenu(SF-xxxxxxxxxx) (Business / Elite) — dùng embed ID của Slide menu — để khách trên mobile có hẳn 1 điểm mở ở thanh dưới thay vì trông chờ vào icon hamburger ẩn.

Thiết lập Smart responsive

Mở Desktop Mega Menu của bạn → Setting → Mobile → thẻ Smart responsive. Nó nhúng một tham chiếu sống của menu này vào Slide menu — bạn chỉ chỉnh nội dung ở đây, bản mobile tự cập nhật theo.

Desktop Mega Menu — 3 columns Collections Women Dresses Tops Men New in Sale Info Size guide Shipping → Smart responsive Slide menu — flattened to 1 column Collections Dresses Tops New in Sale Size guide Shipping one tap reaches every link
  1. Nhấp Copy embed item để sao chép mẫu item này.
  2. Dán ở level 1 của một Slide menu có sẵn — hoặc tạo Slide menu mới trước nếu chưa có.

Bố cục nhiều cột tự động được làm phẳng: các cột trở thành 1 danh sách dọc, tiêu đề cột bị bỏ, và tự chèn 1 đường kẻ ngăn ở chỗ từng là ranh giới cột — để khách chạm 1 lần là tới được mọi link thay vì 2 lần.

Sau khi nhúng, thẻ hiển thị This menu already shows on mobile kèm link thẳng tới Slide menu, để bạn kiểm tra bất cứ lúc nào.

Tinh chỉnh bản mobile
  • Ẩn item chỉ hợp với desktop. Mở item đó trên Desktop Mega Menu → Visibility → bật Exclude when embedded. Item vẫn còn trên desktop, chỉ biến mất khỏi bản mobile.
  • Thêm item riêng cho mobile. Slide menu không bị giới hạn chỉ những gì tham chiếu mang qua — thêm các item level-1 bình thường ngay cạnh item nhúng cho những thứ thanh desktop không cần: nút gọi/WhatsApp, giờ mở cửa, nút đổi ngôn ngữ, hay các link vốn nằm ở header/footer theme. Các item này sống trực tiếp trong Slide menu, không đụng gì tới bản desktop.