Cách chỉnh kích thước menu trong ứng dụng điều hướng: Tab Bar, Mobile Menu và Mega Menu trên Shopify

Quick Answer: How to Adjust Menu Size in a Navigation App

Mở phần cài đặt thiết kế của menu và chỉnh riêng năm thứ: cỡ chữ, chiều cao mục, bề rộng menu hoặc drawer, cỡ icon và khoảng cách quanh vùng chạm. Giữ vùng chạm ít nhất 24 × 24 CSS pixel, kiểm tra trên điện thoại màn hình hẹp, và chỉ dùng CSS tùy chỉnh khi không có cài đặt nào phù hợp.

Để điều chỉnh kích thước menu của cửa hàng mà không cần viết mã tùy biến, hãy thực hiện theo 5 bước sau:

1. Chọn loại menu: Mở ứng dụng điều hướng và chọn kiểu menu bạn muốn chỉnh—chẳng hạn như thanh Tab Bar dưới đáy màn hình, menu ngăn kéo (Drawer) trên di động hoặc Mega Menu cho máy tính.
2. Điều chỉnh cỡ chữ: Thiết lập cỡ chữ riêng biệt cho các liên kết cấp 1 và các danh mục con lồng nhau để tạo phân cấp thị giác rõ ràng.
3. Cân chỉnh chiều cao hàng: Tăng padding hàng hoặc cài đặt chiều cao tối thiểu (min-height) để các liên kết dễ tách bạch khi chạm bằng ngón tay cái.
4. Mở rộng bề rộng và icon: Nới rộng bề rộng ngăn kéo drawer hoặc bảng submenu để các tiêu đề dài hiển thị gọn gàng, sau đó chỉnh cỡ icon tương xứng.
5. Kiểm tra trên điện thoại hẹp: Xem lại menu trên điện thoại thực tế hoặc khung nhìn trình duyệt ở bề rộng 320 CSS pixel để kiểm tra khả năng đọc và độ thoải mái khi chạm.

What “Menu Size” Actually Means: Five Dimensions

Khi nhận thấy menu hiển thị không cân đối trên điện thoại, chủ shop thường tìm kiếm một thanh trượt duy nhất để phóng to hoặc thu nhỏ toàn bộ menu. Tuy nhiên, trong thiết kế web và trải nghiệm di động, “kích thước menu” không phải là một cài đặt đơn lẻ. Đó là sự phối hợp của năm chiều kích thước hình học riêng biệt.

Nếu bạn thay đổi một chiều mà không tinh chỉnh các chiều còn lại, bố cục sẽ nhanh chóng bị vỡ. Ví dụ: việc tăng cỡ chữ mà không mở rộng bề rộng ngăn kéo drawer sẽ khiến các danh mục dài bị cắt cụt hoặc tự xuống dòng lộn xộn. Ngược lại, tăng kích thước icon nhưng giữ nguyên chiều cao thanh sẽ khiến các nút bấm bị chèn ép chật chội.

Trong thiết kế web, các kích thước này được đo bằng CSS pixel (px). Một CSS pixel là đơn vị hiển thị trừu tượng được trình duyệt sử dụng để duy trì tính đồng nhất thị giác. Trên các màn hình điện thoại mật độ điểm ảnh cao, một CSS pixel tương ứng với nhiều pixel vật lý của màn hình. Khi bạn đặt chiều cao hàng là 48px trong ứng dụng, bạn đang xác định kích thước theo CSS pixel.

Nếu bạn cũng cần điều chỉnh màu sắc, kiểu font, hiệu ứng rê chuột hoặc đổ bóng, hãy xem hướng dẫn toàn diện của chúng tôi về cách đổi màu và font chữ menu.

Why Theme Menus Often Look Too Small or Too Big on Mobile

Một điểm băn khoăn thường gặp của các chủ cửa hàng Shopify là việc phân chia nơi quản lý giao diện điều hướng.

Trong trang quản trị Shopify tiêu chuẩn, các liên kết và cấu trúc cây danh mục được sắp xếp trong mục Online Store > Navigation. Tuy nhiên, diện mạo thị giác, kiểu chữ và bố cục thích ứng của menu di động lại được cấu hình hoàn toàn trong Theme Editor chứ không nằm ở phần Navigation (fudge.ai).

