Điều hướng phẳng và sâu trên Shopify: Cửa hàng của bạn cần bao nhiêu cấp menu

Chủ cửa hàng Shopify thường gặp một bài toán kiến trúc: nên dùng menu phẳng, rộng, phơi bày mọi bộ sưu tập cùng lúc, hay một cây phân cấp sâu dẫn người mua đi qua nhiều tầng lồng nhau?

Cả hai thái cực đều không hiệu quả trong thực tế. Nhét hàng chục bộ sưu tập vào header chính khiến khách choáng ngợp, còn chôn sản phẩm dưới nhiều menu con lồng nhau khiến sản phẩm khó tìm hơn. Thay vào đó, hãy xây một cấu trúc kim tự tháp cân bằng trong giới hạn ba cấp của Shopify, và đo click depth thay vì đếm số hàng menu.

Câu trả lời nhanh

Điều hướng phẳng đưa đa số trang về gần trang chủ; điều hướng sâu xếp nhiều tầng hơn. Không bên nào thắng: cấu trúc sâu khó dùng, menu quá phẳng làm khách choáng ngợp. Với Shopify, hãy nhắm tới kim tự tháp trong giới hạn ba cấp menu. Đo click depth, đừng đếm số cấp.

Ý nghĩa của điều hướng phẳng và sâu trên Shopify

Điều hướng phẳng dùng các danh mục rộng và ít phân nhánh để khách đến được phần lớn các trang chỉ sau vài bước. Điều hướng sâu dùng cấu trúc cao hơn, với các nhóm đầu vào hẹp hơn rồi phân nhánh thành các cấp con lồng nhau. Một quy ước của giới agency thường mô tả điều hướng phẳng là có ít tầng, thường từ 1 đến 3 tầng (Fresh Consulting). Trên Shopify, áp dụng điều này đòi hỏi phải tách cấu hình menu khỏi đường đi thực tế của người mua.

Click depth không giống với số cấp menu

Chủ cửa hàng thường nhầm số cấp menu với click depth. Số cấp menu mô tả cách các linklist được lồng nhau trong phần thiết lập theme. Click depth đo số lần nhấp hoặc chạm thực tế cần có để đi từ trang chủ đến một trang đích.

Ví dụ, một cửa hàng quần áo có thể thiết lập menu hai cấp, trong đó “Women” xổ xuống “Dresses”. Nếu người mua nhấp “Women”, xem một trang bộ sưu tập trung gian, nhấp “Summer Dresses” rồi chọn một sản phẩm, thì click depth đã là vài cú nhấp. Ngược lại, một mega menu trên desktop có thể hiển thị ba tầng trên các cột được tổ chức, cho phép người mua đến một bộ sưu tập con cụ thể chỉ với một cú nhấp từ trang chủ. Click depth đo mức cản trở của khách hàng; số cấp menu mô tả cấu trúc theme.

Giới hạn menu ba cấp của Shopify

Trong Shopify admin, ở mục Content > Menus, menu thả xuống có một mức trần của nền tảng. Mục cấp cao nhất có thể có tối đa hai cấp menu thả xuống lồng nhau (Shopify Help), tạo ra tối đa 3 cấp trong các đối tượng linklist của Liquid (Shopify Dev Docs).

Hầu hết theme hỗ trợ tối đa hai cấp menu thả xuống lồng nhau (Shopify Help), nhưng cách hiển thị khác nhau tùy theme. Hãy kiểm tra cài đặt theme để xác nhận menu nhiều cấp hiển thị thế nào trên màn hình desktop và di động.

Vì sao menu quá sâu làm mất khách hàng và bọ tìm kiếm

Kéo dài điều hướng qua quá nhiều tầng dọc gây cản trở cho cả người mua lẫn bot tìm kiếm. Khi người mua phải nhấp qua nhiều tầng menu con liên tiếp trước khi thấy sản phẩm, công sức nhận thức tăng lên gấp bội. Nghiên cứu về khả năng sử dụng của Nielsen Norman Group xác nhận rằng “all other things being equal, deep hierarchies are more difficult to use” (khi các yếu tố khác như nhau, cây phân cấp sâu khó sử dụng hơn) (NN/g). Mỗi tầng thả xuống thêm buộc khách hàng phải đưa ra thêm một lựa chọn, tạo thêm một cơ hội để người mua rẽ nhầm hướng.

