Kiến Trúc Menu Đa Cấp Shopify: Phân Cấp Lồng Nhau, Điều Hướng Sâu và Định Hướng Storefront

Xây dựng điều hướng cho một cửa hàng nhỏ rất đơn giản: chỉ cần vài liên kết rõ ràng trên thanh header là khách hàng đã tìm thấy sản phẩm. Nhưng khi danh mục mở rộng thành nhiều phòng ban, kiểu dáng và thông số kỹ thuật, menu không còn là lựa chọn thẩm mỹ đơn thuần mà trở thành bài toán kỹ thuật về định hướng luồng người dùng trên storefront.

Trên nền tảng Shopify, merchant gặp phải một ranh giới cấu trúc mặc định: menu chỉ cho phép mục cấp đầu cộng thêm tối đa hai cấp lồng nhau. Trần 3 cấp này không phải lỗi thiết kế mà là lá chắn bảo vệ trải nghiệm. Các cửa hàng hiệu quả không cố vượt trần bằng những cấu trúc rối rắm, mà thể hiện 3 cấp đó qua mega menu trên desktop, bảng trượt từng bước trên mobile và chuyển thuộc tính chi tiết sang bộ lọc bộ sưu tập.

Trả lời nhanh: Menu Shopify có thể sâu tối đa bao nhiêu cấp?

Menu Shopify hỗ trợ tối đa ba cấp: một mục cấp gốc cùng tối đa hai cấp menu thả xuống lồng nhau (Trung tâm trợ giúp Shopify). Đa số theme hỗ trợ độ sâu này, nhưng menu sâu rất khó thao tác. Hãy gom chúng thành mega menu trên desktop và bảng trượt hoặc accordion trên điện thoại (NN/g).

Cách Shopify Lưu Trữ Menu Đa Cấp

Shopify quản lý các menu đa cấp dưới dạng danh sách liên kết phân cấp trong cơ sở dữ liệu. Trước đây các hướng dẫn cũ dẫn vào Online Store > Navigation, nhưng hiện nay tài liệu chính thức của Shopify đã chuyển việc quản lý menu sang Content > Menus. Hiểu rõ cách nền tảng giới hạn độ sâu và cách theme đọc dữ liệu sẽ giúp bạn tránh các lỗi hiển thị phổ biến.

Lồng các mục menu trong Content > Menus

Để tạo menu đa cấp trên Shopify, hãy mở trang quản trị và truy cập Content > Menus. Mở menu chính, thêm liên kết và kéo mục con thụt sang bên phải ngay dưới mục cha. Tài liệu Shopify ghi rõ: mục cấp đầu có thể có tối đa hai cấp menu thả xuống lồng nhau, tạo thành giới hạn cứng 3 cấp. Bạn không thể tạo cấp thứ tư trong trang quản trị mặc định.

Shopify Admin Native Menu Structure:
Level 1: Men (Top-level item)
  └── Level 2: Footwear (First nested drop-down)
        └── Level 3: Running Shoes (Second nested drop-down — hard ceiling)
              └── [Level 4: Trail Running] ◄── Not possible in Shopify admin

Cách Theme Đọc Liên Kết Lồng Nhau (link.links)

Template Liquid của Shopify duyệt cây điều hướng thông qua đối tượng link. Cụ thể, thuộc tính link.links chứa danh sách liên kết con của liên kết đó, còn link.levels trả về số cấp lồng bên dưới nó. Theme thường duyệt qua tối đa 3 vòng lặp lồng nhau:

<ul class="site-nav">
  
</ul>

Tại Sao Theme Của Bạn Giấu Mất Cấp Thứ Ba

Nhiều chủ shop thắc mắc vì sao các liên kết cấp 3 đã tạo trong admin nhưng không xuất hiện ngoài storefront. Trung tâm trợ giúp Shopify giải thích rằng đa số theme chỉ hỗ trợ tối đa hai cấp menu thả xuống trong header dạng dropdown thông thường. Một số theme chỉ hiển thị cấp thứ ba trong bố cục mega menu nhiều cột, vì vậy hãy xem tài liệu của theme trước khi nghĩ dữ liệu menu bị sai.