Shopify Admin
 ├── Online Store > Navigation  --> Cấu trúc liên kết & URL (Nội dung)
 └── Online Store > Themes
      └── Theme Editor          --> Bố cục header & giao diện thị giác (Hiển thị)

Nhiều theme Shopify không có cài đặt riêng cho kích thước drawer di động hay chiều cao hàng, nên câu trả lời trên các diễn đàn cộng đồng thường là các đoạn CSS. Cài đặt nào có sẵn khác nhau theo từng theme, vì vậy hãy kiểm tra trình chỉnh sửa theme của chính bạn trước.

Ngoài ra, thanh menu ngang trên máy tính có hành vi rất khác so với giao diện cầm tay. Khi các liên kết thu gọn vào biểu tượng hamburger trên điện thoại, cỡ chữ trông vừa vặn trên laptop lại thường trở nên quá bé hoặc to thô kệch trên màn hình điện thoại. Để hiểu rõ các rào cản này, bạn có thể tham khảo bài phân tích về các giới hạn của menu theme Shopify.

Adjust Tab Bar Size: Icon, Label and Bar Height

Thanh Tab Bar cố định dưới đáy màn hình là một trong những mô hình điều hướng tiện lợi nhất cho thương mại di động vì nó đặt các danh mục chính ngay trong vùng với tới tự nhiên của ngón tay cái. Tuy nhiên, nếu thanh này quá mỏng hoặc chật chội, người mua sẽ rất khó bấm chính xác.

Hình 1: Minh hoạ khái niệm (Concept illustration) — Adjust Tab Bar Size: Icon, Label and Bar Height

Khi tinh chỉnh Tab Bar trong ứng dụng điều hướng, bạn cần cân bằng ba cài đặt chính:

1. Cỡ icon: Biểu tượng đồ họa đại diện cho từng phần (như Trang chủ, Sản phẩm, Tìm kiếm, Giỏ hàng), được chỉnh qua cài đặt kích thước biểu tượng icon.
2. Cỡ chữ của nhãn: Tiêu đề ngắn gọn đặt ngay bên dưới hoặc cạnh biểu tượng.
3. Chiều cao thanh (Bar height): Tổng chiều cao của thanh neo cố định ở đáy màn hình.

Khi bạn tăng kích thước icon để biểu tượng rõ ràng hơn, bạn bắt buộc phải tăng chiều cao tổng thể của thanh. Nếu bạn phóng to biểu tượng nhưng giữ nguyên chiều cao thanh, các icon và chữ sẽ bị chèn ép sát mép trên và mép dưới.

Hãy giữ nhãn chữ thật ngắn gọn—lý tưởng nhất là 1 từ ngắn như “Shop”, “Tìm”, hoặc “Giỏ”. Nếu nhãn quá dài, chữ sẽ bị cắt cụt bằng dấu chấm lửng hoặc lấn sang tab lân cận. Mỗi tab cần có một vùng chạm rộng rãi để người mua duyệt sắm thoải mái bằng một tay. Để tìm hiểu thêm về công thái học ngón tay cái, hãy xem bài viết về thanh tab bar và điều hướng thân thiện với ngón tay cái.

Adjust Mobile Menu (Drawer) Size: Text, Row Spacing and Width

Menu ngăn kéo trượt (Drawer) là kiểu điều hướng phổ biến nhất trên di động. Vì cấu trúc này sắp xếp các liên kết theo danh sách dọc, việc căn chỉnh kích thước đòi hỏi sự cân đối giữa phân cấp chữ, khoảng cách hàng và bề rộng khung chứa.

1. Cỡ chữ phân cấp theo từng tầng

Tránh dùng một cỡ chữ duy nhất cho toàn bộ menu. Các danh mục chính cấp 1 cần có chữ lớn hơn và đậm hơn để định hướng tầm nhìn. Các danh mục con cấp 2 và cấp 3 nên có kích thước chữ nhỏ hơn một bậc kèm độ thụt lề thích hợp để thể hiện rõ mối quan hệ cha-con.

2. Khoảng cách hàng thông qua Min Height và Padding

Khi các liên kết đặt quá sát nhau theo chiều dọc, người dùng rất dễ bấm nhầm vào mục bên cạnh. Trong ứng dụng điều hướng, hãy sử dụng cài đặt Min Height (chiều cao tối thiểu của hàng) hoặc Item Padding dọc. Cài đặt chiều cao hàng tối thiểu giúp mỗi liên kết có khoảng thở rộng rãi ngay cả khi nhãn chỉ có một từ ngắn.

