Hướng dẫn menu Shopify: Kiến trúc, mẫu điều hướng, công thái học di động và UX storefront

Điều hướng là động cơ định hướng của cửa hàng Shopify. Trước khi khách hàng đánh giá sản phẩm, đọc nhận xét hoặc mua hàng, họ phải tìm thấy nơi sản phẩm hiển thị. Đường dẫn rõ ràng tạo đà mua sắm, trong khi liên kết ẩn, nhãn danh mục mơ hồ và vùng chạm khó với sẽ cản trở quá trình khám phá.

Thương mại điện tử hiện đại hoạt động trên hai môi trường: màn hình máy tính rộng rãi để quét ngang và điện thoại thông minh cầm tay điều khiển bằng một ngón cái. Cân bằng khả năng quét thị giác trên máy tính với công thái học di động đòi hỏi những quyết định cấu trúc cẩn trọng.

Hướng dẫn này cung cấp bản thiết kế thực tế cho điều hướng Shopify: cách nền tảng quản lý dữ liệu menu, so sánh bốn mẫu cốt lõi, những khuyến nghị từ nghiên cứu khả dụng và checklist từng bước để kiểm tra cửa hàng trên thiết bị thật.

Câu trả lời nhanh: Cách menu Shopify vận hành

Menu Shopify được tạo trong Nội dung > Menu và do theme hiển thị; mục cấp 1 chứa tối đa hai cấp lồng (tổng cộng ba cấp). Dùng dropdown đơn giản cho danh mục nhỏ, mega menu cho danh mục rộng trên máy tính, và trên điện thoại cần giữ các liên kết chính hiển thị thay vì giấu tất cả sau nút hamburger.

Điểm mấu chốt

• Cấu trúc phân cấp: Shopify áp dụng giới hạn lồng tối đa ba cấp (một mục cấp 1 cùng tối đa hai cấp thả xuống lồng nhau) quản lý trong Nội dung > Menu (Shopify Help Center).
• Khả năng quan sát trên máy tính: Nghiên cứu của Nielsen Norman Group chứng minh mega menu cho phép người dùng nhìn thấy các lựa chọn chỉ qua một cái nhìn thay vì phải nhớ danh sách (NN/g).
• Tương tác trên di động: Thử nghiệm khả dụng của NN/g ghi nhận menu ẩn chỉ đạt 57% tương tác trên di động, trong khi điều hướng kết hợp giữ liên kết chính hiển thị đạt tới 86% (NN/g).

Cách menu Shopify được xây dựng: Nội dung > Menu, Theme và Giới hạn ba cấp

Thiết lập điều hướng hiệu quả bắt đầu bằng việc hiểu cách Shopify tách biệt dữ liệu menu khỏi giao diện hiển thị của theme. Phân cấp menu tồn tại dưới dạng bản ghi dữ liệu cửa hàng, trong khi theme kiểm soát phong cách trình bày.

Hình 1: Minh hoạ khái niệm (Concept illustration) — Cách menu Shopify được xây dựng: Nội dung > Menu, Theme và Giới hạn ba cấp

Vị trí quản lý menu trong trang quản trị

Trong trang quản trị Shopify, cấu trúc điều hướng được quản lý tại mục Nội dung > Menu (theo Shopify Help Center). Từ màn hình này, chủ cửa hàng tạo menu, thêm liên kết danh mục và sắp xếp các lộ trình duyệt web.

Vì menu tồn tại dưới dạng bản ghi nền tảng thay vì mã code trong theme, hệ thống phân cấp danh mục được bảo toàn trọn vẹn khi bạn đổi theme. Bạn tạo các mối quan hệ lồng nhau đơn giản bằng cách kéo thả mục con dưới mục cha.

Cách theme chọn menu để hiển thị

Trong khi dữ liệu menu nằm ở admin, theme sẽ quyết định cách kết xuất dữ liệu thành HTML cửa hàng. Theme Shopify kết nối với menu quản trị thông qua cài đặt link_list (ghi nhận trong Tài liệu nhà phát triển Shopify), cho phép bạn chọn menu hiển thị ở đầu trang, drawer di động hoặc chân trang.