Trên thiết bị di động, một lỗi thường gặp là chạm vào danh mục cha thì trang tự động nhảy đến bộ sưu tập thay vì mở menu con. Shopify hướng dẫn kiểm tra trong Content > Menus và đặt trường liên kết của mục cha là # để thao tác chạm sẽ mở menu. Ngoài ra, một số theme có thể cần tinh chỉnh CSS để hoàn thiện trải nghiệm trên điện thoại.

Vì Sao Menu Quá Sâu Lại Khó Dùng: Steering Law và Dấu Vết Thông Tin

Menu nhiều cấp tạo ra rào cản thao tác cơ học. Trên desktop, các menu flyout xếp tầng bắt người dùng phải di chuyển chuột qua những đường hầm ngang hẹp. Nếu người mua di chuyển chuột chéo hướng tới mục cấp 3, con trỏ sẽ lọt ra ngoài vùng hover và bảng điều hướng sẽ đóng lại ngay lập tức.

The "Mouse Tunnel" Steering Trap in Cascading Flyouts:
┌──────────────┐
│ Category A   │
├──────────────┤
│ Category B   │──────┐
├──────────────┤      │  Shopper moves pointer diagonally
│ Category C   │      ▼  toward desired item...
└──────────────┘   ┌──────────────┐
                   │ Sub-item 1   │
                   ├──────────────┤ ◄── Pointer exits the narrow tunnel!
                   │ Sub-item 2   │     Submenu collapses instantly.
                   └──────────────┘

Định luật Accot-Zhai Steering Law mô hình hóa sự khó khăn này: di chuyển qua các đường hầm hẹp tốn nhiều thời gian hơn và dễ thao tác sai. Nghiên cứu của Nielsen Norman Group về định luật này khẳng định các menu phân cấp vốn là dạng giao diện rất khó thiết kế tối ưu. NN/g khuyên nên tránh menu phân cấp, đặc biệt là các menu sâu hơn hai cấp.

Bên cạnh đó, việc đào sâu nhiều cấp làm suy yếu dấu vết thông tin (information scent). Người mua hàng lướt web dựa vào các manh mối nhãn từ để biết mình có đang đến gần sản phẩm cần tìm hay không. Khi các nhãn danh mục bị giấu quá sâu hoặc dùng từ ngữ mơ hồ, khách hàng có thể bị lạc đường.

Desktop: Cascading Flyouts vs Mega Menus

Để giải quyết cái bẫy đường hầm chuột, Nielsen Norman Group đưa ra lời khuyên: đối với menu điều hướng, hãy cân nhắc sử dụng mega menu thay cho menu kéo thả dạng cột hẹp. Thay vì bắt con chuột đi qua các lối đi zíc zắc, mega menu mở toàn bộ các lựa chọn cấp 2 và cấp 3 trên một mặt phẳng hai chiều ổn định.

Hiệu ứng rê chuột của mega menu cần thời gian đệm hợp lý. Nielsen Norman Group hướng dẫn: chuột phải đứng yên 0.5 giây trước khi mở mega menu, menu hiển thị trong 0.1 giây, và giữ mở tới khi chuột rời cả thanh điều hướng lẫn menu trong 0.5 giây. Các khoảng đệm này giúp ngăn việc vô tình kích hoạt menu khi người dùng chỉ lướt chuột qua header.

NN/g cũng nhấn mạnh nguyên tắc gom các lựa chọn thành những nhóm liên quan. Trong menu 3 cấp của Shopify, điều này có nghĩa là biến mục cấp 2 thành tiêu đề cột và đặt các mục cấp 3 thành liên kết trong cột đó. Để tìm hiểu sâu về kỹ thuật phân cột, hãy tham khảo bài viết về mega menu best practices.