3. Bề rộng ngăn kéo Drawer

Độ rộng của drawer xác định tỷ lệ diện tích màn hình mà menu che phủ khi mở ra. Nếu drawer quá hẹp, các tên danh mục dài sẽ bị bẻ thành 2 hoặc 3 dòng, gây mất thẩm mỹ.

Khi bạn tăng cỡ chữ, hãy nới rộng drawer tương ứng để các tên bộ sưu tập dài nằm gọn trên một dòng. Luôn kiểm tra giao diện drawer trên màn hình có bề rộng 320 CSS pixel (W3C Reflow). Để nắm vững cấu trúc ngăn kéo trượt, hãy xem thêm hướng dẫn về thực hành tốt nhất cho mobile drawer menu.

Adjust Mega Menu Size on Desktop and Mobile: Columns, Headings, Images

Trên máy tính để bàn, Mega Menu giúp hiển thị danh mục sản phẩm lớn qua các bảng thả xuống chia cột. Việc tinh chỉnh kích thước đòi hỏi quản lý bề rộng bảng, khoảng cách cột và kích thước hình ảnh.

Độ rộng Submenu một cột so với bảng Mega nhiều cột

Ứng dụng điều hướng thường phân tách rõ ràng giữa menu thả xuống đơn và bảng mega menu:

• Submenu một cột: Đối với danh sách thả xuống dạng cột đơn, dùng Submenu Width để chỉ định độ rộng của bảng (cài đặt độ rộng submenu). Điều này ngăn bảng bị co rúm quanh chữ ngắn hoặc nở rộng quá mức.
• Bảng mở rộng đa cột (Full-expand): Với các mega menu trải rộng gồm nhiều cột ngành hàng, bạn có thể chỉnh độ rộng toàn phần để các cột có khoảng đệm giữa các hàng thoáng đãng.

Kích thước Mega Menu
 ├── Độ rộng Submenu (Bảng thả xuống 1 cột)
 ├── Độ rộng Full-Expand (Bố cục danh mục đa cột)
 ├── Tiêu đề cột (Tỷ lệ phân cấp rõ ràng trên liên kết con)
 └── Hình ảnh danh mục (Khống chế kích thước tránh tràn bố cục)

Phân cấp giữa tiêu đề cột và liên kết con

Trong bố cục nhiều cột, tiêu đề cột đóng vai trò chỉ mục. Hãy làm cho tiêu đề cột lớn hơn và nổi bật hơn hẳn so với các liên kết con bên dưới. Nếu liên kết con có cùng kích cỡ với tiêu đề, menu sẽ trông rối mắt và khó quét nhanh.

Kiểm soát kích thước hình ảnh danh mục

Nhiều mega menu chèn thêm thẻ banner quảng cáo hoặc ảnh sản phẩm tiêu biểu. Hình ảnh chiếm rất nhiều diện tích ngang. Nếu mega menu bị chật, hãy thu nhỏ và khống chế chiều rộng của hình ảnh trước khi quyết định kéo giãn toàn bộ khung menu vượt quá màn hình.

Màn hình di động hẹp hơn nhiều so với bảng trên máy tính, vì vậy hãy kiểm tra riêng phiên bản mobile của mega menu thay vì mặc định kích thước trên desktop cũng áp dụng được.

Pick a Size That Works for Thumbs: Tap Targets and Readability

Khi chọn kích thước cho menu, đừng đoán mò theo cảm tính thị giác. Các tiêu chuẩn tiếp cận web và nghiên cứu công thái học đã cung cấp các mốc đo lường rõ ràng cho vùng chạm và độ đọc.

Theo Hướng dẫn Tiếp cận Nội dung Web của W3C (WCAG 2.2), Tiêu chuẩn Thành công 2.5.8 (Target Size Minimum, Cấp độ AA) yêu cầu đích chạm cho con trỏ phải đạt tối thiểu 24 by 24 CSS pixels, ngoại trừ một số trường hợp ngoại lệ nội dòng hoặc khoảng cách bù trừ (W3C Target Size Minimum).

