English Tiếng Việt
Xem demo Bắt đầu
Mục menu

Nhóm mục thành tab, thêm banner và card

Nếu menu con của bạn quá dài hoặc bạn muốn đặt ảnh quảng bá như “Bộ sưu tập mới” ngay trong menu, bạn có thể chia mục thành các tab và chèn thêm banner hoặc card.

Trước khi bắt đầu

  • Mở menu trong app Navi+, chuyển sang bước Build Menu.
  • Tab trong bài này là các nút chuyển nhóm mục nằm bên trong menu, khác với Tab Bar là thanh điều hướng cố định dưới đáy màn hình điện thoại.
  • Banner và card không mở ra mục con được. Nếu cần mở tiếp menu con, bạn dùng mục menu thường.

Gom các mục thành tab

Mỗi tab là một nút chuyển nhóm ngay trong menu. Khi khách chạm vào từng tab, danh sách mục bên dưới đổi theo ngay lập tức mà không cần tải lại trang.

  1. Tại vị trí muốn đặt tab, bạn bấm Add item. Nhóm Tabs trong phần Basics chỉ hiện khi bạn thêm vào menu con, cột của Desktop Mega Menu hoặc Icon Menu.

  2. Chọn nhóm Tabs.

  3. Chọn một kiểu tab gồm Underline, Outline, Segmented hoặc Top line. Bấm ＋ Add tab để thêm tab và đặt tên cho từng tab như Nam, Nữ, Giảm giá. Ở mỗi tab, bạn đánh dấu các link muốn đưa vào tại khung Pick links for…, rồi bấm Add.

  4. Trong cây menu, mỗi tab hiện thành một dòng riêng kèm ô số › cho biết tab có bao nhiêu mục. Bấm ô đó để mở xem và sửa các mục của tab. Khi muốn thêm mục cho một tab, bạn mở tab đó rồi bấm + ITEM.

  5. Nếu muốn có các mục chung luôn hiện bên dưới mà không nằm trong tab nào, chẳng hạn mục “Liên hệ”, bạn thêm mục End of tab group vào sau tab cuối cùng. Xong bấm Save.

Dòng đánh dấu tab trong cây menu chỉ dùng để gom nhóm. Ngoài shop, khách chỉ nhìn thấy thanh tên các tab và danh sách mục bên dưới.

Đổi kiểu dáng và màu sắc của nhóm tab

Để chỉnh giao diện cho cả nhóm tab, bạn mở Edit item ở tab đầu tiên trong nhóm. Mọi thay đổi ở đây sẽ áp dụng cho tất cả các tab còn lại.

Mục cài đặt Ý nghĩa
Tab style Kiểu hiển thị nút tab: Underline, Outline, Segmented hoặc Top line.
Display Cách xếp các tab trên hàng: Hug chia đều chiều ngang cho các tab; Spread out đẩy icon và chữ ra hai mép; Left, Center, Right giữ độ rộng tab vừa khít chữ rồi dồn về một phía.
Tab color Màu của tab đang được chọn. Nếu bạn để trống, tab sẽ lấy theo màu chữ chung của cấp menu đó.

Bạn có thể gắn icon hoặc ảnh riêng cho từng tab theo hướng dẫn tại bài Icon, ảnh và nhãn. Khi khách mở menu, tab đầu tiên luôn được mở sẵn. Bạn chỉ nên tạo từ 3 đến 6 tab để hàng tab hiển thị vừa vặn trên màn hình điện thoại.

Lưu ý

Bạn có thể dùng tab trong menu con của Tab Bar, Floating Button, Mobile Menu, Mobile Mega Menu, Desktop Mega Menu và trong Icon Menu. Với Mega Menu, tab rất tiện để chia các danh mục lớn thành từng bảng có nhiều cột. Bạn cũng có thể lồng thêm một nhóm tab thứ hai vào bên trong một tab, nhưng nên giữ cấu trúc gọn để khách khỏi rối mắt.

Thêm banner ảnh quảng bá