Tuy nhiên, bạn không nên mang nguyên xi mega menu desktop sang màn hình cảm ứng. NN/g cảnh báo rằng các lựa chọn nhỏ bên trong mega menu dễ gây chạm nhầm trên màn cảm ứng. Bố cục desktop cần chuyển đổi sang giao diện tối ưu riêng cho điện thoại di động.

Mobile: Accordion vs Bảng Trượt Drill-Down

Thiết kế menu di động đòi hỏi sự am hiểu về thói quen cầm máy. Nghiên cứu của Steven Hoober công bố trên UXmatters—dựa trên 1,333 quan sát người dùng điện thoại thực tế—cho thấy 49% người dùng thao tác bằng một tay. Hãy thử menu bằng một tay trên điện thoại thật.

Hình 1: Minh hoạ khái niệm (Concept illustration) — Mobile: Accordion vs Bảng Trượt Drill-Down

Lợi Thế Của Accordion

Mô hình accordion dọc mở rộng các danh mục con ngay bên dưới mục cha khi chạm vào. Một bài viết trên Smashing Magazine (Friedman 2022) nhận định accordion hoạt động rất tốt cho điều hướng nhiều cấp và thường tốt hơn menu trượt slide-in. Vì các danh mục anh em vẫn hiển thị, khách có thể chuyển nhanh giữa các cấp mà không mất ngữ cảnh trang.

Rủi ro lớn nhất của accordion là hiện tượng Accordion sprawl. Khi người dùng liên tục mở nhiều nhánh, danh mục sẽ kéo dài hàng nghìn pixel và đẩy các liên kết chính xuống khỏi màn hình. Để hạn chế tình trạng này, bạn nên cấu hình sao cho menu tự động đóng nhánh anh em khi một nhánh mới được mở ra.

Lợi Thế Của Bảng Trượt Drill-Down

Mô hình bảng trượt drill-down thay thế toàn bộ khung nhìn của ngăn kéo bằng một cấp mới sau mỗi lần chạm, thể hiện One tier at a time. Cách này giữ cho chiều cao ngăn kéo luôn cố định và gom các liên kết vào từng Intent groups rõ ràng, rất phù hợp với catalog có nhiều mục con.

Hạn chế của drill-down được Smashing Magazine chỉ ra: nút quay lại đôi khi không rõ ràng về đích đến. Smashing khuyên nên thay nút Back chung chung bằng một Contextual back label (chẳng hạn như ‹ Men). Chúng tôi cũng gợi ý giữ một Persistent back button ở đầu mỗi bảng. Để hoàn thiện giao diện này, xem thêm bài hướng dẫn mobile drawer menu design.

Cấu Trúc Danh Mục vs Bộ Lọc: Điểm Dừng Của Menu

Hình 2: Minh hoạ khái niệm (Concept illustration) — Cấu Trúc Danh Mục vs Bộ Lọc: Điểm Dừng Của Menu

Khi merchant cảm thấy giới hạn 3 cấp của Shopify quá gò bó, nguyên nhân thường là do nhầm lẫn giữa danh mục và bộ lọc. Menu điều hướng chỉ nên chứa Structural categories đại diện cho các ý định mua hàng độc lập (như Giày chạy bộ so với Giày thời trang). Trong khi đó, các đặc tính chi tiết cần chuyển sang Faceted filters và Filter chips trên trang bộ sưu tập.

Việc nhồi nhét các thuộc tính như Màu đỏ, Size L hoặc một khoảng giá vào cây menu sẽ làm cấu trúc bị rối loạn nghiêm trọng. Bằng cách dừng menu ở cấp 3 và để bộ lọc gánh vác các thuộc tính chi tiết, điều hướng của bạn sẽ luôn tinh gọn và sắc bén.

Hiệu Năng và Khả Năng Tiếp Cận Của Menu Sâu

Menu quá sâu tiềm ẩn rủi ro kỹ thuật. Trong các theme Shopify truyền thống, các vòng lặp Liquid lồng nhau sẽ kết xuất sẵn toàn bộ liên kết phía máy chủ vào file HTML ban đầu. Một mega menu đồ sộ với mô tả, huy hiệu và ảnh đại diện sẽ sản sinh rất nhiều thẻ phần tử ngay từ lần tải đầu tiên.