Khi đổi theme, các liên kết của bạn vẫn nguyên vẹn. Tuy nhiên, bạn cần mở Trình tùy chỉnh theme trên theme mới và chọn lại menu trong bộ chọn link_list của phần Header. Banner khuyến mãi hoặc các khối tùy chỉnh trong theme cũ sẽ không tự động chuyển sang.

Giới hạn ba cấp phân cấp

Nền tảng cấu trúc của điều hướng Shopify là giới hạn lồng nhau: một mục cấp cao nhất có thể chứa tối đa hai cấp thả xuống, tạo ra độ sâu tối đa là ba cấp điều hướng (theo Shopify Help Center và Tài liệu nhà phát triển Shopify). Điều này tạo nên mô hình 3 tầng: Danh mục chính → Danh mục con → Mục chi tiết.

Hãy dựng cây menu sao cho nằm trong ba cấp này. Ngoài ra, Shopify Help Center cũng lưu ý hầu hết các theme chỉ hỗ trợ tối đa hai cấp thả xuống lồng nhau.

Một quy tắc tiếp cận thiết yếu cần nhớ: khi một mục menu cấp 1 điều khiển menu con lồng nhau, nó đóng vai trò là nút mở rộng thay vì liên kết trực tiếp (theo Shopify Help Center). Hãy luôn kèm theo liên kết “Xem tất cả [Danh mục]” bên trong bảng thả xuống để khách truy cập có thể đến thẳng trang bộ sưu tập.

Bốn mẫu điều hướng cốt lõi: Dropdown, Mega Menu, Drawer và Tab Bar

Các cửa hàng Shopify chủ yếu dựa vào bốn mẫu điều hướng, mỗi mẫu mang lại sự đánh đổi riêng giữa diện tích màn hình và khả năng phát hiện.

1. Dropdown đơn giản

Dropdown đơn giản là mẫu truyền thống nơi liên kết cấp 1 mở ra danh sách dọc. Mẫu này rất phù hợp với danh mục tinh gọn. Tuy nhiên, với danh mục lớn, dropdown thông thường thường che khuất phần lớn lựa chọn của người dùng (NN/g).

2. Mega menu nhiều cột

Mega menu mở rộng điều hướng thành bảng điều khiển nhiều cột. Nielsen Norman Group xác nhận mega menu cho thấy tất cả cùng lúc, giúp người dùng nhìn thấy thay vì phải cố nhớ vị trí món hàng (NN/g). Nhóm các liên kết liên quan dưới các tiêu đề rõ ràng giúp danh mục rộng dễ quét hơn trên màn hình máy tính.

Để nắm chi tiết bố cục, hãy xem hướng dẫn về thực hành tốt nhất về mega menu Shopify.

3. Slide drawer trượt ngang

Slide drawer trượt từ cạnh màn hình—kích hoạt qua biểu tượng hamburger—giữ điều hướng ẩn cho đến khi được chạm. Mặc dù phổ biến trên di động, Nielsen Norman Group cảnh báo việc ẩn điều hướng sau một biểu tượng khiến các tùy chọn trở nên khó khám phá nhất (NN/g).

Để tăng tương tác cho drawer, hãy đọc thực hành tốt nhất về drawer menu di động.

4. Thanh Tab Bar đáy màn hình

Thanh Tab Bar cố định các điểm đến chính dọc theo mép dưới màn hình, đặt các trung tâm mua sắm cốt lõi ngay trong tầm với của ngón cái. Tuy nhiên, Nielsen Norman Group lưu ý khi một trang cố đặt nhiều hơn 5 tùy chọn trong một thanh điều hướng, việc bố trí vừa vặn mà vẫn giữ kích thước vùng chạm tối ưu sẽ trở nên rất khó khăn (NN/g).