Để đạt mức độ tiện lợi cao hơn trên màn hình cảm ứng, Tiêu chuẩn 2.5.5 (Target Size Enhanced, Cấp độ AAA) đề xuất đích chạm đạt ít nhất 44 by 44 CSS pixels (W3C Target Size Enhanced). W3C khuyên các nhà thiết kế nên đạt kích thước tối thiểu bất kể khoảng cách xung quanh, đặc biệt đối với các nút bấm và liên kết điều hướng quan trọng.

Nghiên cứu từ Nielsen Norman Group cũng chỉ ra rằng kích thước vật lý tối thiểu của một đích chạm nên vào khoảng 1cm by 1cm (0.4in by 0.4in) (NN/g Touch Target Size). Quan trọng hơn, NN/g nhấn mạnh rằng các phần tử tương tác trước hết phải đủ to, rồi sau đó mới tính đến việc giữ đủ khoảng cách (NN/g Touch Target Size). Việc chỉ tăng khoảng trắng quanh một nút quá nhỏ không giải quyết được việc người dùng bấm trượt.

Bên cạnh vùng chạm, khả năng phóng to chữ cũng rất quan trọng. Tiêu chuẩn WCAG 1.4.4 (Resize Text) yêu cầu chữ có thể phóng to tới 200% bằng tính năng của trình duyệt mà không làm mất nội dung hay chức năng (W3C Resize Text). Bạn có thể tìm hiểu thêm trong hướng dẫn khả năng tiếp cận điều hướng.

Test on a narrow screen and at larger text

Để đảm bảo đáp ứng chuẩn tiếp cận, việc kiểm tra trên các màn hình nhỏ là bắt buộc. Theo tiêu chuẩn WCAG 1.4.10 (Reflow), nội dung cuộn dọc phải hoạt động tốt ở bề rộng tương đương 320 CSS pixels mà không đòi hỏi thanh cuộn ngang (W3C Reflow).

Khi kiểm thử menu vừa chỉnh:

• Mở công cụ kiểm tra (Inspect) của trình duyệt và đặt bề rộng màn hình về 320 CSS pixel.
• Mở ngăn kéo mobile drawer và duyệt qua các cấp con để đảm bảo nhãn chữ không bị tràn ngang.
• Thử phóng to chữ hệ thống để kiểm tra xem chữ có giữ được khả năng đọc và vùng chạm có bấm êm tay hay không.

When You Still Need Custom CSS (and How to Test It Safely)

Hầu hết các yêu cầu căn chỉnh kích thước đều có thể xử lý trực tiếp qua giao diện trực quan của ứng dụng menu. Tuy nhiên, nếu theme của bạn áp dụng các quy tắc CSS ghi đè quá mạnh hoặc ứng dụng thiếu cài đặt cho một chi tiết đặc thù, bạn có thể cần dùng đến Custom CSS.

Trước khi can thiệp mã nguồn, bạn cần nắm rõ quy định nền tảng của Shopify:

• Phạm vi áp dụng: Shopify cho phép thêm Custom CSS trong Theme Settings. Các quy tắc CSS toàn theme này sẽ tác động tới toàn bộ các trang trong cửa hàng trực tuyến, ngoại trừ trang Checkout (Shopify Adding Custom CSS).
• Giới hạn ký tự: Shopify giới hạn ô Custom CSS toàn theme ở mức tối đa 1500 ký tự (Shopify Adding Custom CSS). Dán nhiều đoạn mã dài sẽ khiến bạn sớm chạm trần ký tự này.
• Tạo bản sao lưu theme: Shopify khuyên bạn nên nhân bản theme trước khi can thiệp chỉnh sửa mã hoặc CSS (Shopify Duplicating Themes). Bản sao lưu giúp bạn dễ dàng hủy bỏ thay đổi nếu xảy ra lỗi giao diện ngoài ý muốn.
• Tên class phụ thuộc từng theme: Tên class và cấu trúc HTML giữa các theme Shopify (như Dawn, Horizon, Prestige hay Impulse) rất khác nhau. Sao chép bừa bãi mã CSS từ diễn đàn mà không kiểm tra bộ chọn có thể làm hỏng giao diện cửa hàng.

Dưới đây là video hướng dẫn tham khảo về việc chỉnh cỡ chữ menu trong theme Shopify:

Video: Hướng dẫn tham khảo về việc đổi cỡ chữ menu trong theme Shopify bằng mã tùy biến và cài đặt theme.

