Trong menu của bạn, bấm bước 2 Design ở thanh bước bên trái. Khung Text style nằm ở hai nơi: tab Main menu › Main menu item và tab Sub menu › Sub menu item. Đây là nơi bạn chỉnh màu chữ, cỡ chữ, độ đậm, font và dòng mô tả nhỏ cho các mục menu.
Nếu cần xem cách làm từng bước, bạn mở bài Chỉnh kiểu menu chính. Bài này dùng để tra cứu chức năng của từng ô. Các ô này giống nhau trên Shopify, Wix và website khác.
Chỉnh chữ menu chính (cấp 1)
Bạn bấm bước 2 Design, chọn tab Main menu, rồi kéo xuống khối Text style (dưới nhãn Main menu item). Cấp 1 là những mục khách nhìn thấy đầu tiên trên web, như các tab dưới đáy của Tab Bar, các mục trên thanh header của Desktop Mega Menu, hay danh sách mở ra đầu tiên của Mobile Menu. Cả 6 loại menu đều có phần này.
| Ô trong app | Tác dụng | Mặc định khi tạo menu mới |
|---|---|---|
| Text Color | Đổi màu chữ của mục menu. Bạn bấm vào ô để chọn trên bảng màu hoặc gõ mã #RRGGBB. |
#000000 |
| Text Size (px) | Đổi cỡ chữ tính bằng px. Khi bạn bấm vào ô, app sẽ hiện sẵn các cỡ mẫu để chọn. | 11 với Tab Bar tạo từ mẫu; để trống thì menu hiện 10 |
| Text Transform | Đổi kiểu chữ hoa hoặc thường: Default (inherit) lấy theo theme, None giữ nguyên như lúc gõ, Capitalize viết hoa chữ cái đầu mỗi từ, UPPERCASE in hoa toàn bộ, lowercase viết thường toàn bộ. | Default (inherit) — lấy theo theme |
| Font Weight | Đổi độ đậm của chữ, từ mảnh nhất Thin (100) đến đậm nhất Heavy (900). Trong danh sách xổ xuống, mỗi dòng đều hiển thị đúng độ đậm thật để bạn nhìn và chọn luôn. | Default (inherit) |
| Font Family | Chọn font chữ từ danh sách Google Fonts. Ngay cạnh nhãn có mục Other? dẫn tới hướng dẫn dùng font riêng của shop. | Use Default — font của theme |
| Description Color | Đổi màu cho dòng mô tả nhỏ nằm dưới tên mục. | Để trống: tự lấy màu chữ chính nhưng làm nhạt đi ở độ mờ 0,6 |
| Description Size (px) | Đổi cỡ chữ của dòng mô tả nhỏ. | Để trống: tự tính bằng 70% cỡ chữ chính |
Một vài trường hợp bạn hay cần chỉnh:
- Chữ bị chìm vào nền menu khó đọc: bạn đổi lại Text Color, hoặc đổi nguyên bộ màu bằng Palette.
- Font chữ trên menu lệch tông với chữ của shop: bạn chọn Font Family trùng với font của theme. Nếu font bạn dùng không có trong danh sách, hãy xem bài Tùy chỉnh CSS và font.
- Các mục trên Tab Bar bị chật hoặc tràn chữ: bạn giảm số ở ô Text Size (px).
Dòng mô tả chỉ hiện khi mục menu có Sub text (Optional). Cách thêm xem bài Icon, ảnh và badge.
Màu chữ (Text Color)
Ở đâu, để làm gì: bước 2 Design › tab Main menu › Text style › Text Color. Ô này đổi màu tên của các mục cấp 1.
Cách chọn: bấm vào ô để chọn trên bảng màu, hoặc gõ mã #RRGGBB. Mặc định #000000 (đen); menu tạo từ mẫu thì theo màu của mẫu.
Áp cho: cả 6 loại menu, chỉ mục cấp 1, trên Shopify, Wix và website khác. Không cần gói trả phí.
Khách thấy gì: tên mục, dòng mô tả nhỏ bên dưới (nếu bạn chưa chọn màu riêng ở Description Color) và mũi tên cạnh mục cha đổi theo màu này; mũi tên là cùng màu nhưng nhạt hơn. Mục nào bạn đã đặt màu chữ riêng trong form Edit item thì giữ màu riêng đó, không đổi theo ô này.
Cỡ chữ (Text Size)
Ở đâu, để làm gì: bước 2 Design › tab Main menu › Text style › Text Size (px). Ô này đổi cỡ chữ tên mục cấp 1, tính bằng px.
Cách chọn: gõ số, hoặc bấm vào ô rồi chọn một cỡ mẫu. Tab Bar tạo từ mẫu thường đặt sẵn 11. Nếu bạn xoá trống ô, menu tự dùng 10px.
Áp cho: cả 6 loại menu, chỉ mục cấp 1, mọi nền tảng. Không cần gói trả phí.
Khách thấy gì: chữ tên mục to hơn hoặc nhỏ hơn. Tab Bar bị chật hay chữ tràn thì giảm số này. Cỡ chữ của mục cấp 2–3 chỉnh riêng ở Text Size cấp 2–3; dòng mô tả nhỏ có ô riêng, xem Description Size.
Kiểu chữ hoa, thường (Text Transform)
Ở đâu, để làm gì: bước 2 Design › tab Main menu › Text style › Text Transform. Ô này đổi cách viết hoa tên mục cấp 1, bạn không cần gõ lại tên mục.
Lựa chọn: Default (inherit) lấy theo theme (mặc định) · None giữ nguyên như lúc gõ · Capitalize viết hoa chữ cái đầu mỗi từ · UPPERCASE in hoa toàn bộ · lowercase viết thường toàn bộ.
Áp cho: cả 6 loại menu, mục cấp 1, mọi nền tảng. Không cần gói trả phí.
Khách thấy gì: ví dụ tên mục bạn gõ là New arrivals, thì Capitalize hiện New Arrivals, UPPERCASE hiện NEW ARRIVALS, lowercase hiện new arrivals. Chỉ đổi cách hiển thị, tên gốc trong menu không đổi. Ô này chỉ tác động lên tên mục, không đụng tới dòng mô tả nhỏ.
Độ đậm chữ (Font Weight)
Ở đâu, để làm gì: bước 2 Design › tab Main menu › Text style › Font Weight. Ô này đổi độ đậm của tên mục cấp 1.
Lựa chọn: danh sách xổ xuống từ Thin (100) tới Heavy (900), mỗi dòng hiện đúng độ đậm thật. Mặc định Default (inherit): để theme và font tự quyết.
Áp cho: cả 6 loại menu, mục cấp 1, mọi nền tảng. Không cần gói trả phí.
Khách thấy gì: chữ tên mục mảnh hơn hoặc đậm hơn. Nếu bạn đã chọn một font Google ở ô Font Family, app chỉ tải đúng độ đậm bạn chọn để trang không bị nặng thêm. Font nào thiếu độ đậm bạn chọn thì trình duyệt tự dùng độ đậm gần nhất có sẵn.
Font chữ (Font Family)
Ở đâu, để làm gì: bước 2 Design › tab Main menu › Text style › Font Family. Ô này đổi font chữ cho cả menu. Cạnh nhãn có liên kết Other? dẫn tới hướng dẫn dùng font riêng của shop (xem thêm Tùy chỉnh CSS và font).
Lựa chọn: Use Default để menu dùng font của theme (menu tạo từ mẫu thường để vậy), hoặc chọn một font trong danh sách Google Fonts.
Áp cho: cả 6 loại menu, mọi nền tảng. Không cần gói trả phí. Font chọn ở đây là font chung của cả menu: cấp 2–3 dùng theo, trừ khi bạn chọn font riêng ở Font Family cấp 2–3.
Khách thấy gì: tên mục và dòng mô tả trong menu đổi sang font mới. Chọn Use Default thì app không tải thêm font nào.
Màu dòng mô tả (Description Color)
Ở đâu, để làm gì: bước 2 Design › tab Main menu › Text style › Description Color. Ô này đổi màu dòng mô tả nhỏ (Sub text) nằm dưới tên mục cấp 1.
Cách chọn: chọn trên bảng màu hoặc gõ mã #RRGGBB. Để trống (ô hiện Inherit (opacity 0.6)): dòng mô tả lấy màu chữ chính nhưng nhạt hơn, độ mờ 0,6.
Áp cho: cả 6 loại menu, mục cấp 1, mọi nền tảng. Không cần gói trả phí. Ô chỉ có tác dụng với mục đã nhập Sub text (Optional), cách nhập xem Icon, ảnh và badge.
Khách thấy gì: khi bạn chọn màu, dòng mô tả đổi đúng màu đó và không còn bị làm mờ nữa.
Cỡ chữ dòng mô tả (Description Size)
Ở đâu, để làm gì: bước 2 Design › tab Main menu › Text style › Description Size (px). Ô này đổi cỡ chữ dòng mô tả nhỏ dưới tên mục cấp 1.
Cách chọn: gõ số px hoặc chọn một cỡ mẫu. Để trống (ô hiện Inherit (70%)): dòng mô tả bằng khoảng 70% cỡ chữ chính.
Áp cho: cả 6 loại menu, mục cấp 1, mọi nền tảng. Không cần gói trả phí; chỉ có tác dụng với mục có Sub text (Optional).
Khách thấy gì: dòng mô tả to hơn hoặc nhỏ hơn, tên mục không đổi.
Chỉnh chữ menu con (cấp 2–3)
Bạn bấm bước 2 Design, chọn tab Sub menu, rồi kéo xuống khối Text style (dưới nhãn Sub menu item). Cấp 2–3 là những mục nằm trong khung mở ra sau khi khách bấm vào một mục cấp 1. Phần này có ở Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu và Mobile Mega Menu. Riêng Icon Menu không có tab Sub menu.
Các ô ở đây giống hệt cấp 1, chỉ khác khi bạn để trống: ô nào bỏ trống sẽ tự lấy theo thiết lập của menu chính.
| Ô trong app | Mặc định khi tạo menu mới |
|---|---|
| Text Color | #434343 |
| Text Size (px) | Để trống: Default: 14px |
| Text Transform | Inherit (main menu) — lấy theo cấp 1 |
| Font Weight | Inherit (main menu) — lấy theo cấp 1 |
| Font Family | Để trống — tự lấy theo cấp 1 |
| Description Color | Để trống: lấy màu chữ menu con, độ mờ 0,6 |
| Description Size (px) | Để trống: khoảng 80% cỡ chữ tên mục menu con |
Khi nào bạn nên chỉnh phần này? Khi bạn muốn chữ ở menu con nhỏ và nhạt màu hơn menu chính để khách nhìn vào phân biệt được ngay hai cấp. Còn nếu muốn chữ ở menu con giống hệt cấp 1, bạn cứ để trống các ô.
Màu chữ cấp 2–3 (Text Color)
Ở đâu, để làm gì: bước 2 Design › tab Sub menu › Text style › Text Color. Ô này đổi màu chữ của các mục nằm trong khung menu con.
Cách chọn: chọn trên bảng màu hoặc gõ #RRGGBB. Mặc định #434343 (xám đậm).
Áp cho: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu và Mobile Mega Menu; mục cấp 2–3; mọi nền tảng. Icon Menu không có ô này. Không cần gói trả phí.
Khách thấy gì: tên mục, dòng mô tả (nếu chưa chọn màu riêng) và các liên kết trong khung menu con đổi màu; nút đóng × của khung con cũng đổi theo. Màu của mục cấp 1 không bị ảnh hưởng.
Cỡ chữ cấp 2–3 (Text Size)
Ở đâu, để làm gì: bước 2 Design › tab Sub menu › Text style › Text Size (px). Ô này đổi cỡ chữ tên mục cấp 2–3.
Cách chọn: gõ số px hoặc chọn một cỡ mẫu. Để trống, ô hiện Default: 14px và menu dùng 14px. Lưu ý: ô trống không lấy theo cỡ chữ cấp 1, mà luôn là 14px.
Áp cho: 5 loại menu có menu con (không có Icon Menu); mục cấp 2–3; mọi nền tảng. Không cần gói trả phí.
Khách thấy gì: chữ trong khung menu con to hơn hoặc nhỏ hơn. Nếu bạn không đặt cỡ riêng cho dòng mô tả, dòng mô tả cấp 2–3 tự co giãn theo, bằng khoảng 80% cỡ chữ tên mục.
Kiểu chữ hoa, thường cấp 2–3 (Text Transform)
Ở đâu, để làm gì: bước 2 Design › tab Sub menu › Text style › Text Transform. Ô này đổi cách viết hoa tên mục cấp 2–3.
Lựa chọn: Inherit (main menu) lấy giống cấp 1 (mặc định) · None · Capitalize · UPPERCASE · lowercase. Ý nghĩa từng lựa chọn giống ô của cấp 1.
Áp cho: 5 loại menu có menu con (không có Icon Menu); mục cấp 2–3; mọi nền tảng. Không cần gói trả phí.
Khách thấy gì: nếu cấp 1 đang IN HOA mà bạn muốn menu con viết bình thường, chọn None ở đây. Để Inherit, menu con sẽ in hoa giống cấp 1.
Độ đậm chữ cấp 2–3 (Font Weight)
Ở đâu, để làm gì: bước 2 Design › tab Sub menu › Text style › Font Weight. Ô này đổi độ đậm tên mục cấp 2–3.
Lựa chọn: từ Thin (100) tới Heavy (900). Mặc định Inherit (main menu): lấy giống độ đậm cấp 1.
Áp cho: 5 loại menu có menu con (không có Icon Menu); mục cấp 2–3; mọi nền tảng. Không cần gói trả phí.
Khách thấy gì: chữ trong menu con đậm hoặc mảnh theo lựa chọn. Muốn menu con nhẹ hơn cấp 1 để dễ phân biệt hai cấp, chọn độ đậm thấp hơn ở đây.
Font chữ cấp 2–3 (Font Family)
Ở đâu, để làm gì: bước 2 Design › tab Sub menu › Text style › Font Family. Ô này đặt font riêng cho mục cấp 2–3.
Lựa chọn: để trống thì menu con dùng cùng font với cấp 1 (mặc định). Chọn một font Google Fonts nếu muốn menu con khác font; Use Default là dùng font của theme.
Áp cho: 5 loại menu có menu con (không có Icon Menu); mục cấp 2–3; mọi nền tảng. Không cần gói trả phí.
Khách thấy gì: chỉ chữ trong khung menu con đổi font; mục cấp 1 giữ font cũ.
Màu dòng mô tả cấp 2–3 (Description Color)
Ở đâu, để làm gì: bước 2 Design › tab Sub menu › Text style › Description Color. Ô này đổi màu dòng mô tả nhỏ của mục cấp 2–3.
Cách chọn: chọn trên bảng màu hoặc gõ #RRGGBB. Để trống (ô hiện Inherit (opacity 0.6)): dòng mô tả lấy màu chữ menu con nhưng nhạt hơn, độ mờ 0,6.
Áp cho: 5 loại menu có menu con (không có Icon Menu); mục cấp 2–3 đã nhập Sub text (Optional); mọi nền tảng. Không cần gói trả phí.
Khách thấy gì: dòng mô tả trong menu con đổi đúng màu bạn chọn và không còn bị làm mờ.
Cỡ chữ dòng mô tả cấp 2–3 (Description Size)
Ở đâu, để làm gì: bước 2 Design › tab Sub menu › Text style › Description Size (px). Ô này đổi cỡ chữ dòng mô tả của mục cấp 2–3.
Cách chọn: gõ số px hoặc chọn một cỡ mẫu. Để trống thì dòng mô tả tự tính theo cỡ chữ tên mục (khoảng 80%).
Áp cho: 5 loại menu có menu con (không có Icon Menu); mục cấp 2–3 có Sub text (Optional); mọi nền tảng. Không cần gói trả phí.
Khách thấy gì: dòng mô tả trong menu con to hơn hoặc nhỏ hơn, tên mục không đổi.
So sánh mặc định giữa cấp 1 và cấp 2–3
| Ô | Cấp 1 | Cấp 2–3 |
|---|---|---|
| Text Color | #000000 |
#434343 |
| Text Size (px) | 11 (Tab Bar mẫu); để trống: 10 | Để trống: 14 |
| Text Transform | Default (inherit) | Inherit (main menu) |
| Font Weight | Default (inherit) | Inherit (main menu) |
| Font Family | Use Default | Để trống — lấy theo cấp 1 |
| Description Color | Để trống — màu chữ mờ 0,6 | Để trống — màu chữ mờ 0,6 |
| Description Size (px) | Để trống — 70% cỡ chữ | Để trống — 80% cỡ chữ |
Nếu bạn tạo menu từ mẫu có sẵn, một số ô có thể đã được đặt sẵn thông số khác với bảng mặc định ở trên.