Vị trí menu trên màn hình

Bài này tra cứu các ô chọn chỗ menu nằm trên màn hình. Có hai nhóm: ô Position của Tab Bar, và các ô Position on mobile, Position on desktop, Bottom spacing của Floating Button. Nếu bạn muốn đọc theo tình huống (“làm Tab Bar nổi lên đầu màn hình”), xem bài Vị trí và khoảng cách lề của menu.

Các loại menu khác không có ô vị trí ở đây. Mobile Menu chọn hướng trượt ở Main menu Slide Direction, còn Desktop Mega Menu, Mobile Mega Menu và Icon Menu nằm ở chỗ bạn đặt lúc publish, xem Mỗi loại menu được đặt ở đâu trên cửa hàng.

Mở các ô vị trí ở đâu?

1. Mở menu, bấm bước Configure trên thanh bước dọc ở mép trái. Tấm Configure trượt ra từ bên phải.
2. Cuộn tới thẻ Display on mobile (điện thoại) hoặc Display on desktop (máy tính). Thẻ này nằm ở đầu tấm.
3. Chọn vị trí ngay trong thẻ. Khung xem trước đổi theo, rồi bấm Save.

N+Navi+ Menus

1Build Menu2Design3ConfigureBấm Configure4Preview & Test5PublishOFFMore

Menu items

Home/Auto

Shopcollections/allAuto

SearchsearchAuto

Wishlistpages/wishlistAuto

CartcartAuto

ITEM

9:41•••

yourshop.com

STORE

HomeShopSearchWishlistCart

MobileDesktopPreview only

Configure

Mobile DesktopVisibility RulesNavigation IconsMulti-languageSubmenu Expand Style

Display on mobileSettings specific to mobile — small screens and touchscreen interactions like tap and swipe.Show menu on mobilePositionScroll effects

Display on desktop

Muốn tắt hẳn menu trên một loại thiết bị, bỏ chọn Show menu on mobile hoặc Show menu on desktop ở đầu thẻ. Xem thêm bài Hiện menu trên điện thoại và máy tính.

Ô	Dùng cho	Mặc định
Position (điện thoại)	Tab Bar	Sát đáy màn hình
Position (máy tính)	Tab Bar	Giữa đáy màn hình
Position on mobile	Floating Button	Bottom-right (góc phải)
Bottom spacing (điện thoại)	Floating Button	16 px
Position on desktop	Floating Button	Bottom-right (góc phải)
Bottom spacing (máy tính)	Floating Button	16 px

Vị trí Tab Bar

Tab Bar chọn vị trí bằng một hàng hình nhỏ (chọn một). App chỉ hiện hình, không ghi tên, nên bên dưới đặt tên theo hình để bạn dễ tìm.

Position trên điện thoại

Ô Position trong thẻ Display on mobile: chọn Tab Bar nằm ở đâu trên màn hình điện thoại.

Display on mobile

Show menu on mobile

Position

POPULARMặc định, phổ biếnPOPULARPhổ biến

• Lựa chọn (6 hình, theo thứ tự trong app): (1) sát đáy màn hình, (2) sát đỉnh màn hình, (3) thanh dọc ở giữa cạnh phải, (4) thanh dọc ở giữa cạnh trái, (5) thanh dọc ở góc dưới bên phải, (6) thanh dọc ở góc dưới bên trái. App gắn nhãn POPULAR cho hình 1 và 5.
• Mặc định cho menu mới: hình 1, sát đáy.
• Áp cho: chỉ Tab Bar. Các loại menu khác không hiện ô này. Mọi gói, cả Shopify, Wix và website khác. Ô ẩn khi bạn bỏ chọn Show menu on mobile.
• Đổi ô này thì khách thấy gì:
  • Hình 1 và 2: thanh trải hết chiều ngang, dính đáy hoặc dính đỉnh màn hình. Navi+ chừa chỗ cho thanh (đẩy nội dung trang lên hoặc xuống) để thanh không che phần đầu hoặc cuối trang.
  • Hình 3 đến 6: Tab Bar thành một thanh dọc, các mục xếp từ trên xuống. Menu con mở sang bên trái của thanh khi thanh nằm bên phải.
  • Đường kẻ phân cách giữa các mục tự đổi hướng theo kiểu thanh: kẻ dọc ở thanh ngang, kẻ ngang ở thanh dọc.
  • Menu con (cấp 2) của Tab Bar có mũi tên chỉ hướng mở: thanh sát đáy mở lên, thanh sát đỉnh mở xuống. Thanh dọc chưa có mũi tên này.