Để có định hướng bố cục, hãy đọc hướng dẫn tạo thanh tab bar đáy cho Shopify.

Kiến trúc điều hướng lai

Các cửa hàng thường kết hợp nhiều mẫu: mega menu trên máy tính đi kèm thanh tab bar đáy và slide drawer trên di động để cân bằng giữa khả năng khám phá nhanh và độ sâu danh mục.

Điều hướng máy tính: Khi nào mega menu vượt trội so với dropdown

Trên màn hình máy tính, các nhà bán lẻ có không gian ngang rộng rãi. Nghiên cứu khả dụng của Nielsen Norman Group nhấn mạnh rằng mega menu hiển thị mọi thứ trong tầm mắt, giúp người mua nhìn thấy thay vì phải ghi nhớ (NN/g). Ngược lại, dropdown thông thường thường che khuất phần lớn lựa chọn của người dùng.

Căn chỉnh thời gian hover để tránh nhấp nháy

Một sai lầm thường gặp với mega menu máy tính là độ nhạy hover chưa được hiệu chỉnh. Khi menu bật mở ngay lúc con trỏ chạm vào một mục trên header, nó có thể bung ra nhầm mỗi khi người mua lia chuột ngang qua đầu trang.

Nielsen Norman Group đưa ra hướng dẫn rõ ràng: con trỏ chuột cần dừng yên trong 0,5 giây trước khi hiển thị các bảng phụ thuộc vào hover (NN/g). Khi đạt ngưỡng dừng 0,5 giây này, mega menu nên xuất hiện trong vòng 0,1 giây (NN/g). Thời gian này ngăn chặn việc kích hoạt nhầm trong khi vẫn phản hồi nhanh với hành vi chủ đích.

Nhóm liên kết bên trong bảng menu

Trình bày liên kết trong mega menu đòi hỏi phân cấp thị giác mạch lạc. Hãy tổ chức các liên kết thành các cụm chủ đề với tiêu đề nhóm súc tích. Đảm bảo mỗi liên kết danh mục chỉ xuất hiện ở một vị trí hợp lý duy nhất. Hình thu nhỏ có thể giúp định hướng, nhưng hình ảnh phải hỗ trợ chứ không thay thế nhãn chữ.

Tuyệt đối không giấu điều hướng chính sau biểu tượng hamburger trên máy tính khi không gian màn hình cho phép. Nielsen Norman Group nhận thấy người dùng máy tính chỉ dùng menu ẩn trong 27% trường hợp (NN/g). Để tìm hiểu chi tiết, hãy đọc thực hành tốt nhất về mega menu Shopify.

Công thái học di động: Tầm với ngón cái, menu ẩn và thanh tab bar

Trong khi điều hướng trên máy tính là bài toán kiến trúc thông tin, thì điều hướng di động căn bản là bài toán cơ sinh học thể chất. Khi người mua lướt web trên điện thoại, tầm với tự nhiên quyết định mức độ thuận tiện khi khám phá.

Hình 2: Minh hoạ khái niệm (Concept illustration) — Công thái học di động: Tầm với ngón cái, menu ẩn và thanh tab bar

Thói quen cầm điện thoại thực tế của người dùng

Trong nghiên cứu thực nghiệm về công thái học, Steven Hoober đã ghi nhận 1.333 lượt quan sát người dùng thiết bị di động trong môi trường công cộng tự nhiên (UXmatters). Trong số đó, có 780 người đang chủ động chạm vào màn hình để cuộn, gõ hoặc bấm.

Phân tích tư thế cầm máy của 780 người dùng màn hình cảm ứng đang hoạt động cho thấy sự phân bố sau:

• Dùng một tay: 49% cầm và thao tác hoàn toàn với thiết bị chỉ bằng một tay duy nhất.
• Cầm đỡ một tay: 36% đỡ điện thoại bằng một tay trong khi dùng ngón tay của bàn tay thứ hai để thao tác.
• Dùng hai tay: 15% cầm thiết bị bằng cả hai tay, thường dùng hai ngón cái để gõ phím.