Tài liệu Google Chrome Lighthouse cảnh báo khi phần tử body vượt quá khoảng ~800 node và báo lỗi khi vượt quá ~1,400 node. Cây DOM lớn khiến trình duyệt phải làm nhiều việc hơn, nên hãy đo thay vì đoán. Bạn có thể tự đếm số node header trong Console bằng lệnh: document.querySelector(‘header’).querySelectorAll(‘*’).length. Đọc thêm tại bài viết về how navigation affects page speed.

Về phương diện trợ năng, menu phải tuân thủ chuẩn W3C WAI-ARIA APG. Hướng dẫn APG khẳng định điều hướng website sử dụng mô hình disclosure chứ không dùng role menu vì nó không đòi hỏi hành vi phức tạp như phần mềm máy tính. Các nút bấm cần có thuộc tính aria-expanded chuyển đổi giữa false và true, các bảng ẩn phải được giấu khỏi screen reader, và phím Escape phải đóng dropdown đồng thời trả focus về nút kích hoạt ban đầu.

Đánh Đổi Kiến Trúc: Khi Nào Không Nên Dùng Menu Sâu

Không phải storefront nào cũng cần tới 3 cấp menu. Các cửa hàng boutique với catalog nhỏ và tập trung sẽ tạo ra ma sát không đáng có nếu dùng dropdown nhiều tầng. Khi catalog nhỏ đến mức xem hết được trên một trang bộ sưu tập, việc bắt khách hàng bấm qua nhiều nấc menu chỉ gây thêm phiền toái.

Các thương hiệu DTC kéo khách trực tiếp từ quảng cáo mạng xã hội về landing page chuyên biệt cũng phù hợp hơn với thanh menu phẳng. Việc đưa khách thẳng tới bộ sưu tập tinh gọn kèm các chip lọc ngang có thể phù hợp hơn một mega menu cầu kỳ; hãy thử trên lượng truy cập thật của bạn.

Ngoài ra, các thương hiệu cao cấp chú trọng khoảng trắng và hình ảnh nghệ thuật thường chọn menu tối giản để giữ trọn vẹn sự sang trọng. Hãy nhớ lời khuyên cốt lõi từ Nielsen Norman Group: tránh các menu phân cấp, đặc biệt là các menu sâu hơn hai cấp.

Khung Quyết Định Theo Quy Mô Catalog

Để xác định cấu trúc phân cấp điều hướng tối ưu cho cửa hàng Shopify, hãy đối chiếu quy mô catalog và hành vi mua sắm của khách theo ma trận kiến trúc dưới đây:

Multi-Level Navigation Decision Architecture:
┌─────────────────────────────────────────────────────────────────┐
│ Catalog Scale & Taxonomy Audit                                  │
└────────────────────────────────┬────────────────────────────────┘
                                 │
         ┌───────────────────────┴───────────────────────┐
         ▼                                               ▼
  [ Small, focused catalog ]                    [ Broad, multi-category ]
         │                                               │
         ▼                                               ▼
┌─────────────────────────────┐                 ┌─────────────────────────────┐
│ 1–2 Tier Flat Navigation    │                 │ Multi-Tier Structure Needed │
│ Single-line bar on desktop  │                 └──────────────┬──────────────┘
│ Clean 1-level mobile drawer │                                │
└─────────────────────────────┘         ┌──────────────────────┴──────────────────────┐
                                        ▼                                             ▼
                                [ Desktop Viewport ]                          [ Mobile Viewport ]
                                        │                                             │
                                        ▼                                             ▼
                         ┌─────────────────────────────┐               ┌─────────────────────────────┐
                         │ 2D Scannable Mega Menu      │               │ Drill-Down Panels / Drawer  │
                         │ Columns, intent groups      │               │ Step-by-step navigation     │
                         │ High scannability           │               │ Contextual "< Back" crumb   │
                         └─────────────────────────────┘               └─────────────────────────────┘