Position trên máy tính

Ô Position trong thẻ Display on desktop: chọn Tab Bar nằm ở đâu trên màn hình máy tính.

• Lựa chọn (hình, theo thứ tự trong app): thanh nằm giữa đáy màn hình, kiểu nổi lên (mặc định cho menu mới) và kiểu sát đáy; thanh ở góc dưới bên phải; thanh ở góc dưới bên trái; thanh trải hết chiều ngang ở đáy; thanh trải hết chiều ngang ở đỉnh trang; thanh mảnh dọc ở cạnh phải; thanh mảnh dọc ở cạnh trái.
• Bốn kiểu có nhãn Deprecated: là thanh dọc cao kịch màn hình, ở cạnh trái hoặc phải, từ bản cũ. Chúng vẫn chạy như cũ nhưng đã ngừng dùng, app hiện cảnh báo khi bạn bấm chọn. Bạn nên chọn kiểu khác.
• Mặc định cho menu mới: thanh giữa đáy màn hình.
• Áp cho: chỉ Tab Bar, mọi gói, mọi nền tảng. Ô ẩn khi bỏ chọn Show menu on desktop.
• Đổi ô này thì khách thấy gì: thanh menu dời sang đúng chỗ bạn chọn trên màn hình lớn. Điện thoại và máy tính chọn riêng: bạn có thể để sát đáy trên điện thoại và trải ở đỉnh trên máy tính.

Vị trí Floating Button

Floating Button không dùng hàng hình ở trên. Trong mỗi thẻ Display on mobile và Display on desktop có một khối con riêng gồm ba nút chọn góc và một ô nhập khoảng cách tới đáy. Điện thoại và máy tính chỉnh riêng.

Position on mobile

Bottom-leftGóc dưới tráiBottom-centerBottom-rightBottom spacing16Khoảng cách tới đáy

Điểm chung của cả bốn ô: Áp cho chỉ Floating Button, mọi gói, cả Shopify, Wix và website khác. Các khối này luôn hiện, dù bạn có bỏ chọn Show menu on mobile/desktop hay không. Nút luôn neo ở đáy màn hình, không có chỗ đặt ở đỉnh.

Position on mobile

Chọn nút nằm ở góc nào trên điện thoại.

• Lựa chọn: Bottom-left (góc trái), Bottom-center (giữa), Bottom-right (góc phải).
• Mặc định cho menu mới: Bottom-right.
• Đổi ô này thì khách thấy gì: nút dời sang trái, giữa hoặc phải, cách mép trái hoặc phải 16px. Menu con của nút mở về phía còn trống: nút ở bên trái thì mở sang phải, nút ở giữa hoặc bên phải thì mở sang trái.

Bottom spacing (điện thoại)

Ô Bottom spacing trong khối Position on mobile: khoảng cách từ nút tới đáy màn hình điện thoại.

• Nhập gì: số nguyên, đơn vị px, không âm. Mặc định 16.
• Đổi ô này thì khách thấy gì: số càng lớn, nút càng nằm cao so với đáy. Tăng lên khi đáy màn hình đã có thứ khác (như widget chat hay thanh cookie) để nút không bị che. Để trống cũng được: Navi+ tự dùng 16.

Position on desktop

Giống Position on mobile nhưng cho màn hình máy tính, nằm trong thẻ Display on desktop.

• Lựa chọn: Bottom-left, Bottom-center, Bottom-right.
• Mặc định cho menu mới: Bottom-right.
• Đổi ô này thì khách thấy gì: nút dời trái, giữa hoặc phải trên máy tính, không ảnh hưởng vị trí trên điện thoại.

Bottom spacing (máy tính)

Ô Bottom spacing trong khối Position on desktop: khoảng cách từ nút tới đáy màn hình máy tính.

• Nhập gì: số nguyên, đơn vị px, không âm. Mặc định 16.
• Đổi ô này thì khách thấy gì: nút nằm cao hơn hoặc thấp hơn so với đáy trình duyệt, không ảnh hưởng điện thoại.

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

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

Ô Position dạng hàng hình chỉ có ở Tab Bar. Floating Button dùng Position on mobile/desktop và Bottom spacing. Các loại khác chọn chỗ đặt ở bước publish.

Lỡ chọn kiểu có nhãn Deprecated thì sao?

Kiểu đó vẫn chạy như cũ nhưng không còn được cập nhật. Bạn nên đổi sang kiểu không có nhãn.

Nền tảng khác

Shopify Wix Website khác

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