Trong bước Design, khi mở thẻ Main menu hoặc Sub menu, bạn sẽ thấy hai khối Icon/Small-image Style và Image style. Đây là nơi chỉnh giao diện chung cho phần hình của mục menu: icon vẽ sẵn, ảnh nhỏ dùng làm icon và ảnh lớn.
Nếu bạn muốn gắn icon hoặc tải ảnh lên cho từng mục menu, hãy xem bài Icon, ảnh và badge. Bài này giúp bạn tra các ô chỉnh chung cho toàn bộ menu.
Các ô cài đặt này giống nhau trên Shopify, Wix và các website khác.
Chỉnh icon và ảnh ở menu chính (cấp 1)
Bạn vào thẻ Main menu › Main menu item, kéo xuống Icon/Small-image Style và Image style. Cả 6 loại menu đều có hai khối này.
Khối Icon/Small-image Style
| Ô trong app | Làm gì | Mặc định (menu mới) |
|---|---|---|
| Font icon color | Đổi màu cho icon vẽ sẵn trong thư viện của Navi+. Ảnh bạn tự tải lên vẫn giữ nguyên màu gốc. | #000000 |
| Gap: Text ↔ Icon (px) | Khoảng cách giữa chữ và icon. | 2 |
| Icon/Small-image size (px) | Kích thước chung cho cả icon lẫn ảnh nhỏ. Bấm vào ô sẽ hiện các cỡ mẫu từ 16 đến 56 để bạn chọn. | 22 |
Khối Image style
| Ô trong app | Làm gì | Mặc định (menu mới) |
|---|---|---|
| Image curve (px) | Bo góc cho mọi ảnh của mục menu, gồm cả ảnh lớn lẫn ảnh nhỏ dùng làm icon. Bấm vào ô để chọn mẫu: 0 là vuông góc, 500 là tròn hẳn. |
0 (Icon Menu mới tạo: 8) |
| Image ratio (auto-crop) | Tự cắt khung ảnh theo tỉ lệ bằng CSS mà không cần tải ảnh lên lại, áp dụng được cho cả ảnh đã có. Chọn 1 trong 4 khung: Unchanged để giữ nguyên, hoặc 3:2, 2:3, 1:1. | Unchanged |
| Small-image size (px) | Kích thước riêng cho ảnh nhỏ dùng làm icon. Bạn gõ một số cho mọi màn hình, hoặc gõ hai số cách nhau bằng dấu gạch đứng như 42 | 60 để trên điện thoại hiện 42px, trên máy tính hiện 60px. Nếu để trống, ảnh sẽ lấy cỡ theo ô Icon/Small-image size. | 42 (điện thoại), 60 (máy tính) |
Image ratio chỉ cắt mục ảnh lớn (Big image) và mục banner, không đụng tới icon hay ảnh nhỏ. Small-image size chỉ có ở Icon Menu.
Khi nào bạn nên chỉnh các ô này:
- Icon trông quá nhỏ hoặc quá to so với chữ: chỉnh ô Icon/Small-image size (px).
- Chữ bị dính sát vào icon: tăng số ở ô Gap: Text ↔ Icon (px).
- Ảnh giữa các mục menu cao thấp lệch nhau: chọn một tỉ lệ ở Image ratio (auto-crop) để mọi ảnh về cùng một khung.
- Muốn ảnh bo góc mềm mại hơn: tăng số ở ô Image curve (px).
Chỉnh icon và ảnh ở menu con (cấp 2–3)
Bạn vào thẻ Sub menu › Sub menu item, kéo xuống Icon/Small-image Style và Image style. Mục này có ở Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu và Mobile Mega Menu. Riêng Icon Menu không có thẻ Sub menu.
Các ô ở đây giống menu cấp 1, chỉ không có ô Small-image size. Ô nào bạn để trống thì menu con sẽ tự lấy theo cài đặt của menu chính.
| Ô trong app | Mặc định (menu mới) |
|---|---|
| Font icon color | #434343 |
| Gap: Text ↔ Icon (px) | Để trống: Inherit (main menu) — lấy theo menu chính |
| Icon/Small-image size (px) | Để trống: Inherit (main menu) — lấy theo menu chính |
| Image curve (px) | Để trống: Inherit (main menu) — lấy theo menu chính |
| Image ratio (auto-crop) | Inherit — thêm lựa chọn lấy theo cấp 1, bên cạnh Unchanged, 3:2, 2:3, 1:1 |
Khi nào bạn nên chỉnh: khi muốn icon ở menu con nhỏ hơn menu chính, hoặc muốn ảnh trong menu con cắt theo tỉ lệ khác. Nếu muốn giống cấp 1 thì bạn cứ để trống.
Chi tiết từng ô ở menu chính (cấp 1)
Mỗi mục dưới đây khớp với một ô trong tab Main menu. Đường đi chung: bước Design (số 2 trên thanh bước bên trái) › tab Main menu › kéo xuống khối chứa ô đó.
Font icon color
Ở đâu: Design › Main menu › Icon/Small-image Style, ô đầu tiên. Dùng để đổi màu icon vẽ sẵn của các mục cấp 1.
- Giá trị: một màu (gõ mã
#RRGGBBhoặc bấm ô màu). Mặc định#000000. - Áp cho: cả 6 loại menu; chỉ cấp 1 (cấp 2–3 có ô riêng, xem bên dưới). Không cần gói nào, không phụ thuộc ô khác.
- Khách thấy gì: icon dạng chữ của thư viện Navi+ đổi sang màu bạn chọn. Ảnh bạn tự tải lên giữ nguyên màu gốc. Ở Mobile Menu, nút đóng (×) cũng đổi theo màu này.
Gap: Text ↔ Icon (px)
Ở đâu: Design › Main menu › Icon/Small-image Style, ô bên phải ô màu. Dùng để tăng giảm khoảng cách giữa icon (hoặc ảnh nhỏ) và chữ của mục cấp 1.
- Giá trị: một số, đơn vị px. Mặc định cho menu mới:
0ở Tab Bar; để trống ở các loại khác (hiển thị như 2px). Số âm kéo chữ sát lại gần icon hơn. - Áp cho: cả 6 loại menu, cấp 1, các mục có icon hoặc ảnh nhỏ. Không áp cho mục Card, Big image, Group title và Banner.
- Khách thấy gì: số càng lớn thì chữ càng xa icon. Riêng Mobile Menu: nếu bạn nhập
0, cửa hàng vẫn hiện khoảng cách 12px (Navi+ coi0ở loại menu này là chưa chọn); muốn sát hơn thì nhập số nhỏ khác, ví dụ 2.
Icon/Small-image size (px)
Ở đâu: Design › Main menu › Icon/Small-image Style, ô dưới cùng. Dùng để đổi cỡ icon và ảnh nhỏ của mục cấp 1. Bấm vào ô sẽ hiện các cỡ mẫu từ 16 đến 56.
- Giá trị: một số, đơn vị px. Mặc định
22. - Áp cho: cả 6 loại menu. Ô này cũng là cỡ mặc định cho cấp 2–3: nếu ô Icon/Small-image size ở Sub menu để trống, menu con lấy cỡ này.
- Khách thấy gì: icon và ảnh nhỏ to lên hoặc nhỏ đi theo số bạn nhập. Mục nào bạn đã đặt cỡ riêng trong Edit item thì giữ cỡ riêng đó, không đổi theo ô này.
Image curve (px)
Ở đâu: Design › Main menu › khối Image style, ô đầu tiên. Dùng để bo góc ảnh. Bấm vào ô để chọn mẫu: 0 vuông góc, 500 tròn hẳn.
- Giá trị: một số, đơn vị px. Mặc định
0; Icon Menu mới tạo là8. - Áp cho: cả 6 loại menu. Bo góc mọi ảnh của menu (ảnh nhỏ làm icon, ảnh lớn, banner) và cả nền của mục Card. Cấp 2–3 cũng bo theo ô này khi Image curve ở Sub menu để trống.
- Khách thấy gì: góc ảnh mềm hơn khi số tăng. Khung xám giữ chỗ lúc ảnh đang tải cũng bo cùng số này.
Image ratio (auto-crop)
Ở đâu: Design › Main menu › khối Image style, dưới ô Image curve. Dùng để ép các ảnh lớn trong hàng về cùng một khung, khỏi phải cắt ảnh bằng tay.
- Lựa chọn: 4 hình để bấm — Unchanged (giữ nguyên), 3:2 (ngang), 2:3 (dọc), 1:1 (vuông). Mặc định Unchanged, nên menu cũ không đổi gì.
- Áp cho: cả 6 loại menu, nhưng chỉ cho mục Big image và Image Banner. Không đụng tới icon, ảnh nhỏ hay mục Card (Card tự phủ ảnh nền).
- Khách thấy gì: ảnh được cắt gọn theo tỉ lệ, phủ kín khung theo chiều ngang. Ảnh gốc không bị sửa, nên áp được cho cả ảnh đã tải lên từ trước, và đổi lại Unchanged là về như cũ. Khung chờ lúc ảnh đang tải cũng theo tỉ lệ này.
Small-image size (px)
Ở đâu: Design › Main menu › khối Image style, chỉ có ở Icon Menu. Dùng để đặt cỡ riêng cho ảnh nhỏ làm icon.
- Giá trị: một số cho mọi màn hình, hoặc hai số cách nhau dấu gạch đứng, ví dụ
42 | 60= 42px trên điện thoại, 60px trên máy tính. Mặc định cho Icon Menu mới:42 | 60. Để trống thì ảnh lấy theo Icon/Small-image size. - Áp cho: Icon Menu, cấp 1, mọi nền tảng.
- Khách thấy gì: ảnh trong từng ô Icon Menu đổi chiều cao theo số này. Từ màn hình rộng khoảng 769px trở lên, cửa hàng dùng số thứ hai. Mục có cỡ riêng trong Edit item thì giữ cỡ riêng.
Chi tiết từng ô ở menu con (cấp 2–3)
Đường đi chung: bước Design › tab Sub menu › kéo xuống khối Icon/Small-image Style hoặc Image style. Tab này có ở 5 loại menu, trừ Icon Menu. Ô nào để trống thì menu con dùng theo cấp 1, nên nếu muốn giống menu chính bạn chỉ việc để trống.
Font icon color
Ở đâu: Design › Sub menu › Icon/Small-image Style. Đổi màu icon vẽ sẵn của mục cấp 2–3.
- Giá trị: một màu. Mặc định
#434343. - Áp cho: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu, Mobile Mega Menu.
- Khách thấy gì: icon trong menu con đổi màu, tách khỏi màu icon của menu chính. Ảnh tải lên không đổi.
Gap: Text ↔ Icon (px)
Ở đâu: Design › Sub menu › Icon/Small-image Style. Chỉnh khoảng cách giữa icon (hoặc ảnh nhỏ) và chữ ở cấp 2–3.
- Giá trị: một số, đơn vị px. Mặc định để trống (Inherit (main menu)).
- Áp cho: 5 loại menu như trên, mục cấp 2–3.
- Khách thấy gì: khoảng cách icon ↔ chữ trong menu con đổi theo số. Với mục xếp icon trên, chữ dưới ở Tab Bar, Floating Button và 2 loại Mega, số bạn nhập được cộng thêm vào khoảng 4px có sẵn (để trống hoặc
0là 4px, nhập 2 là 6px, nhập -3 là 1px).
Icon/Small-image size (px)
Ở đâu: Design › Sub menu › Icon/Small-image Style. Chỉnh cỡ icon và ảnh nhỏ ở cấp 2–3.
- Giá trị: một số, đơn vị px. Mặc định để trống, lấy theo cấp 1.
- Áp cho: 5 loại menu như trên.
- Khách thấy gì: icon và ảnh nhỏ trong menu con to nhỏ theo số này, độc lập với menu chính. Muốn menu con gọn hơn thì nhập số nhỏ hơn cấp 1.
Image curve (px)
Ở đâu: Design › Sub menu › khối Image style. Bo góc ảnh của cấp 2–3.
- Giá trị: một số, đơn vị px. Mặc định để trống: bo theo Image curve ở cấp 1. Desktop Mega Menu mới tạo có sẵn
8. - Áp cho: 5 loại menu như trên; gồm ảnh nhỏ, ảnh lớn, banner và nền mục Card ở cấp 2–3.
- Khách thấy gì: góc ảnh trong menu con bo theo số này, không còn theo menu chính.
Image ratio (auto-crop)
Ở đâu: Design › Sub menu › khối Image style, dưới ô Image curve. Tự cắt ảnh lớn và banner ở cấp 2–3.
- Lựa chọn: Inherit (theo cấp 1), Unchanged, 3:2, 2:3, 1:1. Mặc định Inherit.
- Áp cho: 5 loại menu như trên; chỉ mục Big image và Image Banner ở cấp 2–3. Không áp cho icon, ảnh nhỏ, Card.
- Khách thấy gì: ảnh trong menu con cắt theo tỉ lệ đã chọn, phủ kín khung. Chọn Inherit thì cắt giống menu chính.
Bảng tra cứu mặc định
| Ô | Cấp 1 | Cấp 2–3 | Loại menu |
|---|---|---|---|
| Font icon color | #000000 |
#434343 |
tất cả |
| Gap: Text ↔ Icon (px) | 2 | theo cấp 1 | tất cả |
| Icon/Small-image size (px) | 22 | theo cấp 1 | tất cả |
| Image curve (px) | 0 | theo cấp 1 | tất cả |
| Image ratio (auto-crop) | Unchanged | Inherit | tất cả |
| Small-image size (px) | 42 / 60 | không có | chỉ Icon Menu |
Nếu bạn tạo menu từ mẫu có sẵn, các ô này có thể đã được đặt sẵn số khác với mặc định ở trên.