English Tiếng Việt
Xem demo Bắt đầu
Giao diện menu

Vị trí và khoảng cách lề của menu

Tab Bar, Floating Button và Mobile Menu là ba loại menu cho phép bạn chọn vị trí hiển thị ngay trong Navi+. Bài này hướng dẫn bạn đặt từng loại menu vào đúng góc màn hình trên điện thoại và máy tính.

Trước khi bắt đầu

  • Bạn cần tạo sẵn menu trước. Vị trí menu có thể đổi lại bất cứ lúc nào sau khi tạo.
  • Desktop Mega Menu, Mobile Mega Menu và Icon Menu không có ô chọn vị trí trong phần này. Bạn xem thêm ở mục Các loại menu khác.

Đặt vị trí Tab Bar

  1. Mở menu trong Navi+, bấm bước Configure trên thanh bước dọc bên trái, rồi trong tấm Configure vừa trượt ra, tìm thẻ Display on mobile cho điện thoại hoặc Display on desktop cho máy tính.

  2. Ở mục Position, bấm chọn hình vị trí bạn muốn. Khung xem trước bên cạnh sẽ đổi ngay để bạn thấy menu nằm ở đâu.

    Sáu vị trí của Tab Bar trên điện thoại. Mặc định: sát đáy màn hình.

  3. Bấm Save ở góc trên khi đã ưng ý.

Các vị trí bạn có thể chọn:

  • Trên điện thoại có 6 hình: thanh nằm sát đáy màn hình theo mặc định, thanh sát đỉnh màn hình, hoặc thanh nhỏ nằm ở giữa hay góc dưới của cạnh trái, cạnh phải.
  • Trên máy tính: thanh nằm giữa đáy màn hình gồm một kiểu nổi và một kiểu sát đáy, nằm ở góc dưới bên trái hoặc bên phải, trải dài hết chiều ngang ở đáy hoặc đỉnh trang, hoặc làm thanh mảnh nằm dọc ở cạnh trái, cạnh phải. Bạn cứ bấm từng hình và nhìn khung xem trước bên cạnh để chọn kiểu hợp với shop.
  • Bốn vị trí trên máy tính có gắn nhãn Deprecated là kiểu thanh dọc cao kịch màn hình từ bản cũ, hiện đã ngừng dùng.

Nếu muốn tắt menu trên điện thoại hoặc máy tính, bạn bỏ chọn Show menu on mobile hoặc Show menu on desktop ngay trong cùng thẻ đó.

Đặt vị trí Floating Button

Floating Button không chọn vị trí bằng lưới hình mà có mục cài đặt riêng cho điện thoại và máy tính:

  1. Mở bước Configure, tìm thẻ Display on mobile rồi xem mục Position on mobile, hoặc vào thẻ Display on desktop rồi xem mục Position on desktop.

  2. Chọn góc đặt nút là Bottom-left, Bottom-center hoặc Bottom-right.

    Floating Button ở góc dưới bên trái. Mặc định là góc dưới bên phải.

  3. Nhập số pixel vào ô Bottom spacing để chỉnh khoảng cách từ nút tới đáy màn hình. Giá trị mặc định là 16.

Làm Tab Bar nổi cách mép màn hình

Tab Bar nằm sát mép hay nổi tách khỏi mép không phải là hai loại menu khác nhau. Bạn chỉ cần thêm khoảng cách lề margin quanh khung là thanh menu sẽ tách khỏi mép màn hình.

  1. Mở bước Design, chọn thẻ Main menu rồi kéo xuống khối Container spacing.

  2. Ở dòng Margin, nhập khoảng cách vào các ô Top, Right, Bottom, Left. Ví dụ bạn nhập 12 vào ô Bottom và 12 vào hai ô Left, Right.

  3. Nhìn sang khung xem trước, bạn sẽ thấy Tab Bar tách khỏi mép màn hình và nổi lên.