Nghiên cứu của Hoober quan sát người dùng di động tại các địa điểm công cộng năm 2013, ghi nhận thói quen cầm nắm vật lý chứ không đo lường tỷ lệ chuyển đổi thương mại điện tử. Điện thoại đã thay đổi nhiều kể từ 2013, nên hãy đọc các con số này như ảnh chụp nhanh về thói quen cầm nắm, không phải số đo về chính khách hàng của bạn.

Bài học công thái học: trong mẫu của Hoober, khoảng một nửa số người đang chạm màn hình dùng một tay. Khi các nút điều hướng đặt hoàn toàn ở góc trên, người dùng một tay có thể phải rướn ngón hoặc đổi tư thế cầm. Để hiểu rõ tầm với tác động ra sao, hãy xem nghiên cứu về công thái học vùng ngón cái.

Cái giá phải trả khi ẩn menu điều hướng

Việc giấu điều hướng di động sau nút hamburger gây ra tổn thất khả dụng có thể đo lường được. Trong nghiên cứu về điều hướng ẩn, Nielsen Norman Group đã đo lường mức độ tương tác của khách hàng qua các kiểu bố cục (NN/g):

NN/g ghi nhận người mua sắm di động dùng điều hướng ẩn trong 57% trường hợp, còn điều hướng kết hợp—giữ các liên kết chính hiển thị bên cạnh menu drawer—là 86% (NN/g). Lưu ý rằng NN/g không thử nghiệm các trang chỉ có điều hướng hiển thị trên điện thoại, nên phép so sánh là giữa điều hướng ẩn và điều hướng kết hợp. Trong thử nghiệm đó, việc giữ các liên kết chính hiển thị đi kèm mức sử dụng điều hướng cao hơn rõ rệt.

Khi nào nên dùng thanh Tab Bar đáy

Để khắc phục nhược điểm về khả năng phát hiện trên màn hình di động, các cửa hàng triển khai thanh tab bar đáy cố định. Nielsen Norman Group khuyến nghị rõ ràng: nếu trang của bạn có từ 4 liên kết cấp 1 trở xuống, hãy hiển thị chúng thành các tùy chọn nhìn thấy được (NN/g).

Thanh tab bar đáy tuân theo nguyên tắc này bằng cách đưa các điểm đến cốt lõi vào vị trí ngón cái chạm tới dễ dàng. Dù vậy, nhà bán hàng cần tiết chế. NN/g cảnh báo rằng khi cố nhồi nhét hơn 5 tùy chọn vào một thanh điều hướng, việc duy trì kích thước vùng chạm tối ưu sẽ rất khó khăn (NN/g).

Nielsen Norman Group cũng lưu ý liên kết quá nhỏ hoặc quá sát nhau là nguồn cơn gây ức chế lớn cho người dùng di động (NN/g). Nhồi quá nhiều biểu tượng vào thanh đáy sẽ dẫn đến bấm nhầm. Hãy giữ thanh tab bar tập trung vào một vài điểm đến cốt lõi.

Để biết thêm hướng tiếp cận kiến trúc, hãy tham khảo cẩm nang về thanh tab bar đáy cho Shopify và khám phá điều hướng di động vượt khỏi menu hamburger.

Khả năng tiếp cận và Hiệu năng: Menu khách hàng thực sự dùng được

Kiểu dáng bắt mắt chẳng có ý nghĩa nếu menu gây khó khăn khi thao tác hoặc làm chậm tốc độ tải trang. Menu Shopify chất lượng cao phải đáp ứng các tiêu chuẩn tiếp cận cốt lõi và giữ khối lượng tài liệu hiển thị gọn nhẹ.

Nút bấm kích hoạt so với liên kết trực tiếp

Các thành phần tương tác cần thể hiện rõ chức năng của chúng. Theo Shopify Help Center, mục menu cấp cao nhất có menu con sẽ hoạt động như một nút để mở rộng hoặc thu gọn danh sách, chứ không phải liên kết trực tiếp tới trang bộ sưu tập.