Với công cụ tìm kiếm, cấu trúc lồng nhau quá sâu khiến việc thu thập dữ liệu khó hơn. John Mueller của Google chỉ ra rằng “if you make it too deep, then that makes it harder for us to crawl” (nếu bạn làm nó quá sâu thì chúng tôi sẽ khó thu thập dữ liệu hơn) (Search Engine Journal).

Hướng dẫn của Google Search Central nêu rằng mọi trang bạn quan tâm đều nên có một liên kết từ ít nhất một trang khác trên site của bạn bằng các thẻ HTML <a> có thể thu thập dữ liệu với thuộc tính href hợp lệ. Chủ cửa hàng cần bảo đảm Google có thể thu thập dữ liệu menu của bạn đúng cách. Ngoài ra, các site sâu hơn cần breadcrumbs, vốn hiển thị một liên kết cho mỗi cấp của site từ trang chủ đến trang hiện tại, giúp người mua không bị mất phương hướng (NN/g).

Rủi ro khi điều hướng quá phẳng

Nhận ra nhược điểm của menu sâu, một số chủ shop lại đi sang thái cực ngược lại: dàn phẳng toàn bộ catalog vào một tầng duy nhất. Họ đặt hàng chục liên kết bộ sưu tập thẳng lên trang chủ hoặc nhét một hàng dài liên kết danh mục lên header phía trên.

Tuy nhiên, bỏ hết chiều sâu cấu trúc sẽ gây ra những lỗi trải nghiệm người dùng nghiêm trọng. Như NN/g cảnh báo, “users can also become overwhelmed with long, cluttered menus” (người dùng cũng có thể bị choáng ngợp bởi các menu dài, lộn xộn) (NN/g). Khi một cửa hàng trực tuyến hiển thị một hàng dài các liên kết danh mục không có thứ tự, người mua có thể khó tìm đúng ngành hàng cụ thể.

Làm phẳng quá mức một catalog thương mại điện tử cũng gây hại cho tìm kiếm tự nhiên. John Mueller cảnh báo rằng “if it’s very flat, then we think, oh all of these are equally important” (nếu nó rất phẳng thì chúng tôi nghĩ, ồ, tất cả những trang này đều quan trọng như nhau) (Search Engine Journal). Công cụ tìm kiếm dựa vào liên kết nội bộ để hiểu thứ bậc chủ đề. Khi một cửa hàng liên kết đến mọi bộ sưu tập con trực tiếp từ header chính với mức nổi bật giống hệt nhau, sẽ khó hơn để báo hiệu bộ sưu tập nào là sản phẩm chính và bộ sưu tập nào là thứ yếu.

Trong bài viết trên Search Engine Journal, một chủ site đã hỏi Mueller về một site có mega menu với hơn 1.000 liên kết (Search Engine Journal). Bài viết không nêu điều gì đã xảy ra với site đó, vì vậy chỉ nên xem đây là ví dụ về câu hỏi mà các chủ shop hay đặt ra. Một menu liệt kê mọi bộ sưu tập với trọng số như nhau không cho biết những trang nào thuộc về cùng nhóm, và việc nhồi mọi bộ sưu tập vào menu chính đơn giản không phải là kiến trúc phẳng lành mạnh.

Figure 1: Concept illustration về một menu quá phẳng bên cạnh cấu trúc kim tự tháp.

Cấu trúc kim tự tháp: Điểm cân bằng cho phần lớn cửa hàng

Thay vì chọn giữa hai thái cực đều không hiệu quả, chủ cửa hàng sẽ có lợi khi thiết lập một điểm giữa có cấu trúc. John Mueller đã khuyến nghị rõ ràng cách tiếp cận này: “I would try to aim for more of a pyramid structure” (tôi sẽ cố hướng tới một cấu trúc kim tự tháp hơn) (Search Engine Journal). Cấu trúc kim tự tháp giúp công cụ tìm kiếm hiểu ngữ cảnh của từng trang trong site hiệu quả hơn nhiều (Search Engine Journal).

