Cùng một cửa hàng, ba nơi khách cần menu: màn hình máy tính, ngăn kéo trên điện thoại và đáy màn hình điện thoại. Mỗi nơi một menu, nhưng chỉ phải dựng cây danh mục một lần.
1Máy tính: Desktop Mega Menu
Khách trên máy tính có chỗ rộng và con trỏ chuột, nên họ muốn thấy nhiều danh mục cùng lúc mà không phải bấm qua từng trang.
Mega Menu thả xuống nhiều cột ngay dưới header, bày cả nhóm danh mục và mục con trong một lần rê chuột.
↓ Smart responsive: chính cây này hiện sang điện thoại
2Điện thoại: Mobile Menu (Slide) dùng lại cây Mega
Màn hình điện thoại nhỏ, không đủ chỗ thả nhiều cột. Khách cần một ngăn kéo gọn, mở từng cấp một.
Với Smart responsive, Mobile Menu lấy luôn cây của Mega Menu, bạn không phải dựng lại danh mục lần hai và hai bên không bao giờ lệch nhau.
Chuyển Mega sang điện thoại: card có sẵn trong app
Bạn không phải dựng lại gì. Trong Mega Menu, mở Configure > Smart responsive: bấm Copy embed item, rồi dán vào cấp 1 của Mobile Menu. Chưa có Mobile Menu thì bấm Create a Mobile menu ngay tại card. Mục nhúng tự biến thành cây Mega, giữ nguyên cấp.
You edit here→Mobile menu on mobile
Follows automaticallyStep 1: Copy this menu item template
Copy embed itemStep 2: Pick the Mobile menu to paste it into
Create a Mobile menu
Cấu hình hai chiều: ẩn bớt, thêm riêng
Điện thoại cần ít mục hơn và vài thứ máy tính không có, nên bạn chỉnh được cả hai chiều:
- Ẩn bớt: mục nào chỉ hợp máy tính, mở mục đó trong Mega, vào Visibility và bật Exclude when embedded. Mục vẫn ở máy tính, chỉ biến mất khỏi bản điện thoại.
- Thêm riêng: Mobile Menu vẫn thêm được mục của riêng nó quanh mục nhúng, ví dụ ô tìm kiếm ở đầu, mục Liên hệ hay nút WhatsApp mà máy tính không có.
Giới hạn thật: mục nhúng chỉ đặt được ở cấp 1 của Mobile Menu và không có mục con riêng. Mega đang được nhúng thì không xoá được; muốn xoá, gỡ mục nhúng trong Mobile Menu trước.
↓ Tab Bar mở đúng ngăn kéo này
3Đáy điện thoại: Tab Bar mở Mobile Menu
Khách cầm điện thoại bằng một tay, ngón cái chỉ với tới nửa dưới màn hình. Nút ☰ của theme nằm ở góc trên nên khó bấm.
Tab Bar nằm ở đáy, luôn thấy. Tab Menu mở ngay Mobile Menu ở chặng 2, nên khách tới danh mục nhanh nhất mà không cần với lên trên.
Lợi ích chung
Bạn sửa danh mục ở một chỗ, Desktop Mega Menu. Máy tính đổi, Mobile Menu đổi theo, và Tab Bar vẫn mở đúng ngăn kéo đó. Mục nào chỉ muốn hiện trên máy tính thì bật Exclude when embedded trong Visibility của mục.
Làm thế nào
- Mega Menu: Add menu > Desktop Mega Menu, dựng cây ở bước Build Menu, rồi Publish > Turn on. Chi tiết: Tạo Desktop Mega Menu.
- Mobile Menu: tạo một Mobile Menu trống, rồi trong Mega Menu mở Configure > Smart responsive, bấm Copy embed item và dán vào cấp 1 của Mobile Menu. Chi tiết: Tạo Mobile Menu.
- Tab Bar: Add menu > Tab Bar, dán mã
open:NaviMenu(SF-…)của Mobile Menu vào ô Link của tab Menu. Chi tiết: Tạo Tab Bar.
Chọn loại menu khác? Xem Chọn loại menu phù hợp.