Bắt một mục menu vừa làm liên kết bộ sưu tập vừa làm nút mở menu con nghĩa là một điều khiển phải làm hai việc, gây khó hiểu cho người dùng bàn phím, trình đọc màn hình và cảm ứng. Hãy coi mục cấp 1 có menu con thuần túy là nút mở/đóng, và đặt liên kết “Xem tất cả [Danh mục]” bên trong.

Chỉ báo vị trí và khoảng cách vùng chạm

Nielsen Norman Group nhận xét việc không chỉ rõ vị trí hiện tại có lẽ là sai lầm phổ biến nhất trên các menu trang web (NN/g). Các liên kết danh mục đang duyệt phải được làm nổi bật rõ ràng qua chữ đậm, tương phản cao hoặc đường gạch chân khác biệt.

Vùng chạm cũng cần được bảo vệ kỹ lưỡng. NN/g nhấn mạnh các liên kết quá nhỏ hoặc đặt quá sát nhau gây thất vọng lớn cho người dùng di động (NN/g). Vùng chạm trên di động cần có kích thước và khoảng cách đệm hợp lý.

Để triển khai các chuẩn này, hãy xem hướng dẫn tiếp cận điều hướng.

Số lượng DOM node và tải trọng kết xuất

Mỗi liên kết, cột bọc, hình ảnh và phần tử danh sách trong menu đều làm tăng Document Object Model (DOM). Trong các lượt kiểm tra hiệu năng, Google Chrome Lighthouse cảnh báo khi thẻ body vượt quá khoảng 800 node, và báo lỗi khi vượt quá khoảng 1.400 node (Google Chrome Lighthouse).

Nếu theme của bạn xuất ra hai vùng chứa menu riêng cho máy tính và di động, cùng một cây danh mục có thể xuất hiện hai lần trong mã trang. Hãy tự kiểm tra theme của bạn: mỗi liên kết bị nhân đôi đều cộng thêm node vào con số ở trên.

Chỉ số Interaction to Next Paint (INP) trên di động

Trong hệ thống Core Web Vitals của Google, Interaction to Next Paint (INP) đo lường độ phản hồi của trang trước tương tác người dùng. Theo Google Chrome Web.dev, điểm INP dưới hoặc bằng 200 mili-giây thể hiện mức độ phản hồi tốt.

Google ghi chú rõ INP không tính thao tác cuộn (Google Chrome Web.dev). Tuy nhiên, INP đo độ trễ của các tương tác chạm và bấm—như mở drawer, đóng mở accordion hoặc chọn tab. Mã JavaScript nặng gắn vào các nút kích hoạt có thể làm đơ luồng xử lý chính và khiến INP vượt quá 200 mili-giây.

Để biết các chiến lược tối ưu, hãy xem bài viết về cách điều hướng ảnh hưởng tốc độ trang.

Chọn mẫu menu phù hợp cho cửa hàng của bạn

Chọn mẫu điều hướng là một quyết định cấu trúc dựa trên độ phức tạp của danh mục và thói quen duyệt web của khách hàng.

Ma trận hồ sơ cửa hàng

Khung quyết định chọn điều hướng

Để chọn mẫu điều hướng phù hợp, hãy đánh giá ba câu hỏi cấu trúc sau:

1. Số lượng điểm đến chính: Nếu cửa hàng có 4 liên kết cấp 1 trở xuống, hãy hiển thị trực tiếp thay vì giấu sau biểu tượng (NN/g).
2. Độ sâu của danh mục con: Nếu danh mục trải rộng qua nhiều nhóm con, mega menu giúp khách nhìn thấy các lựa chọn chỉ qua một cái nhìn thay vì phải nhớ danh sách (NN/g).
3. Lưu lượng truy cập di động: Xem Shopify Analytics của bạn. Tỷ lệ di động cao đòi hỏi ưu tiên tầm với ngón cái và điều hướng kết hợp để các khu vực mua sắm cốt lõi luôn hiển thị.