Banner là khối ảnh lớn dùng để giới thiệu bộ sưu tập mới hoặc chương trình khuyến mãi. Khách bấm vào banner sẽ mở thẳng đến link bạn đã gắn.

  1. Bấm Add item, tìm đến phần Cards & banners rồi chọn nhóm Banner.

  2. Tải ảnh lên, nhập nội dung chữ và gắn link đích. Tại mục Layout, bạn chọn độ rộng cho banner gồm Full row để chiếm trọn cả hàng, Half row cho nửa hàng hoặc One third cho một phần ba hàng.

  3. Bấm Add, sau đó bấm Save.

Nếu bạn chỉ muốn hiện một tấm ảnh trơn không kèm chữ, hãy chọn mẫu Image banner ngay ở bước Style & content khi thêm mục mới. Loại này chỉ hiển thị ảnh, có thêm ô chỉnh tỉ lệ khung hình và không có tiêu đề, mô tả hay mục con. Vì bạn không thể đổi loại mục trong cửa sổ Edit item sau khi đã tạo, hãy chọn đúng kiểu ngay từ lúc thêm.

Thêm card có chữ đè trên nền ảnh hoặc nền màu

Card là một ô nội dung có nền ảnh hoặc nền màu, phần tiêu đề và mô tả nằm đè lên trên. Khách có thể bấm vào bất kỳ đâu trên ô card để mở link.

Ba kiểu căn dọc của chữ trên card

  1. Bấm Add item, vào phần Cards & banners rồi chọn nhóm Card.

  2. Chọn ảnh nền hoặc màu nền cho card. Nhập tiêu đề vào ô Text, nhập dòng mô tả vào ô Sub text rồi gắn link đích.

  3. Nhập chiều cao mong muốn vào ô Height (px). Nếu bạn không chỉnh, chiều cao mặc định là 200.

  4. Chọn vị trí đặt chữ theo chiều dọc trên card: Top để đẩy chữ lên sát trên, Middle để đặt ở giữa, hoặc Bottom để đặt ở đáy card theo mặc định.

  5. Bấm Save.

Mục dạng card không hỗ trợ đường kẻ phân cách và nhãn.

Mẹo bố trí banner và card đẹp mắt

  • Đặt ở cuối menu con hoặc tách thành một cột riêng trong Desktop Mega Menu: bạn nên chọn kiểu Full row để banner trải rộng hết khung.
  • Xếp nhiều card nằm ngang cùng hàng: đặt hai card chọn Half row hoặc ba card chọn One third nằm liền nhau.
  • Khi xếp các card đứng cạnh nhau, bạn nên đặt cùng một thông số Height (px) để các ô bằng đầu bằng cuối.
  • Chọn ảnh có chiều rộng từ 800 px trở lên và dung lượng khoảng vài trăm KB để ảnh vừa nét vừa tải nhẹ, xem thêm tại bài cỡ ảnh nên dùng.
  • Ưu tiên ảnh có khoảng nền sáng đều hoặc tối đều ở vị trí đặt chữ, sau đó chọn kiểu căn dọc phù hợp để chữ nổi rõ, không bị chìm vào chi tiết ảnh.

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

Vì sao tôi chỉnh kiểu ở tab thứ hai nhưng ngoài shop không đổi?

Navi+ lấy toàn bộ cài đặt kiểu dáng, cách căn hàng và màu sắc từ tab đầu tiên để áp dụng chung cho cả nhóm. Bạn chỉ cần mở Edit item ở tab đầu tiên trong nhóm để chỉnh.

Vì sao tôi không thêm được mục con vào dưới banner hoặc card?

Banner và card là khối ảnh gắn link trực tiếp nên không chứa được mục con. Nếu cần danh sách mục con, bạn hãy tạo bằng mục menu thường rồi đặt banner hoặc card nằm bên cạnh.

Vì sao các mục nằm cuối menu lại bị gộp chung vào tab cuối cùng?

Mọi mục nằm dưới một tab đều được tính là nội dung của tab đó. Để tách các mục chung ra ngoài nhóm tab, bạn bấm Add item và chèn mục End of tab group ngay dưới tab cuối cùng. Các mục nằm dưới dòng này sẽ luôn hiển thị độc lập bên ngoài các tab.

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.