Mỗi mục menu có một nhóm ô nội dung: tên, dòng mô tả, link, hình đại diện và badge. Bài này tra từng ô một. Cách làm từng bước nằm ở bài Gắn link cho mục menu và Icon, ảnh và badge.
Mở các ô này ở đâu?
Bạn vào bước Build Menu, bấm vào một mục trong cây. Cây đổi sang màn Edit item (nút Back để quay lại). Trong màn này:
- Hàng đầu có ô Icon và ô tải ảnh, cách nhau chữ OR.
- Khối Basic info có ô Text, ô Link và (với những mục cho phép) ô Sub text (Optional).
- Add badge nằm trong khối Style: bấm + Customize rồi chọn Badge. Nếu mục đã bật badge, thẻ này tự hiện sẵn.
Mọi ô trong bài này giống nhau trên Shopify, Wix và website khác, trừ chỗ có ghi riêng.
Ô nào dùng cho loại mục nào?
| Ô | Icon + image + text | Big image + text | Group title | Button | Tab | Image banner | Card |
|---|---|---|---|---|---|---|---|
| Text | Có | Có | Có | Có | Có | Không | Có |
| Sub text | Có | Có | Có | Không | Không | Không | Có |
| Link | Có | Có | Không | Có | Có | Có | Có |
| Icon | Có | Không | Không | Có | Có | Không | Có |
| Image | Có | Có | Không | Có | Có | Có | Có |
| Add badge | Có | Không | Không | Có | Có | Không | Không |
Loại mục chọn lúc thêm mục, không đổi được sau đó. Xem các loại ở bài Các loại mục menu.
Ô nhập chữ và link
Text
Ô đầu tiên của khối Basic info, nơi bạn gõ tên mục hiện trên menu.
- Mặc định: để trống. Ô có gợi ý mẫu
E.g: Home. - Áp dụng: cả 6 loại menu, mọi cấp. Dùng cho mục Icon + image + text, Big image + text, Group title, Button, Tab và Card. Mục Image banner không có ô này.
- Gói: mọi gói.
- Trên cửa hàng: tên hiện đúng như bạn gõ. Nếu mục có icon hoặc ảnh mà bạn xóa trống tên, Navi+ tự chuyển mục sang kiểu chỉ hiện hình. Nếu cả tên lẫn hình đều trống, mục không hiện gì.
- Dịch sang ngôn ngữ khác: gõ thêm bản dịch ngay trong ô, theo mẫu
Home <fr: Maison> <de: Startseite>. Biểu tượng quả địa cầu Language cạnh nhãn nhắc cú pháp này. Khách đang xem ngôn ngữ nào thấy chữ của ngôn ngữ đó, ngôn ngữ chưa có bản dịch thấy chữ gốc. Chi tiết ở bài Dịch menu sang nhiều ngôn ngữ.
Sub text (Optional)
Dòng chữ nhỏ nằm ngay dưới tên mục, hợp để ghi hotline, giờ mở cửa hay lời nhắn ngắn như “Gọi 8h–21h”.
- Mặc định: để trống. Gợi ý mẫu:
E.g: Call: 0123..90 | 8AM-7PM. - Áp dụng: mục Icon + image + text, Big image + text, Group title và Card. Mục Button, Tab và Image banner không có ô này.
- Ẩn ở menu cấp 1 dạng thanh: ở cấp 1 của Tab Bar, Floating Button, Mobile Mega Menu và Desktop Mega Menu, vì đó là thanh ngang nên ô này tự ẩn khi mục còn trống. Mục cũ đã có sẵn dòng mô tả vẫn hiện ô để bạn sửa hoặc xóa. Mobile Menu, Icon Menu và các cấp con luôn có ô này.
- Gói: mọi gói.
- Trên cửa hàng: dòng chữ hiện dưới tên mục. Màu và cỡ chữ của dòng này chỉnh chung ở Description Color và Description Size (px), xem bài Chữ và font của mục menu. Nếu mục đang chọn kiểu hiển thị chỉ icon hoặc chỉ ảnh, dòng mô tả không hiện.
- Dịch: cũng dịch được bằng thẻ
< >như ô Text.
Link
Nơi khách tới khi bấm vào mục: một trang, sản phẩm, collection, hoặc một hành động như gọi điện, mở chat, mở menu khác.
- Ở đâu: khối Basic info, ngay dưới ô Text. Gõ hoặc dán thẳng vào ô, hoặc bấm ô để mở cửa sổ Link to: (có các tab Library, Custom, Product, Category, Page, Blog, Menu) rồi bấm UPDATE.
- Mặc định: để trống, nghĩa là mục dẫn về trang chủ.
- Giá trị đặc biệt:
#hoặc Don’t redirect: bấm vào chỉ mở menu con, không chuyển trang.- Thêm
@newở cuối: mở link trong tab mới. tel:,sms:,mailto:,open:…,scroll:…: các hành động, xem bảng tra loại link.
- Áp dụng: cả 6 loại menu. Dùng cho mục Icon + image + text, Big image + text, Button, Tab, Image banner và Card. Group title không có ô Link.
- Gói: mọi gói. Riêng vài nhóm link trong thư viện (Open panels, Open other applications, Change language) cần gói trả phí.
- Trên cửa hàng: bấm mục là khách tới đúng đích. Với trang trong cửa hàng, bạn chỉ cần điền phần đường dẫn ngắn (
collections/sale). - Link riêng từng ngôn ngữ: bấm biểu tượng Language cạnh nhãn Link để điền link riêng cho từng ngôn ngữ, ví dụ khách tiếng Pháp tới
/fr/.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Wix không có collection hay menu Shopify. Bạn nhập đường dẫn bằng tay; riêng Product và Category vẫn chọn được từ cửa hàng Wix.
Website khác không có collection hay menu Shopify. Mọi link nhập tay, đầy đủ https://. Cửa sổ Link to: chỉ còn tab Library.
Auto-clean URL
Công tắc ở đầu cửa sổ Link to: (cửa sổ mở ra khi bạn bấm ô Link). Nó tự cắt link cho gọn khi bạn dán.
- Mặc định: bật.
- Làm gì: khi bạn dán một link đầy đủ
https://…của chính cửa hàng mình, Navi+ chỉ giữ lại phần đường dẫn phía sau tên miền. Ví dụhttps://shop.com/collections/sale?sort=newthànhcollections/sale. Phần sau dấu?hoặc#cũng bị bỏ. App hiện thông báo Link is clean. - Không đụng tới: link của website khác, link
tel:,mailto:… vẫn giữ nguyên. - Áp dụng: mọi loại mục có ô Link, mọi loại menu, mọi gói.
- Đổi ô này thì khách thấy gì? Không thấy gì khác. Công tắc chỉ thay đổi cách link được ghi vào ô. Đây không phải thiết lập của menu: app nhớ lựa chọn trên trình duyệt bạn đang dùng, không lưu cùng menu.
Don’t auto-open popup
Công tắc cạnh Auto-clean URL ở đầu cửa sổ Link to:. Bật thì bấm vào ô Link không tự bật cửa sổ gợi ý nữa.
- Mặc định: tắt, nên mỗi lần bạn bấm vào ô Link, cửa sổ Link to: tự mở.
- Khi bật: bạn gõ thẳng vào ô, muốn xem gợi ý thì bấm biểu tượng cây bút ở cạnh ô Link.
- Áp dụng: mọi loại mục có ô Link, mọi loại menu, mọi gói.
- Đổi ô này thì khách thấy gì? Không thấy gì. Đây chỉ là sở thích làm việc của bạn trong app và được nhớ trên trình duyệt này.
Hình đại diện và badge
Icon
Hình nét vẽ sẵn hiện cạnh hoặc trên tên mục.
- Ở đâu: hàng đầu của màn Edit item, ô bên trái. Bấm vào, gõ tên bằng tiếng Anh như
home,cart,phonerồi chọn. Thùng rác phía trên ô để gỡ icon. - Thư viện: tab Remix có ở mọi gói. Tab Google (Material Symbols, đang thử nghiệm BETA) dành cho gói Business trở lên.
- Mặc định: trống (mục chưa có hình).
- Chọn icon hoặc ảnh, không dùng cả hai: ô Icon và ô ảnh cách nhau chữ OR. Chọn bên này thì bên kia được thay thế.
- Áp dụng: mục Icon + image + text, Button, Tab và Card, trong mọi loại menu. Big image + text, Group title và Image banner không có ô Icon.
- Gói: thư viện Remix mọi gói; thư viện Google từ Business.
- Trên cửa hàng: hình hiện đúng chỗ bạn chọn. Màu và cỡ icon chỉnh chung ở bước Design, xem Icon và ảnh trong menu. Với Tab Bar và Floating Button, mục ở cấp 1 nên có icon hoặc ảnh để thanh hiện đủ nút.
- Cách xếp icon với chữ (trên–dưới hay trái–phải) chỉnh ở Display layout.
Image
Ảnh của mục. Với mục thông thường, ảnh nằm vào đúng chỗ icon nên nhỏ bằng icon; với Big image, Image banner và Card, đây là ảnh lớn.
- Ở đâu: hàng đầu của màn Edit item, ô bên phải. Nút ghi Upload Small-image (as icon) ở mục thông thường, hoặc Upload image ở mục Big image và Image banner. Nhận các đuôi
jpg,png,gif,webp,svg,avif. - Mặc định: trống.
- Áp dụng: mục Icon + image + text, Big image + text, Button, Tab, Image banner và Card, trong mọi loại menu. Group title không có ảnh.
- Giới hạn: ảnh nhỏ tối đa 1 MB, ảnh lớn tối đa 15 MB. App tự thu nhỏ khi tải lên; cỡ cụ thể theo gói ở bài Icon, ảnh và badge. File
svgđược giữ nguyên. - Trên cửa hàng: ảnh thay cho icon. Với Card, ảnh phủ làm nền và chữ nằm đè lên. Tỉ lệ và bo góc của ảnh chỉnh ở khối Image style trong bước Design.
- Gỡ ảnh: bấm thùng rác phía trên ô.
Add badge
Chấm đỏ nhỏ ở góc icon để gây chú ý.
- Ở đâu: khối Style của màn Edit item, bấm + Customize rồi chọn Badge. Tick Add badge.
- Mặc định: tắt.
- Áp dụng: mục Icon + image + text, Button và Tab, mọi loại menu. Big image, Group title, Image banner và Card không có ô này.
- Gói: mọi gói.
- Trên cửa hàng: một chấm đỏ hiện ở góc trên bên phải của icon (hoặc ảnh nhỏ). Mục không có icon hay ảnh thì không có chỗ để gắn chấm. Màu chấm đặt chung cho cả menu ở ô Badge color trong Design › Main menu.
- Đây không phải nhãn chữ như “Sale” hay “New”. Muốn gắn chữ, hãy viết vào tên mục hoặc Sub text.
Show badge (+n) when items are in the cart
Biến chấm đỏ thành con số: số món đang có trong giỏ của khách.
- Ở đâu: ngay dưới Add badge, chỉ hiện khi bạn đã tick Add badge.
- Mặc định: tắt.
- Chỉ có tác dụng khi: Add badge đang bật.
- Áp dụng: mục Icon + image + text, Button và Tab, mọi loại menu.
- Gói: Business trở lên. Gói Starter chỉ dùng được chấm đỏ trơn.
- Trên cửa hàng: badge hiện số món trong giỏ. Khi giỏ trống thì badge ẩn đi. Thường gắn cho mục dẫn tới giỏ hàng (link
cart).