Trong một cây phân cấp kim tự tháp của thương mại điện tử, trang chủ nằm ở đỉnh. Bên dưới trang chủ là một hàng ngắn gọn các danh mục rõ ràng đại diện cho các ngành hàng chính (như “Men”, “Women” hoặc “Living Room”). Mỗi danh mục chính sau đó phân nhánh xuống các danh mục con tập trung (như “Outerwear”, “Footwear” hoặc “Lighting”), rồi cuối cùng dẫn đến từng trang sản phẩm.

Sự tương phản về hình ảnh làm nổi bật sự đánh đổi cốt lõi:

• Một kiến trúc Quá phẳng tạo ra menu dài, lộn xộn nơi mọi mục xuất hiện quan trọng như nhau, khiến khách hàng choáng ngợp và che khuất thứ bậc ngữ nghĩa.
• Một Cấu trúc kim tự tháp cân bằng nhóm sản phẩm thành các danh mục rõ ràng, giảm thiểu click depth không cần thiết đồng thời cung cấp những bước đệm logic trực quan cho người mua và bộ thu thập dữ liệu của công cụ tìm kiếm.

Như Nielsen Norman Group kết luận, không có một đáp án đúng duy nhất (NN/g), và cả hai thái cực đều có cái giá của nó. Hướng dẫn kiến trúc của Mailchimp cũng nhận xét tương tự rằng kiến trúc phẳng hơn nhìn chung hiệu quả hơn với đa số website (Mailchimp DE). Mục tiêu là tìm một cấu trúc phẳng hơn một thư mục mê cung mà không sụp thành một catalog không có cấu trúc.

Chọn độ sâu menu theo quy mô catalog

Độ sâu điều hướng lý tưởng cho cửa hàng của bạn phụ thuộc vào quy mô và độ phức tạp của catalog hàng hóa. Vì mỗi nhóm sản phẩm đặt ra những yêu cầu phân loại riêng, các chủ shop nên xem hướng dẫn dưới đây là quy tắc kinh nghiệm, không phải ngưỡng cố định.

• Catalog nhỏ (vài chục sản phẩm): Cấu trúc 1 cấp hoặc 2 cấp nhìn chung là đủ. Một cửa hàng boutique bán phụ kiện thủ công hoặc một bộ sưu tập quần áo duy nhất có thể trưng bày các dòng sản phẩm chính ngay trên header chính mà không cần menu con lồng nhau. Người mua có thể quét nhanh các mặt hàng hiện có, và click depth vẫn thấp.
• Catalog cỡ vừa (vài trăm sản phẩm): Cây phân cấp 2 cấp thường hoạt động tốt. Các danh mục cấp cao chia các mảng sản phẩm lớn, còn các liên kết cấp hai trỏ đến những bộ sưu tập con được tuyển chọn, giúp lọc theo chủ đề rõ ràng mà không làm người mua mất phương hướng.
• Catalog lớn (hàng nghìn sản phẩm): Hàng tồn kho mở rộng đòi hỏi tận dụng đầy đủ giới hạn menu 3 cấp của Shopify, kết hợp với bộ lọc bộ sưu tập ngay trên trang và các trang đích danh mục riêng. Việc lập kế hoạch kiến trúc chi tiết là thiết yếu khi mở rộng; hãy xem các hướng dẫn chuyên sâu của chúng tôi về cách tổ chức catalog 1.000+ sản phẩm và cách điều hướng thay đổi khi catalog lớn dần để có các khung phân loại có cấu trúc.

Điều hướng sâu trên di động: Drawer, tab bar và các cấp thu gọn

Giữ một cây phân cấp trực quan đặc biệt quan trọng trên màn hình di động, nơi không gian hiển thị bị hạn chế. Trên điện thoại thông minh, điều hướng nhiều tầng thường dựa vào các drawer trượt ra dùng nút accordion hoặc các bảng drill-down lũy tiến (để xem phân tích các mẫu, hãy xem các bài đánh giá của chúng tôi về mẫu menu nhiều cấp trên Shopify và thiết kế menu drawer trên di động).

Một trở ngại lớn về khả năng sử dụng trong menu drill-down trên di động là cho phép người mua khám phá toàn bộ một danh mục cha. Khi người mua chạm vào “Men’s Apparel” và đi vào các danh mục con như “Shirts” và “Jackets”, họ thường muốn xem toàn bộ trang phục nam cùng lúc. Các chuẩn đối sánh về khả năng sử dụng thương mại điện tử của Baymard Institute cho thấy chỉ 24% site làm tốt điều này (Baymard), bằng cách cung cấp một liên kết “View All” riêng ở đầu mỗi cấp menu lồng nhau.