Các nhãn quy mô catalog chỉ là hướng dẫn định tính, không phải ngưỡng đo lường cố định.

Vị Trí Phù Hợp Của Navi+

Đối với các chủ shop Shopify muốn trình bày catalog đa dạng một cách trực quan mà không cần can thiệp code Liquid của theme, Navi+ mang đến công cụ tạo menu trực quan cho storefront Shopify.

Theme Menu vs. Navi+ Menu Delivery:

Traditional Theme Liquid:
[Shopify Server] ──► [Loops every menu link in Liquid] ──► [All links in initial HTML] ──► Browser

Navi+:
[Shopify Server] ──► [Theme HTML without Navi+ menu links] ──► Browser
                               ▲
                               │ Menu config loaded by a script
                             [CDN]
                   (Menu stored as a JSON file)

Tương tự như kiến trúc mặc định của Shopify, menu Navi+ tuân thủ tối đa 3 cấp độ. Giá trị gia tăng của Navi+ nằm ở việc phân tách cách hiển thị theo thiết bị: chủ shop có thể dựng Desktop Mega Menu với các cột phân nhóm, ảnh đại diện và banner nổi bật; đồng thời thiết lập một Mobile Menu riêng (hoặc Tab Bar dưới đáy) phù hợp với ngón tay người dùng. Mobile Menu cũng có thể nhúng cây menu Shopify sẵn có của bạn và làm mới bằng nút Sync now.

Về mặt cơ chế, cấu hình menu Navi+ được lưu dưới dạng file JSON tải từ CDN và được vẽ phía trình duyệt thông qua một script, giúp các liên kết không bị lặp trong template Liquid server của theme. Chủ shop nên chủ động đo lường hiệu năng thực tế trên store của mình bằng PageSpeed Insights và Chrome DevTools.

Nếu menu có sẵn của theme không cho khách desktop và khách điện thoại thấy hai cách trình bày khác nhau của cùng một cấu trúc ba cấp, Navi+ cho phép bạn dựng trực quan một Desktop Mega Menu và một Mobile Menu riêng — rồi hãy chạy checklist bên dưới trên chính store của bạn.

Để khám phá thêm các mô hình điều hướng hiện đại, hãy xem bài viết mobile navigation beyond the hamburger và tham khảo Navi+ setup guides for Shopify themes.

Checklist Hành Động: Kiểm Tra Menu Đa Cấp

Thực hiện quy trình kiểm tra 5 bước sau đây để hiện đại hóa cây menu đa cấp trên cửa hàng của bạn:

• Bước 1: Tách bạch danh mục và thuộc tính: Rà soát toàn bộ liên kết trong bảng tính. Giữ các danh mục cấu trúc (như Giày dép, Áo khoác) trong menu; chuyển các thuộc tính (Màu sắc, Size, Giá) sang bộ lọc bộ sưu tập.
• Bước 2: Củng cố dấu vết thông tin: Loại bỏ các thuật ngữ marketing mơ hồ để thay bằng từ ngữ thực tế, dễ hiểu mà khách hàng thực sự tìm kiếm.
• Bước 3: Thử nghiệm trên điện thoại thật: Mở cửa hàng trên smartphone và duyệt sâu đến cấp 3. Đảm bảo liên kết cha cấp 1 được gán ký tự # để không nhảy trang nhầm và các nút quay lại hiển thị rõ ràng.
• Bước 4: Đo lường số node DOM của Header: Chạy lệnh document.querySelector(‘header’).querySelectorAll(‘*’).length trong Chrome DevTools. So sánh số lượng này với ngưỡng cảnh báo ~800 node của Lighthouse.
• Bước 5: Kiểm tra điều hướng bàn phím: Dùng chỉ các phím Tab, Enter và Escape để duyệt menu. Xác nhận rằng phím Escape đóng được dropdown và trả lại tiêu điểm cho nút kích hoạt.