Cây quyết định điều hướng cửa hàng Shopify:
+-- Điểm đến cấp 1 <= 4?
|   +-- Có: Hiển thị chúng dưới dạng liên kết hiển thị sẵn (khuyến nghị NN/g)
|   +-- Không: Nhóm thành các trung tâm danh mục hợp lý
|
+-- Danh mục có trải dài qua nhiều danh mục con riêng biệt?
|   +-- Không: Dùng dropdown đơn giản để tránh khoảng trắng trống rỗng
|   +-- Có: Triển khai mega menu nhiều cột trên máy tính để quét nhanh trong tầm mắt
|
+-- Đánh giá lưu lượng di động:
    +-- Chiếm đa số là người dùng smartphone?
        +-- Tránh dùng thuần menu hamburger ẩn (chỉ đạt 57% tương tác)
        +-- Ưu tiên điều hướng kết hợp: liên kết chính hiển thị sẵn + drawer cho danh mục sâu (86% so với 57% trong thử nghiệm của NN/g)

Sự đánh đổi: Khi nào không nên dùng menu phức tạp

Các tính năng điều hướng nâng cao như mega menu nhiều cột và thanh tab bar đáy giúp quét danh mục nhanh hơn, nhưng không phải luôn mang lại lợi ích trong mọi trường hợp. Đưa các mẫu phức tạp vào bối cảnh sai lầm sẽ tạo ra ma sát không đáng có.

1. Cửa hàng nhỏ hoặc đơn sản phẩm

Với cửa hàng có lượng sản phẩm ít, việc cài mega menu nhiều cột là phản tác dụng. Rải rác vài món đồ vào các bảng menu rộng lớn tạo ra khoảng trắng thừa thãi và thêm bước tương tác thừa. Với cửa hàng đơn thương hiệu và danh mục boutique, header ngang gọn gàng mang lại trải nghiệm truy cập sản phẩm trực diện nhất.

2. Trùng lặp các lớp giao diện trên màn hình di động

Dù thanh tab bar đáy đem lại công thái học tiện lợi, nó chiếm không gian dọc của màn hình. Nếu trang của bạn đã có widget chat hỗ trợ, banner chấp thuận cookie hoặc thanh thông báo dính, việc thêm tab bar có thể gây xung đột giao diện. Nếu bóng chat che mất nút thêm vào giỏ hoặc biểu tượng tab bar, khách sẽ không bấm tới được. Hãy kiểm tra các phần tử nổi trước khi bật thanh điều hướng dính.

3. Tải trọng kết xuất và hình ảnh độ phân giải cao

Nhồi nhét hình ảnh bộ sưu tập và banner tiếp thị độ nét cao vào mega menu làm tăng kích thước tải HTML. Việc nạp sẵn các hình ảnh không cần thiết sẽ đẩy số lượng DOM node về phía ngưỡng cảnh báo 800 node của Lighthouse (Google Chrome Lighthouse). Hơn nữa, các bảng chỉ mở bằng rê chuột rất khó dùng trên màn hình cảm ứng, nơi không có trạng thái hover.

4. Khi theme mặc định của Shopify đã hoàn toàn đủ đáp ứng

Nếu danh mục của bạn vừa vặn trong cấu trúc 3 cấp của Shopify và theme đang dùng đã có menu drawer di động nhanh nhạy, có thể bạn chưa cần cài thêm ứng dụng bên thứ ba. Hãy kiểm tra những gì theme hiện tại đã có trước khi thêm bất cứ thứ gì. Trước khi cài công cụ bên thứ ba, hãy đánh giá danh mục qua cẩm nang về giới hạn menu theme Shopify.

Vị trí của Navi+ trong bức tranh này

Dành cho các nhà bán hàng có danh mục sản phẩm hoặc trải nghiệm di động vượt quá giới hạn của theme mặc định, Navi+ mang đến bộ công cụ điều hướng mô-đun được thiết kế chuyên biệt cho Shopify.