Troubleshooting: Size Not Changing, Text Cut Off or Wrapping

Khi điều chỉnh kích thước menu, chủ cửa hàng thường gặp ba sự cố phổ biến sau đây. Dưới đây là cách chẩn đoán và khắc phục từng trường hợp:

1. Kích thước đã chỉnh nhưng không đổi ngoài Storefront

• Sửa nhầm cấp danh mục: Kiểm tra xem bạn đang sửa cài đặt của Cấp 1 hay Cấp con 2/3. Việc đổi cỡ chữ Cấp 1 sẽ không tự động áp dụng cho các cấp con nếu chúng có thiết lập riêng.
• Chế độ xem trước thiết bị: Đảm bảo bạn đang chỉnh đúng cấu hình của thiết bị. Một số ứng dụng hỗ trợ giá trị riêng cho di động và máy tính; sửa giá trị máy tính sẽ không làm đổi giao diện điện thoại.
• Bộ nhớ cache trình duyệt: Trình duyệt thường lưu cache stylesheet. Hãy mở cửa sổ ẩn danh để kiểm tra lại giao diện mới nhất.
• CSS của theme đè lên: File CSS của theme có thể chứa các selector có độ ưu tiên cao hơn. Hãy kiểm tra phần tử (Inspect) để xem thuộc tính nào đang bị gạch bỏ.

2. Chữ trong menu bị cắt cụt (Truncation)

Như tài liệu của W3C đã chỉ ra, các từ có thể quá dài so với khoảng không gian ngang hiện có, dẫn đến việc chúng bị cắt cụt (W3C Resize Text).

Nếu nhãn chữ bị mất đuôi ở mép ngăn kéo drawer hoặc submenu:

• Nới rộng khung chứa: Tăng độ rộng của drawer width hoặc submenu width.
• Hạ bớt cỡ chữ: Nếu cỡ chữ đặt quá lớn, hãy giảm bớt 1-2px để vừa vặn với chiều ngang.
• Rút ngắn tên nhãn: Thay thế các tên danh mục quá dài dòng bằng từ ngữ súc tích hơn.

3. Chữ xuống dòng hai hàng so với dấu ba chấm

Theo tài liệu kỹ thuật của MDN Web Docs, để một đoạn chữ bị tràn hiển thị dấu chấm lửng cắt cụt (...), hệ thống bắt buộc phải kết hợp đồng thời text-overflow: ellipsis với overflow: hidden và white-space: nowrap (MDN text-overflow).

Nếu một nhãn chữ tự động xuống dòng thứ hai mà không có dấu ba chấm, đó là hành vi ngắt dòng tự nhiên của trình duyệt. Việc xuống dòng không phải là lỗi—trong nhiều trường hợp, hiển thị chữ trên hai dòng còn tốt hơn việc cắt cụt mất chữ, miễn là chiều cao hàng của bạn đủ rộng để chứa trọn vẹn cả hai dòng chữ.

Hình 3: Minh họa khái niệm — So sánh nhãn menu bị cắt cụt dấu ba chấm trong ngăn kéo hẹp với nhãn nằm gọn trên một dòng khi nới rộng drawer.

Trade-offs: What Resizing Cannot Fix

Việc căn chỉnh kích thước giúp cải thiện độ đọc và tính công thái học, nhưng tinh chỉnh kích thước không thể giải quyết mọi bài toán thiết kế:

• Sự đánh đổi về mật độ thông tin: Chữ to hơn và hàng cao hơn giúp dễ đọc và bấm chuẩn, nhưng lại làm giảm số lượng mục hiển thị trong một khung màn hình. Khách hàng sẽ phải cuộn trang nhiều hơn để tìm danh mục bên dưới.
• Menu phình to không thể cứu bằng cách thu nhỏ chữ: Nếu cửa hàng của bạn nhồi nhét hàng chục bộ sưu tập lộn xộn vào menu, việc cứ thu nhỏ cỡ chữ sẽ không giúp menu dễ dùng hơn. Nó chỉ tạo ra một khối chữ li ti khó đọc. Menu quá tải cần được tái cấu trúc cây thư mục chứ không phải thu nhỏ kích thước.
• Mất bối cảnh trang nền phía sau: Kéo bề rộng drawer ra toàn bộ chiều ngang màn hình giúp chữ dài không bị xuống dòng, nhưng nó lại che khuất hoàn toàn cửa hàng phía sau. Việc chừa lại một dải nền nhỏ giúp khách hàng giữ được cảm giác định hướng trang web.
• Khác biệt giữa máy tính và di động: Kích thước hiển thị cân đối trên màn hình máy tính hiếm khi phù hợp ngay với thao tác chạm ngón tay. Bạn luôn cần kiểm tra riêng biệt trên cả hai dạng thiết bị.

