Cấp 1 là phần menu khách nhìn thấy ngay khi vào shop, trước khi bấm mở bất kỳ mục nào. Bài này hướng dẫn bạn chỉnh chữ, icon, màu nền và kích thước cho phần đó.
Cấp 1 nằm ở đâu trên từng loại menu?
Tùy loại menu bạn dùng, phần cấp 1 sẽ nằm ở vị trí khác nhau. Tất cả mục menu ở cấp 1 đều dùng chung bộ cài đặt trong bài này.
| Loại menu | Phần cấp 1 là |
|---|---|
| Tab Bar | Các tab nằm ở đáy màn hình |
| Mobile Menu | Danh sách mục hiện ra đầu tiên khi mở menu |
| Desktop Mega Menu | Các mục nằm trên thanh menu ở header |
| Mobile Mega Menu | Hàng ô danh mục xếp ngang dưới header |
| Icon Menu | Các ô nằm trong lưới icon |
| Floating Button | Các nút nhỏ bung ra khi bấm vào nút nổi |
Còn các mục bên trong khung mở ra sau khi bấm thuộc cấp 2 và cấp 3. Muốn chỉnh phần đó, bạn xem bài Chỉnh kiểu menu con.
Trước khi bắt đầu
- Mở menu bạn muốn sửa trong Navi+. Nếu muốn đổi toàn bộ tông màu, bạn nên chọn ở thẻ Palette trước rồi mới quay lại đây chỉnh chi tiết từng ô.
- Giao diện chỉnh kiểu chia làm hai phần: Main menu item dùng để chỉnh từng mục cấp 1, còn Main menu container dùng để chỉnh toàn bộ khung menu bên ngoài.
Cách chỉnh kiểu menu chính
-
Trên thanh bước phía trên, bấm Design rồi chọn thẻ Main menu.
DesignPaletteMain menu1Thẻ Main menuSub menuMain menu itemText styleText Color#000000 Text Size (px)12 Text TransformDefault Font WeightDefault Font FamilyRoboto Description ColorInherit (opacity 0.6) Description Size (px)Inherit (70%)Icon/Small-image StyleFont icon color#000000 Gap: Text ↔ Icon (px)2 Icon/Small-image size (px)22Image styleImage curve (px)0 Image ratio (auto-crop)UnchangedEach item spacingPadding (px)Inherit (top right bottom left) Margin (px)Inherit (top right bottom left)Main menu containerLayoutMenu height (px)50 Min height (px)DefaultContainer spacingMarginPaddingTop · Right · Bottom · LeftShadowApply drop shadowBackground (BG)Is TransparentBG Color#FFFFFF BG ImageSelectOthersCurve (px)0 Badge color#FF0000Advanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons -
Ở khối Main menu item, mở phần Text style để chỉnh chữ của mục menu:
- Chỉnh màu chữ ở Text Color, cỡ chữ ở Text Size (px), kiểu chữ hoa hay chữ thường hoặc viết hoa chữ cái đầu ở Text Transform, độ đậm nhạt ở Font Weight và phông chữ lấy từ Google Fonts ở Font Family.
- Chỉnh dòng mô tả nhỏ nằm dưới tên mục bằng Description Color và Description Size (px). Nếu bạn để trống hai ô này, dòng mô tả sẽ tự lấy màu chữ chính làm nhạt đi với cỡ chữ nhỏ hơn.
DesignPaletteMain menuSub menuMain menu itemText styleText Color#000000 Text Size (px)12 Text TransformDefault Font WeightDefault Font FamilyRoboto Description ColorInherit (opacity 0.6) Description Size (px)Inherit (70%) 2Text styleIcon/Small-image StyleFont icon color#000000 Gap: Text ↔ Icon (px)2 Icon/Small-image size (px)22Image styleImage curve (px)0 Image ratio (auto-crop)UnchangedEach item spacingPadding (px)Inherit (top right bottom left) Margin (px)Inherit (top right bottom left)Main menu containerLayoutMenu height (px)50 Min height (px)DefaultContainer spacingMarginPaddingTop · Right · Bottom · LeftShadowApply drop shadowBackground (BG)Is TransparentBG Color#FFFFFF BG ImageSelectOthersCurve (px)0 Badge color#FF0000Advanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons -
Kéo xuống phần Icon/Small-image Style để chỉnh icon và ảnh nhỏ đi kèm mục menu:
- Font icon color chỉ đổi màu cho các icon vẽ sẵn trong thư viện. Ảnh do bạn tự tải lên sẽ giữ nguyên màu gốc.
- Gap: Text – Icon chỉnh khoảng cách giữa chữ và icon.
- Icon/Small-image size (px) chỉnh kích thước chung cho cả icon lẫn ảnh nhỏ.
DesignPaletteMain menuSub menuMain menu itemText styleText Color#000000 Text Size (px)12 Text TransformDefault Font WeightDefault Font FamilyRoboto Description ColorInherit (opacity 0.6) Description Size (px)Inherit (70%)Icon/Small-image StyleFont icon color#000000 Gap: Text ↔ Icon (px)2 Icon/Small-image size (px)22 3Icon/Small-image StyleImage styleImage curve (px)0 Image ratio (auto-crop)UnchangedEach item spacingPadding (px)Inherit (top right bottom left) Margin (px)Inherit (top right bottom left)Main menu containerLayoutMenu height (px)50 Min height (px)DefaultContainer spacingMarginPaddingTop · Right · Bottom · LeftShadowApply drop shadowBackground (BG)Is TransparentBG Color#FFFFFF BG ImageSelectOthersCurve (px)0 Badge color#FF0000Advanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons -
Nếu mục menu có ảnh, bạn chỉnh tiếp ở phần Image style:
- Image curve (px) làm bo góc cho mọi ảnh của mục, không riêng gì icon.
- Image ratio (auto-crop) tự cắt khung ảnh theo tỉ lệ 3:2, 2:3 hoặc 1:1 bằng CSS mà không cần tải ảnh lên lại. Ô này chỉ có tác dụng với mục ảnh lớn và mục banner.
DesignPaletteMain menuSub menuMain menu itemText styleText Color#000000 Text Size (px)12 Text TransformDefault Font WeightDefault Font FamilyRoboto Description ColorInherit (opacity 0.6) Description Size (px)Inherit (70%)Icon/Small-image StyleFont icon color#000000 Gap: Text ↔ Icon (px)2 Icon/Small-image size (px)22Image styleImage curve (px)0 Image ratio (auto-crop)Unchanged 4Image styleEach item spacingPadding (px)Inherit (top right bottom left) Margin (px)Inherit (top right bottom left)Main menu containerLayoutMenu height (px)50 Min height (px)DefaultContainer spacingMarginPaddingTop · Right · Bottom · LeftShadowApply drop shadowBackground (BG)Is TransparentBG Color#FFFFFF BG ImageSelectOthersCurve (px)0 Badge color#FF0000Advanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons -
Ở phần Each item spacing, bạn chỉnh khoảng trống cho từng mục menu. Padding (px) là khoảng trống bên trong mỗi mục, còn Margin (px) là khoảng trống bên ngoài giữa các mục. Bạn nhập bốn số theo thứ tự
trên phải dưới trái. Nếu muốn đặt số đo riêng cho điện thoại và máy tính, bạn viết theo dạng8 | 16— 8 trên điện thoại, 16 trên máy tính.DesignPaletteMain menuSub menuMain menu itemText styleText Color#000000 Text Size (px)12 Text TransformDefault Font WeightDefault Font FamilyRoboto Description ColorInherit (opacity 0.6) Description Size (px)Inherit (70%)Icon/Small-image StyleFont icon color#000000 Gap: Text ↔ Icon (px)2 Icon/Small-image size (px)22Image styleImage curve (px)0 Image ratio (auto-crop)UnchangedEach item spacingPadding (px)Inherit (top right bottom left) Margin (px)Inherit (top right bottom left) 5Each item spacingMain menu containerLayoutMenu height (px)50 Min height (px)DefaultContainer spacingMarginPaddingTop · Right · Bottom · LeftShadowApply drop shadowBackground (BG)Is TransparentBG Color#FFFFFF BG ImageSelectOthersCurve (px)0 Badge color#FF0000Advanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons -
Kéo xuống khối Main menu container để chỉnh khung bao quanh cả thanh menu:
- Layout: nhập Menu height để đặt chiều cao cố định tính bằng px, hoặc nhập Min height để đặt chiều cao tối thiểu cho thanh menu.
- Container spacing: chỉnh khoảng cách ngoài là margin và khoảng đệm trong là padding của cả thanh menu. Hình minh họa ngay trong ô sẽ chỉ rõ mỗi con số đẩy cạnh nào.
- Shadow: bật Apply drop shadow để thêm bóng đổ cho khung menu.
- Background (BG): bật Is Transparent nếu muốn bỏ nền; riêng Mobile Menu không có nút này. Khi bật trong suốt, màu và ảnh nền bạn đã đặt vẫn được giữ lại và sẽ hiện ra lại khi bạn tắt công tắc. Ở ô BG Color, bạn chọn màu nền và kéo thanh trong suốt trong bảng màu nếu muốn làm nền mờ. Bấm BG Image nếu muốn mở thư viện chọn ảnh nền.
- Others: nhập Curve để bo góc cả khung menu, và chọn Badge color để đổi màu nền cho nhãn badge gắn trên mục menu.
DesignPaletteMain menuSub menuMain menu itemText styleText Color#000000 Text Size (px)12 Text TransformDefault Font WeightDefault Font FamilyRoboto Description ColorInherit (opacity 0.6) Description Size (px)Inherit (70%)Icon/Small-image StyleFont icon color#000000 Gap: Text ↔ Icon (px)2 Icon/Small-image size (px)22Image styleImage curve (px)0 Image ratio (auto-crop)UnchangedEach item spacingPadding (px)Inherit (top right bottom left) Margin (px)Inherit (top right bottom left)Main menu containerLayoutMenu height (px)50 Min height (px)DefaultContainer spacingMarginPaddingTop · Right · Bottom · LeftShadowApply drop shadowBackground (BG)Is TransparentBG Color#FFFFFF BG ImageSelectOthersCurve (px)0 Badge color#FF00006Khung menuAdvanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons -
Bấm Save ở góc trên để lưu menu, rồi mở trang cửa hàng của bạn lên xem thực tế.
Ô nào chỉ có ở một số loại menu?
Nếu tìm không thấy một ô nào đó trong bài hướng dẫn này, có thể loại menu bạn đang mở không dùng tới cài đặt đó.
| Ô cài đặt | Loại menu có | Lý do |
|---|---|---|
| Menu height | Mọi loại trừ Mobile Menu | Mobile Menu là khung trượt dọc luôn cao bằng màn hình |
| Min height | Mọi loại trừ Mobile Menu và Icon Menu | Các ô của Icon Menu tự co giãn theo nội dung bên trong |
| Hide all texts | Tab Bar, Floating Button | Dùng để ẩn hết chữ, chỉ hiện mỗi icon |
| Small-image size | Icon Menu | Dùng để chỉnh riêng cỡ ảnh nằm trong các ô lưới |
| Thẻ Sub menu | Mọi loại trừ Icon Menu | Icon Menu chỉ có một cấp, không có menu con |
Các cài đặt khác của cấp 1 nằm ở đâu?
Một số phần hiển thị ngay trên menu cấp 1 nhưng được đặt ở chỗ khác, không nằm trong thẻ Main menu:
- Mũi tên mở rộng, nút đóng, hiệu ứng đóng mở và lớp hiển thị z-index: nằm ở bước Configure, bạn xem bài Mũi tên, nút đóng và hiệu ứng mở menu.
- Vị trí menu trên màn hình và khoảng cách lề: bạn xem bài Vị trí và khoảng cách lề của menu.
- Chỉnh riêng một mục mà không làm đổi cả menu: bạn mở form sửa mục đó và chỉnh trong phần CSS của mục.
Câu hỏi thường gặp
Sao tôi chỉnh độ mờ cho nền mà không thấy đổi?
Ô chỉnh độ mờ nền kiểu cũ là BG opacity đã ngừng dùng. Bạn hãy mở BG Color, kéo thanh độ trong suốt alpha ngay trong bảng chọn màu, hoặc nhập mã màu 8 ký tự như #ffffff80. Với các menu cũ còn lưu giá trị độ mờ, app sẽ tự gộp độ mờ đó vào màu nền khi bạn mở menu và lưu lại.
Sao tôi tắt Is Transparent mà màu nền cũ vẫn còn?
Đó là hoạt động bình thường. Công tắc Is Transparent chỉ tạm ẩn lớp nền đi chứ không xóa màu hay ảnh nền bạn đã đặt. Khi bạn tắt công tắc này, nền cũ sẽ hiện trở lại.
Sao tôi đổi Menu height mà thanh menu không đổi chiều cao?
Trước hết bạn kiểm tra lại loại menu, vì Mobile Menu không có ô này. Với các loại menu khác, bạn nhìn lại xem khung xem trước đang hiển thị ở chế độ điện thoại hay máy tính. Nếu ra ngoài cửa hàng mà chiều cao vẫn chưa đổi, bạn xem cách xử lý tại bài Đã sửa menu nhưng cửa hàng chưa đổi.
Sao tôi không thấy nút Hide all texts?
Ô Hide all texts chỉ có ở Tab Bar và Floating Button. Các loại menu khác không có cài đặt này vì ẩn hết chữ sẽ không hợp với bố cục của chúng.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Giống nhau trên mọi nền tảng.
Giống nhau trên mọi nền tảng.