Điều hướng mô-đun xây dựng riêng cho Shopify

Navi+ cho phép các chủ shop triển khai các thành phần điều hướng thiết yếu—bao gồm Thanh Tab Bar đáy di động, Slide Drawer trượt ngang, Mega Menu cho máy tính và di động, Lưới biểu tượng trực quan và Nút hành động nổi—mà không cần viết mã. Thanh Tab Bar đáy giữ các điểm đến chính ngay ngón cái, kèm tùy chọn tự ẩn khi cuộn.

Không can thiệp mã theme & hỗ trợ 3 cấp nguyên bản

Navi+ cài đặt hoàn toàn qua tính năng App Embed mặc định của Shopify mà không can thiệp vào các tệp mẫu Liquid. Các tệp theme của bạn không bị đụng tới. Cấu trúc menu hỗ trợ tối đa ba cấp lồng nhau, tuân thủ đúng phân cấp của nền tảng. Ngoài ra, Navi+ Mobile Menu cho phép nhúng một menu Shopify có sẵn và làm mới bản sao của nó bằng nút “Sync now” chỉ một cú bấm.

Dễ dàng tái sử dụng khi đổi theme

Vì menu của bạn được lưu trong Navi+, việc chuyển theme Shopify không làm mất cấu trúc điều hướng đã dựng. Bạn cần bật app embed Navi+ trên theme mới và kiểm tra vị trí hiển thị. Navi+ đã được chạy thử trên 331 theme, xem trong thư mục tương thích theme Navi+.

Nếu menu của theme hiện tại đã đáp ứng tốt danh mục sản phẩm, hãy tiếp tục dùng nó. Nếu bạn muốn thêm Tab Bar ở đáy màn hình hoặc mega menu mà không cần can thiệp code theme, bạn có thể dùng thử Navi+ trên theme đang dùng và đối chiếu với checklist bên dưới.

Checklist hành động: Đánh giá menu Shopify của bạn

Dùng checklist kiểm toán từng bước này để đánh giá điều hướng cửa hàng trên thiết bị thật, đảm bảo khả năng sử dụng, công thái học và hiệu năng tối ưu.

• Kiểm tra độ sâu menu trong Admin: Vào Nội dung > Menu, xác nhận cây danh mục lồng không quá ba cấp. Đảm bảo mục cha có liên kết “Xem tất cả [Danh mục]” rõ ràng bên trong submenu.
• Thực hiện bài test với một tay: Dùng một điện thoại thật, thử mở ba bộ sưu tập quan trọng nhất chỉ bằng ngón cái mà không dịch chuyển tư thế cầm tay. Nếu thấy với khó khăn, hãy thêm liên kết trực quan hoặc thanh tab bar đáy.
• Đo lường số lượng DOM node của trang: Mở Chrome Console, chạy document.querySelectorAll('body *').length và so sánh với ngưỡng cảnh báo khoảng 800 node cùng ngưỡng lỗi khoảng 1.400 node của Lighthouse.
• Kiểm tra chỉ báo vị trí và vùng chạm: Đảm bảo các danh mục đang hoạt động hiển thị nổi bật (chữ đậm hoặc gạch chân) và các vùng chạm có đủ khoảng cách đệm để tránh bấm nhầm.
• So sánh phân tích chuyển đổi giữa Menu và Tìm kiếm: Trong Shopify Analytics, đối chiếu tỷ lệ chuyển đổi của khách duyệt menu so với khách dùng thanh tìm kiếm để phát hiện các nhánh sản phẩm đang bị che khuất.

FAQ

Shopify hỗ trợ tối đa bao nhiêu cấp menu?

Shopify hỗ trợ gốc tối đa ba cấp điều hướng: một mục cấp cao nhất kèm tối đa hai cấp thả xuống lồng nhau (Shopify Help Center). Hầu hết các theme đều tuân thủ giới hạn ba tầng này.