Where Navi+ Fits

Nếu theme Shopify của bạn không có cài đặt riêng cho độ rộng drawer di động hoặc chiều cao thanh Tab Bar, ứng dụng Navi+ Tab Bar & Mega Menu cung cấp các núm điều khiển kích thước trực quan cho Tab Bar, Mobile Menu và Mega Menu.

Các tính năng tùy biến kích thước trong ứng dụng bao gồm:

• Cỡ chữ theo từng tầng: Thiết lập Font Size (tính bằng px) độc lập cho liên kết Cấp 1 và các danh mục con Cấp 2, Cấp 3 (cài đặt thiết kế cấp 1 của Navi+).
• Chiều cao hàng và khoảng đệm: Thiết lập Min Height (px) và điều chỉnh Item Padding dọc cho từng cấp để đảm bảo vùng chạm thoải mái (cài đặt thiết kế cấp 1 của Navi+).
• Kích thước biểu tượng icon: Tùy chỉnh Icon Size (px) cho toàn bộ hệ thống icon ở các cấp menu (cài đặt thiết kế cấp 1 của Navi+).
• Độ rộng Submenu và bảng Mega: Cài đặt Submenu Width cho bảng thả xuống một cột (cài đặt độ rộng submenu) và tùy chỉnh độ rộng mở rộng toàn phần cho mega menu đa cột.
• Kích thước khung chứa chuyên biệt: Cài đặt menu height cho thanh Tab Bar dưới đáy, và chỉnh độ rộng drawer width cho Mobile Menu (cho cả di động và máy tính).
• Cú pháp khoảng cách đáp ứng: Các ô nhập khoảng cách hỗ trợ cú pháp mobile | desktop, cho phép bạn đặt giá trị kích thước khác nhau cho điện thoại và máy tính trong cùng một ô cấu hình.
• Phân cấp tối đa 3 tầng: Cấu trúc phân cấp tối đa 3 cấp menu giúp bảo đảm sự mạch lạc và tránh gây lạc lối cho khách mua hàng.

Nếu theme của bạn không có setting cho bề rộng drawer hoặc chiều cao tab bar, Navi+ Tab Bar & Mega Menu cho phép bạn tùy chỉnh cỡ chữ, chiều cao hàng, cỡ icon và bề rộng menu theo từng cấp, đồng thời xem trước trước khi xuất bản. Hãy thử nghiệm trên một bản sao theme trước.

Action Checklist

Hãy sử dụng danh sách kiểm tra 8 bước sau để rà soát kích thước menu trước khi công bố cho khách hàng:

• Tạo bản sao theme: Tạo một bản sao lưu của theme đang kích hoạt trước khi can thiệp mã hoặc CSS (Shopify Duplicating Themes).
• Chỉnh cỡ chữ đa cấp: Thiết lập cỡ chữ riêng cho danh mục cấp 1 và các cấp con để tạo độ phân cấp rõ rệt.
• Cài đặt chiều cao hàng tối thiểu: Tinh chỉnh padding hoặc min-height để các hàng menu có khoảng đệm bấm êm tay.
• Cân chỉnh bề rộng khung chứa: Mở rộng drawer hoặc bảng submenu để vừa vặn với những tiêu đề bộ sưu tập dài nhất.
• Cân đối kích thước icon: Điều chỉnh tỷ lệ cỡ icon tương xứng với chiều cao thanh chứa để tránh chèn ép mép.
• Kiểm tra tiêu chuẩn vùng chạm: Đảm bảo mọi phần tử nhấp được đều đạt hoặc vượt kích thước tối thiểu 24×24 CSS pixel (W3C Target Size Minimum).
• Kiểm thử tại 320 CSS pixel: Kiểm tra menu trên khung nhìn thu hẹp 320 CSS pixel để đảm bảo không bị lỗi cuộn ngang (W3C Reflow).
• Kiểm tra cắt chữ khi phóng to: Phóng to chữ 200% để đảm bảo các nhãn danh mục không bị cắt cụt đột ngột (W3C Resize Text).