Nếu bạn chỉ nhập một số duy nhất, khoảng cách đó sẽ áp dụng cho cả điện thoại và máy tính. Muốn đặt mỗi nơi một số khác nhau, bạn nhập theo dạng 8 | 24 để cách lề 8px trên điện thoại và 24px trên máy tính.

Chú ý

Tab Bar sát đáy sẽ che phần cuối trang. Nếu nội dung cuối bị che hoặc đè lên widget chat, xem Menu đè lên widget chat, banner cookie hoặc header.

Chọn hướng trượt cho Mobile Menu

Mobile Menu là ngăn kéo mở ra khi khách bấm nút ☰, nên bạn sẽ chọn hướng trượt thay cho vị trí cố định.

  1. Mở bước Configure, tìm thẻ Main menu Slide Direction.

  2. Chọn một trong bảy hình.

    Bảy hướng trượt của Mobile Menu. Mặc định: ngăn kéo trượt từ trái sang phải.

  3. Xem thử trong khung xem trước, rồi bấm Save ở góc trên.

Trong app chỉ hiện hình minh họa chứ không ghi tên. Bảng dưới đây gọi tên 7 hình theo đúng thứ tự xuất hiện trong app:

Hướng Menu mở ra thế nào
Left to Right Trượt từ cạnh trái sang, đây là hướng mặc định
Right to Left Trượt từ cạnh phải sang
Top to Down Trượt từ đỉnh màn hình xuống
Down to Top Trượt từ đáy màn hình lên
Fullscreen Phủ kín cả màn hình
Full popup Hiện như hộp thoại lớn giữa màn hình
Fix on left Luôn hiện cố định ở cạnh trái, không cần bấm nút ☰

Ba điều bạn cần biết khi chọn hướng trượt:

  • Trên máy tính, chỉ có hai hướng Left to Right và Right to Left là khác nhau. Các hướng Top to Down, Down to Top, Fullscreen và Full popup khi mở trên máy tính đều trượt từ trái sang giống Left to Right; bốn hướng này chỉ có tác dụng trên điện thoại.
  • Khi chọn Fix on left, bên dưới sẽ hiện thêm hai công tắc là Display a fixed menu on desktop được bật sẵn theo mặc định và Display a fixed menu on mobile. Bạn nên cân nhắc kỹ trước khi bật công tắc trên điện thoại, vì menu cố định sẽ chiếm mất nhiều chỗ của màn hình nhỏ.
  • Hướng trượt này còn quyết định cách áp bề rộng khi bạn đặt menu hiện sẵn trên trang thay vì bấm nút mới mở.

Các loại menu khác

Desktop Mega Menu, Mobile Mega Menu và Icon Menu không nổi tự do trên trang. Vị trí của chúng phụ thuộc vào chỗ đặt bạn chọn lúc publish. Bạn xem chi tiết tại bài Mỗi loại menu được đặt ở đâu trên cửa hàng.

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

Sao tôi không thấy ô Position?

Đó là bình thường. Ô Position chỉ có ở Tab Bar. Floating Button dùng mục Position on mobile và Position on desktop riêng. Mobile Menu dùng mục Main menu Slide Direction. Các loại menu còn lại chọn chỗ đặt ở bước publish.

Lỡ chọn vị trí có nhãn Deprecated thì có sao không?

Vị trí đó vẫn chạy như cũ nhưng không còn được cập nhật, và app cũng hiện cảnh báo khi bạn bấm chọn. Để yên tâm dùng lâu dài, bạn nên đổi sang một vị trí khác không có nhãn Deprecated.

Sao menu nằm đúng chỗ nhưng lại hiện sai trang?

Vị trí trên màn hình và trang hiển thị là hai cài đặt khác nhau. Để chọn trang nào hiện hoặc ẩn menu, bạn xem bài Chọn trang, thiết bị và khách hàng thấy menu.

Nền tảng khác

Các bước ở trên dành cho Shopify — đây là cách mặc định.

Bài liên quan

Bài này có giúp ích không?

Cần người xem cùng? Chat với chúng tôi trong app hoặc viết về [email protected] — gửi kèm địa chỉ cửa hàng và tên menu.