Câu Hỏi Thường Gặp

Các thắc mắc phổ biến về kiến trúc menu đa cấp, giới hạn nền tảng và trải nghiệm người dùng trên Shopify:

Menu Shopify có thể chứa tối đa bao nhiêu cấp?

Menu Shopify hỗ trợ tối đa ba cấp: một mục cấp gốc cộng thêm tối đa hai cấp menu thả xuống lồng nhau, theo tài liệu chính thức từ Trung tâm trợ giúp Shopify.

Làm thế nào để lồng một mục menu trong Shopify?

Trong trang quản trị Shopify, truy cập Content > Menus, chọn menu cần sửa, kéo mục liên kết thụt sang phải bên dưới mục cha rồi lưu thay đổi.

Tại sao theme của tôi không hiển thị các liên kết ở cấp thứ ba?

Theo Trung tâm trợ giúp Shopify, hầu hết theme chỉ hỗ trợ tối đa hai cấp menu thả xuống ở header tiêu chuẩn. Một số theme chỉ dựng cấp thứ ba trong bố cục mega menu nhiều cột, vì vậy hãy xem tài liệu của theme.

Tại sao liên kết cấp gốc mở trang thay vì mở menu thả xuống trên mobile?

Shopify khuyên bạn nên kiểm tra trường liên kết của mục cấp gốc trong Content > Menus và đặt là # để thao tác chạm mở danh mục con thay vì chuyển hướng trang.

Mega menu có tốt hơn menu thả xuống truyền thống cho catalog lớn không?

Nielsen Norman Group khuyên nên cân nhắc mega menu thay cho menu kéo thả dạng cột hẹp và khuyến nghị tránh menu phân cấp sâu hơn hai cấp.

Nên dùng Accordion hay Drill-Down trên thiết bị di động?

Cả hai đều có ưu điểm: Smashing Magazine nhận định accordion hoạt động rất tốt cho menu nhiều cấp, nhưng bảng trượt drill-down giúp cố định chiều cao màn hình nếu có nhãn quay lại theo ngữ cảnh rõ ràng.

Nguồn Tham Khảo

• Trung tâm trợ giúp Shopify: Set up drop-down menus in your online store. Hướng dẫn chính thức về phân cấp menu và khả năng của theme. help.shopify.com
• Shopify.dev: Tài liệu đối tượng Liquid link. Đặc tả thuộc tính mảng liên kết con link.links và số cấp link.levels. shopify.dev
• Nielsen Norman Group: Laubheimer, P. (2019). Accot-Zhai Steering Law: Implications for UI Design. Nghiên cứu về đường hầm chuột và lỗi menu lồng. nngroup.com
• Nielsen Norman Group: Nielsen, J. & Li, A. (2017). Mega Menus Work Well for Site Navigation. Hướng dẫn phân nhóm 2D và thời gian rê chuột (0.5 s / 0.1 s). nngroup.com
• Smashing Magazine: Friedman, V. (2022). Designing Navigation for Mobile: Design Patterns and Best Practices. Phân tích về accordion mobile, slide-in và nhãn quay lại theo ngữ cảnh. smashingmagazine.com
• Steven Hoober (UXmatters): How Do Users Really Hold Mobile Devices? (2013). Quan sát thực tế với 1,333 người dùng; 49% cầm máy bằng một tay. uxmatters.com
• Chrome for Developers: Avoid an excessive DOM size (Lighthouse). Hướng dẫn về ngưỡng cảnh báo (~800 node) và lỗi (~1,400 node). developer.chrome.com
• W3C Web Accessibility Initiative (WAI): WAI-ARIA APG - Disclosure Navigation Pattern. Tiêu chuẩn tiếp cận bàn phím và trạng thái menu. w3.org
• Bài viết liên quan: Mega Menu Best Practices, Mobile Drawer Menu Design, Navigation and Page Speed, Mobile Navigation Beyond the Hamburger, và Navi+ Setup Guides for Shopify Themes.