Tôi chỉnh sửa menu điều hướng ở đâu trong admin Shopify?

Bạn quản lý toàn bộ điều hướng cửa hàng trong trang quản trị Shopify tại mục Nội dung > Menu (Shopify Help Center), nơi bạn thêm liên kết và sắp xếp các tầng lồng. Sau đó, cài đặt của theme sẽ chọn menu nào được hiển thị.

Menu của tôi có bị mất khi tôi đổi theme Shopify không?

Không. Cấu trúc liên kết menu được lưu trữ dưới dạng dữ liệu nền tảng trong Nội dung > Menu chứ không nằm trong mã theme. Khi đổi theme, bạn chỉ cần chọn lại menu trong cài đặt Header của theme mới (Tài liệu nhà phát triển Shopify).

Khi nào nên dùng mega menu thay vì dropdown trên Shopify?

Hãy dùng mega menu khi danh mục của bạn có nhiều danh mục con đa dạng cần khách quét nhanh trong một cái nhìn (NN/g). Với danh mục nhỏ, dropdown một cột đơn giản sẽ tránh được khoảng trắng thừa không cần thiết.

Tại sao giấu toàn bộ điều hướng sau menu hamburger lại gây hại trên di động?

Thử nghiệm khả dụng của Nielsen Norman Group cho thấy khách hàng chỉ tương tác với menu di động ẩn trong 57% trường hợp, so với 86% khi điều hướng kết hợp giữ các liên kết chính hiển thị (NN/g).

Số lượng mục tối đa khuyến nghị cho thanh Tab Bar di động là bao nhiêu?

Hãy giữ thanh Tab Bar di động ở một vài điểm đến cốt lõi. NN/g cho biết khi có hơn 5 lựa chọn, rất khó nhét vào thanh tab hay thanh điều hướng mà vẫn giữ kích thước vùng chạm tối ưu (NN/g).

Sources

• Shopify Help Center: Menus and links — Tài liệu quản lý menu điều hướng cửa hàng trong trang quản trị Shopify.
• Shopify Help Center: Drop-down menus — Hướng dẫn về giới hạn ba cấp phân cấp và hành vi mở rộng của mục cha.
• Shopify Dev Documentation: Navigation Architecture — Tham chiếu kỹ thuật cho cài đặt link_list của theme và kết xuất menu nhiều tầng.
• Nielsen Norman Group: Mega Menus Work Well (Angie Li & Jakob Nielsen, 2017) — Nghiên cứu về khả năng quét nhanh trong tầm mắt và thời gian dừng chuột khuyến nghị 0,5 giây.
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation (Kara Pernice & Raluca Budiu, 2016) — Thử nghiệm khả dụng so sánh tương tác giữa điều hướng hiển thị, điều hướng ẩn và điều hướng kết hợp.
• Nielsen Norman Group: Mobile Navigation Patterns (Raluca Budiu, 2015) — Phân tích menu drawer và thanh điều hướng, cảnh báo không vượt quá 5 mục.
• Nielsen Norman Group: Menu Design Best Practices (Page Laubheimer, 2024) — Các nguyên tắc chỉ báo vị trí người dùng và duy trì khoảng cách vùng chạm.
• UXmatters: How Do Users Really Hold Mobile Devices? (Steven Hoober, 2013) — Khảo sát thực nghiệm 1.333 tương tác di động ghi nhận tư thế cầm một tay, cầm đỡ và hai tay.
• Google Chrome Lighthouse: DOM Size Thresholds — Hướng dẫn hiệu năng xác lập ngưỡng cảnh báo 800 node và ngưỡng lỗi 1.400 node.
• Google Chrome Web.dev: Interaction to Next Paint (INP) — Tiêu chuẩn Core Web Vitals thiết lập ngưỡng phản hồi tương tác 200 mili-giây.
• Thư mục tương thích theme Navi+ — Trang tổng hợp 331 theme Shopify mà Navi+ đã được chạy thử.