FAQ

Làm thế nào để tăng cỡ chữ mobile menu mà không cần viết code?

Bạn có thể tăng cỡ chữ menu di động bằng cách sử dụng các cài đặt cỡ chữ có sẵn trong theme hoặc ứng dụng điều hướng. Trong khi các theme Shopify thường đòi hỏi chỉnh sửa code stylesheet để đổi cỡ chữ di động (fudge.ai), một ứng dụng như Navi+ cung cấp cài đặt Font Size cho từng cấp menu (cài đặt thiết kế cấp 1 của Navi+).

Bề rộng của mobile menu drawer nên là bao nhiêu?

Không có con số chuẩn duy nhất cho bề rộng drawer di động. Khung ngăn kéo của bạn nên chừa lại một khoảng không gian nhìn thấy được để khách hàng giữ được ngữ cảnh trang web phía sau, đồng thời hiển thị trọn vẹn nhãn chữ mà không bị cắt cụt ở bề rộng màn hình 320 CSS pixel (W3C Reflow).

Vùng chạm của menu trên điện thoại nên lớn cỡ nào?

Theo tiêu chuẩn WCAG 2.2 AA, đích chạm tương tác bằng con trỏ phải đạt tối thiểu 24×24 CSS pixel (W3C Target Size Minimum), trong khi mức nâng cao AAA khuyến nghị 44×44 CSS pixel cho các nút bấm quan trọng (W3C Target Size Enhanced). Tổ chức Nielsen Norman Group khuyên đích chạm vật lý nên đạt khoảng 1cm × 1cm (NN/g Touch Target Size).

Vì sao chữ trên menu của tôi bị cắt cụt?

Chữ trên menu bị cắt cụt khi độ dài của từ hoặc cụm từ vượt quá khoảng không gian ngang hiện có của khung chứa (W3C Resize Text). Bạn có thể khắc phục bằng cách tăng bề rộng của drawer hoặc submenu, giảm bớt cỡ chữ, rút ngắn nhãn liên kết, hoặc cho phép chữ tự ngắt dòng.

Tôi có cần sao lưu theme trước khi thêm mã CSS không?

Có. Shopify khuyên bạn nên tạo một bản sao lưu của theme trước khi thay đổi mã nguồn hoặc thêm mã CSS tùy biến để có thể dễ dàng hủy bỏ các thay đổi không mong muốn (Shopify Duplicating Themes).

Sources

• W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Minimum) — Tiêu chuẩn Thành công 2.5.8 về kích thước đích chạm (Cấp độ AA).
• W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Enhanced) — Tiêu chuẩn Thành công 2.5.5 về kích thước đích chạm nâng cao (Cấp độ AAA).
• W3C Web Accessibility Initiative: WCAG 2.2 Resize Text — Tiêu chuẩn Thành công 1.4.4 về khả năng phóng to chữ tới 200%.
• W3C Web Accessibility Initiative: WCAG 2.2 Reflow — Tiêu chuẩn Thành công 1.4.10 về khả năng cuộn dọc ở bề rộng 320 CSS pixel.
• Nielsen Norman Group: Touch Target Sizes on Mobile Devices — Nghiên cứu của Aurora Harley về kích thước vật lý và khoảng cách đích chạm trên di động.
• Shopify Help Center: Duplicating Themes — Tài liệu hướng dẫn sao lưu theme trước khi chỉnh sửa.
• Shopify Help Center: Adding Custom CSS to Themes — Tài liệu về giới hạn ký tự và phạm vi áp dụng CSS toàn theme.
• fudge.ai: How to Change the Mobile Menu in Shopify — Hướng dẫn cấu hình menu di động trong Theme Editor của Shopify.
• MDN Web Docs: text-overflow CSS Reference — Tài liệu kỹ thuật về các thuộc tính text-overflow, overflow và white-space.
• Navi+ Help Center: Level 1 Design Settings — Tài liệu hướng dẫn cài đặt Font Size, Icon Size, Min Height và padding cấp 1.
• Navi+ Help Center: Layout Settings — Tài liệu hướng dẫn cài đặt Submenu Width và cấu hình mega menu.