Khi đối mặt với hạn chế không gian trên di động, một số cửa hàng cố đơn giản hóa header di động bằng cách loại bỏ hoàn toàn các danh mục con cấp thấp. Baymard cảnh báo chống lại sự thỏa hiệp này, nhấn mạnh rằng việc bỏ các cấp thấp hơn trên di động là một cách triển khai UX di động kém (Baymard). Bỏ các danh mục con khiến người mua trên điện thoại mất các lối điều hướng chi tiết, buộc họ phải lục tìm trong những lưới bộ sưu tập quá tải. Ngoài ra, tài liệu Shopify Help lưu ý rằng một số theme có thể cần điều chỉnh CSS để cải thiện khả năng sử dụng trên di động (Shopify Help).

Để giảm click depth trên di động mà không làm phẳng cây danh mục, một tab bar ở đáy màn hình có thể đóng vai trò lối tắt. Một thanh luôn hiển thị cho phép chạm một lần để vào một bộ sưu tập chính hoặc một bộ sưu tập lồng sâu, trong khi cây danh mục bên dưới giữ nguyên.

Figure 2: Concept illustration về drawer drill-down với mục View All và lối tắt tab bar.

Dùng mega menu để giảm độ sâu mà không gây rối

Với người mua trên desktop, một mega menu được thiết kế tốt là cách thực tế để giảm click depth mà vẫn giữ tổ chức phân cấp mạnh. Thay vì buộc người dùng đi qua các menu bung lồng nhau từng cấp một, mega menu hiển thị đồng thời các liên kết cấp hai và cấp ba trên một bảng hai chiều rộng rãi.

Hiệu quả của mega menu nằm ở việc nhóm trực quan có cấu trúc. Thay vì trình bày một danh sách liên kết chưa được tuyển chọn có nguy cơ làm khách choáng ngợp (NN/g) hoặc một mega menu với hơn 1.000 liên kết như trong câu hỏi trên Search Engine Journal (Search Engine Journal), một mega menu gọn gàng sắp xếp các liên kết vào những cột cân đối dưới các tiêu đề danh mục riêng biệt, có thể nhấp hoặc không. Điều này cho phép người mua quét toàn bộ bề rộng của một ngành hàng chỉ trong một lần tương tác mà vẫn giữ cấu trúc kim tự tháp hợp lý.

Trên di động, cùng nội dung đó thường phải được trình bày dưới dạng drawer drill-down hoặc accordion thu gọn thay vì một bảng rộng. Để có ý tưởng về bố cục và cách nhóm cột, hãy xem hướng dẫn của chúng tôi về thực hành tốt nhất cho mega menu.

Cách đo click depth và thử nghiệm thay đổi

Thay đổi cấu trúc điều hướng của cửa hàng sẽ thay đổi cách người mua và bộ thu thập dữ liệu tìm thấy các trang của bạn. Để tối ưu cây phân cấp một cách an toàn mà không làm gián đoạn hiệu suất hiện có, hãy làm theo khung đánh giá năm bước có cấu trúc sau:

1. Rà soát các sản phẩm bán chạy nhất: Xác định 10 mặt hàng bán chạy nhất trong Shopify analytics. Đi đến từng sản phẩm từ trang chủ như một khách truy cập lần đầu, đếm chính xác số lần nhấp hoặc chạm cần thiết. Nếu các sản phẩm bán chạy nhất nằm cách xa nhiều cú nhấp, hãy cân nhắc thêm liên kết bộ sưu tập con trực tiếp hoặc lối tắt.
2. Xác minh các liên kết HTML có thể thu thập dữ liệu: Bảo đảm mọi trang quan trọng đều có một liên kết từ ít nhất một trang khác trên site của bạn (Google Search Central). Xác minh rằng các liên kết điều hướng được hiển thị dưới dạng thẻ HTML <a> có thể thu thập dữ liệu với đích href hợp lệ (Google Search Central), thay vì các sự kiện nhấp JavaScript mà công cụ tìm kiếm có thể không lần theo được.
3. Tiến hành tree testing nhẹ: Trước khi đại tu theme đang chạy, hãy chạy một bài tree test ngắn với một nhóm nhỏ đồng nghiệp hoặc khách hàng. Như nghiên cứu về khả năng sử dụng chỉ ra, tree testing giúp kiểm chứng cấu trúc site bằng cách để người dùng thử tìm thông tin trong cây phân cấp được đề xuất (NN/g).
4. Thử nghiệm trên một bộ sưu tập trước: Thay vì tái cấu trúc toàn bộ catalog chỉ sau một đêm, hãy điều chỉnh một ngành hàng chính. Giữ nguyên các handle bộ sưu tập và URL sản phẩm hiện có—cập nhật liên kết điều hướng không làm thay đổi URL chuẩn của trang. Theo dõi lượt hiển thị, tỷ lệ nhấp và mức độ phủ chỉ mục trong Google Search Console trong vài tuần để đánh giá tác động trước khi triển khai các cập nhật ra toàn cửa hàng.
5. Xem quy tắc ba cú nhấp là hướng dẫn không chính thức: Hãy nhớ rằng “quy tắc ba cú nhấp” được trích dẫn rộng rãi chỉ là một quy tắc kinh nghiệm thực tế, không phải tiêu chí xếp hạng tìm kiếm nghiêm ngặt hay quy luật khoa học về khả năng sử dụng. John Mueller của Google lưu ý rằng công cụ tìm kiếm tìm kiếm một số lượng cú nhấp hợp lý (Search Engine Journal), tập trung vào tính kết nối logic hơn là giới hạn cứng về số cú nhấp.

Đánh đổi: Khi nào menu sâu hơn là lựa chọn đúng

Dù cấu trúc điều hướng phẳng hơn có lợi cho đa số cửa hàng bán trực tiếp đến người tiêu dùng, vẫn có những tình huống bán lẻ rõ ràng mà cây phân cấp sâu hơn là giải pháp vượt trội và thực tế hơn.

Các cửa hàng xử lý hàng tồn kho mang tính kỹ thuật cao hoặc phân loại dày đặc, chẳng hạn phụ tùng thay thế ô tô được sắp xếp theo hãng, mẫu, năm và loại động cơ, có thể cần những lối đi phân cấp sâu hơn. Cố ép một catalog phức tạp vào menu phẳng 1 cấp hoặc 2 cấp sẽ tạo ra những danh sách không thể quản lý, gây bực bội cho người mua đang tìm sản phẩm tương thích cụ thể.

Một kiến trúc điều hướng sâu hơn thành công khi được hỗ trợ bởi breadcrumbs rõ ràng hiển thị liên kết cho mỗi cấp từ trang chủ đến trang hiện tại (NN/g). Ngược lại, làm phẳng quyết liệt một catalog kỹ thuật sâu sẽ làm mất các mối quan hệ ngữ nghĩa quan trọng, làm loãng sự hiểu biết về ngữ cảnh mà công cụ tìm kiếm dựa vào (Search Engine Journal).

Vì Shopify áp một mức trần cứng 3 cấp trong các linklist của Liquid (Shopify Dev Docs), các chủ shop quản lý dòng sản phẩm phức tạp nên dùng bộ lọc bộ sưu tập theo facet và các thẻ lưới bộ sưu tập con để xử lý thêm độ sâu. Cuối cùng, như nghiên cứu của NN/g khẳng định, không có một đáp án đúng duy nhất cho mọi website (NN/g), và cây phân cấp tối ưu phải phản ánh thói quen tìm kiếm cụ thể của đối tượng khách hàng của bạn.

Navi+ phù hợp ở đâu

Nếu theme Shopify hiện tại hạn chế khả năng xây một cấu trúc điều hướng kim tự tháp gọn gàng, Navi+ cho phép bạn dựng các thành phần điều hướng riêng ở bên trên theme. Menu Navi+ giới hạn ở ba cấp, bằng mức trần của menu Shopify.

Navi+ tập trung vào các thành phần điều hướng thực tế cho storefront:

• Mobile Menu: Một drawer di động với tối đa ba cấp. Bạn có thể thêm một mục “View All” ở đầu mỗi cấp như bất kỳ mục menu nào khác.
• Tab Bar: Một thanh ở đáy màn hình cho lối tắt một chạm đến các bộ sưu tập quan trọng nhất hoặc sâu nhất của bạn, giảm click depth mà không thay đổi cây danh mục.
• Desktop & Mobile Mega Menu: Các bảng nhiều cột nhóm liên kết dưới các tiêu đề thay vì một danh sách dài. Một Mobile Menu có thể nhúng cây của một Desktop Mega Menu, nên desktop và di động dùng chung một cấu trúc.
• Icon Menu: Các ô dựa trên hình ảnh hoạt động như điểm vào trực quan đến các danh mục chính của bạn.

Nếu menu của theme không thể hiển thị cấu trúc bạn đã lên kế hoạch, Navi+ cho phép bạn dựng Mobile Menu, Tab Bar hoặc Mega Menu ở bên trên theme, trong cùng ba cấp đó — hãy thử trên một bộ sưu tập trước.

Danh sách việc cần làm

• Đo click depth từ trang chủ đến 10 sản phẩm bán chạy nhất của bạn.
• Kiểm tra cài đặt theme đang dùng để xác nhận nó hỗ trợ bao nhiêu cấp menu lồng nhau (hầu hết hỗ trợ tối đa 2 cấp lồng nhau).
• Cấu trúc điều hướng cấp cao thành một cây phân cấp kim tự tháp cân bằng với các danh mục cha rõ ràng.
• Bảo đảm menu drawer trên di động có liên kết “View All” hiển thị ở đầu mỗi tầng lồng nhau.
• Triển khai các lối tắt trực tiếp (như tab bar cố định ở đáy hoặc breadcrumbs) cho các bộ sưu tập lồng sâu.
• Thử các thay đổi cấu trúc trên một bộ sưu tập trước, giữ nguyên các URL hiện có.
• Theo dõi lượt hiển thị và việc lập chỉ mục trong Search Console trong vài tuần để thấy hiệu quả.

Câu hỏi thường gặp

Menu Shopify nên có bao nhiêu cấp?

Menu Shopify cho phép tối đa 3 cấp trong các linklist của Liquid, và hầu hết theme hỗ trợ tối đa hai cấp thả xuống lồng nhau bên dưới các mục cấp cao nhất. Đa số cửa hàng làm tốt khi giữ trong cấu trúc 3 cấp này.

Mọi sản phẩm có nên nằm trong vòng ba cú nhấp không?

Ý tưởng ba cú nhấp là một quy tắc kinh nghiệm, không phải quy luật đã được chứng minh. Google chỉ yêu cầu một số lượng cú nhấp hợp lý và mọi trang quan trọng đều được liên kết từ ít nhất một trang khác trên site.

Cấu trúc site phẳng có tốt hơn cho SEO không?

Không tự động. John Mueller chỉ ra rằng một site rất phẳng khiến mọi trang trông quan trọng như nhau với công cụ tìm kiếm và khuyến nghị hướng tới một cấu trúc kim tự tháp cân bằng.

Mega menu lớn có thể gây hại cho SEO không?

Nó có thể làm mờ thứ bậc nếu triển khai kém. Trường hợp được thảo luận trên Search Engine Journal xét một mega menu với hơn 1.000 liên kết; nhóm các liên kết vào những cột hợp lý và giữ menu theo các đường dẫn danh mục thực giúp giữ thứ bậc rõ ràng.

Menu sâu nên hoạt động thế nào trên di động?

Giữ các tầng danh mục cần thiết bằng drawer drill-down hoặc accordion, nhưng thêm một mục “View All” hiển thị ở mỗi cấp. Nghiên cứu về khả năng sử dụng của Baymard cho thấy việc bỏ các cấp thấp hơn trên di động là một cách triển khai UX kém.

Nguồn tham khảo

• Nielsen Norman Group (Kathryn Whitenton, 2013): Flat vs. Deep Website Hierarchies
• Search Engine Journal (Roger Montti, trích lời John Mueller, 2021): John Mueller Recommends Pyramid Site Structure
• Shopify Help Center: Drop-down menus in Shopify
• Shopify Developer Documentation: Liquid linklist object
• Google Search Central: Creating crawlable links
• Baymard Institute: Mobile navigation ‘View All’ usability research
• Fresh Consulting: UI/UX Principle #23: Flatter Navigation is Better Than Deeper Navigation
• Mailchimp (DE): Website-Architektur optimieren