Giới hạn độ sâu 3 cấp trong các theme Shopify: tại sao nó tồn tại và cách vượt qua

Bạn đang sắp xếp menu cho một cửa hàng quần áo và cố gắng tạo một đường dẫn như: Nữ → Áo trên → Áo blouse → Tay dài. Đó là một hệ thống phân cấp logic phản ánh cách khách hàng suy nghĩ về các sản phẩm của bạn. Bạn xây dựng nó trong admin điều hướng Shopify, cẩn thận lồng các cấp độ vào nhau. Sau đó, bạn xem trước menu trên cửa hàng của mình và phát hiện ra rằng “Tay dài” không xuất hiện. Cấp độ thứ tư đơn giản là biến mất.

Đây không phải là lỗi trong theme của bạn. Đó là một giới hạn cứng trong kiến trúc menu của Shopify: tối đa ba cấp độ. Dù bạn sử dụng theme nào — Dawn, Prestige, Impulse, hay một theme được xây dựng tùy chỉnh — chính nền tảng này cũng giới hạn lồng menu ở ba cấp độ sâu. Đối với các cửa hàng có danh mục phức tạp, ràng buộc này buộc phải thỏa hiệp, làm ảnh hưởng đến khả năng khám phá.

Tại sao Shopify thực thi giới hạn 3 cấp

Ràng buộc ba cấp độ không phải là tùy ý — nó phản ánh một triết lý thiết kế dựa trên nghiên cứu khả năng sử dụng. Nghiên cứu của Nielsen Norman Group liên tục chỉ ra rằng các hệ thống phân cấp điều hướng sâu tăng tải nhận thức và khiến người dùng khó hình thành mô hình tinh thần về cấu trúc trang web. Hướng dẫn cổ điển cho điều hướng web là “ba lần nhấp đến bất kỳ trang nào”, và hệ thống menu của Shopify thực thi điều này ở cấp độ kiến trúc.

Từ góc độ kỹ thuật, đối tượng menu của Shopify được lưu trữ dưới dạng một cấu trúc dữ liệu lồng nhau đơn giản trong cơ sở dữ liệu nền tảng. Mỗi mục menu có thể có con, và các con đó có thể có con, nhưng cấu trúc dừng lại ở đó. Điều này giữ cho mô hình dữ liệu đơn giản và đảm bảo hành vi nhất quán trên các theme. Nếu Shopify cho phép lồng nhau không giới hạn, các theme sẽ cần xử lý đệ quy tùy ý trong các mẫu Liquid của chúng, tạo ra độ phức tạp về hiệu suất và kết xuất.

Giới hạn ba cấp độ cũng ánh xạ tốt với các mô hình điều hướng phổ biến. Một mega menu điển hình hiển thị:

• Cấp 1: Các danh mục cấp cao nhất trong thanh nav ngang (Nữ, Nam, Trẻ em)
• Cấp 2: Các danh mục con trong danh sách thả xuống (Áo trên, Áo dưới, Phụ kiện)
• Cấp 3: Các loại sản phẩm cụ thể trong mỗi danh mục con (Áo thun, Áo blouse, Áo hai dây)

Đối với nhiều cửa hàng, cấu trúc này là đủ. Một cửa hàng boutique với 50 sản phẩm trên 5 danh mục hiếm khi cần lồng nhau sâu hơn. Giới hạn trở thành vấn đề chỉ khi danh mục của bạn vượt quá mô hình này.

Khi nào bạn thực sự cần nhiều hơn 3 cấp

Không phải mọi cửa hàng đều cần điều hướng sâu. Nếu bạn thấy mình muốn cấp độ thứ tư hoặc thứ năm, điều đáng để hỏi là liệu sự phức tạp có được biện minh không. Nhưng có những tình huống hợp lệ khi ba cấp không đủ:

Các cửa hàng thời trang và quần áo có nhiều thuộc tính sản phẩm. Một cửa hàng quần áo có thể hợp lý muốn: Nữ → Áo trên → Áo blouse → Tay dài → Bình thường. Đó là năm cấp độ, phản ánh giới tính, loại quần áo, phong cách, độ dài tay áo và dịp sử dụng. Làm phẳng điều này thành ba cấp độ có nghĩa là kết hợp thuộc tính (Áo blouse tay dài bình thường) hoặc chia nhỏ chúng trên các phần menu khác nhau.

Các cửa hàng điện tử và công nghệ có phân cấp kỹ thuật. Một cửa hàng phụ tùng máy tính có thể cần: Thành phần → Lưu trữ → Ổ cứng nội bộ → SSD → NVMe → PCIe Gen 4. Mỗi cấp độ đại diện cho một sự phân biệt có ý nghĩa giúp những người mua công nghệ điều hướng đến danh mục sản phẩm chính xác.

Các cửa hàng phụ tùng ô tô có điều hướng dựa trên phương tiện. Phụ tùng ô tô thường được sắp xếp theo: Hãng → Mẫu → Năm → Hệ thống → Thành phần. Đó là năm cấp độ trước khi bạn thậm chí đến các sản phẩm riêng lẻ. Lựa chọn khác là buộc khách hàng sử dụng công cụ chọn phương tiện, điều này hoạt động nhưng tạo thêm ma sát so với điều hướng trực tiếp qua menu.

Các cửa hàng B2B và bán buôn có phân loại sản phẩm phức tạp. Các cửa hàng cung cấp công nghiệp, nhà cung cấp thiết bị phòng thí nghiệm và các hoạt động B2B tương tự thường có phân loại sản phẩm sâu, chuẩn hóa phù hợp với thuật ngữ ngành. Làm phẳng các danh mục này khiến người mua chuyên nghiệp khó tìm thấy những gì họ cần một cách nhanh chóng.

Bài kiểm tra là liệu mỗi cấp độ lồng nhau có đại diện cho một sự phân biệt có ý nghĩa mà khách hàng của bạn sử dụng khi suy nghĩ về sản phẩm không. Nếu cấp độ thứ tư sẽ thực sự giúp người mua thu hẹp sản phẩm nhanh hơn, bạn cần nó. Nếu nó chỉ là sự hoàn hảo về tổ chức, bạn có thể sống sót với ba cấp độ.

Các giải pháp thay thế phổ biến và lý do chúng không hoạt động tốt

Những chủ cửa hàng gặp phải giới hạn độ sâu thường cố gắng một trong những giải pháp thay thế này, mỗi giải pháp đều có những bất lợi đáng kể:

Làm phẳng hệ thống phân cấp bằng cách kết hợp các cấp độ. Thay vì Nữ → Áo trên → Áo blouse → Tay dài, bạn tạo Nữ → Áo blouse tay dài. Điều này giữ bạn trong ba cấp độ nhưng tạo ra sự bùng nổ của các danh mục được xác định hẹp. Menu của bạn trở thành một danh sách dài, khó quản lý, và bạn mất nhóm logic khiến hệ thống phân cấp sâu hơn trở nên hữu ích.

Tạo các mục menu trùng lặp ở các cấp độ khác nhau. Bạn có thể đặt “Áo blouse tay dài” cả dưới Nữ → Áo trên và trực tiếp dưới Nữ dưới dạng danh mục độc lập. Điều này giữ các danh mục quan trọng có thể truy cập được nhưng tạo ra những đau đầu về bảo trì — mỗi khi bạn thêm một sản phẩm vào bộ sưu tập, bạn cần kiểm tra xem tất cả các liên kết trùng lặp có vẫn hợp lý không. Nó cũng làm bối rối người mua khi họ thấy cùng một danh mục ở nhiều nơi.

Sử dụng mô tả mega menu hoặc hình ảnh để hiển thị các danh mục sâu hơn. Một số theme cho phép bạn thêm văn bản mô tả hoặc liên kết hình ảnh bên trong các bảng điều khiển mega menu. Bạn có thể liệt kê các danh mục cấp độ thứ tư của mình dưới dạng các liên kết được tạo kiểu trong danh sách thả xuống cấp 3. Điều này về mặt kỹ thuật hoạt động nhưng phá vỡ hệ thống phân cấp trực quan — người mua không thể biết liên kết nào là các danh mục đồng cấp và liên kết nào là danh mục con. Nó cũng yêu cầu HTML tùy chỉnh trong trường mô tả menu, điều mà hầu hết chủ cửa hàng thấy tẻ nhạt khi bảo trì.

Đẩy các danh mục sâu hơn sang các trang bộ sưu tập. Bạn làm phẳng menu thành ba cấp độ và dựa vào bộ lọc trang bộ sưu tập hoặc lưới danh mục để hiển thị cấp độ thứ tư. Điều này hoạt động để khám phá nhưng thêm tải trang bổ sung giữa menu và sản phẩm. Người mua biết chính xác những gì họ muốn (ví dụ: “Áo blouse tay dài bình thường”) phải nhấp qua Nữ → Áo trên → Áo blouse, sau đó quét lưới danh mục con hoặc sử dụng bộ lọc để thu hẹp thêm. Mỗi bước bổ sung đều tốn chi phí chuyển đổi.

Loại bỏ hoàn toàn các danh mục lồng nhau và dựa vào tìm kiếm hoặc bộ lọc. Một số cửa hàng từ bỏ điều hướng menu sâu hoàn toàn và đầu tư mạnh vào tìm kiếm và lọc. Điều này có thể hoạt động cho các cửa hàng có người dùng am hiểu về công nghệ, nhưng nghiên cứu từ Baymard Institute cho thấy rằng 69% người dùng chủ yếu dựa vào menu điều hướng, không phải tìm kiếm. Hầu hết người mua thích duyệt danh mục thay vì xây dựng truy vấn tìm kiếm, đặc biệt là khi họ không chắc chắn chính xác họ đang tìm kiếm cái gì.

Tất cả các giải pháp thay thế này đều tạo ra ma sát. Chúng hoặc thêm nhấp chuột bổ sung, lộn xộn menu, phức tạp bảo trì, hoặc buộc người mua phải học một mô hình điều hướng không tiêu chuẩn. Vấn đề sâu hơn là bạn đang chống lại các ràng buộc của nền tảng thay vì giải quyết trực tiếp vấn đề điều hướng của mình.

Cách các ứng dụng menu vượt qua giới hạn 3 cấp

Các ứng dụng menu không sử dụng đối tượng menu gốc của Shopify. Thay vào đó, chúng hiển thị điều hướng động bằng JavaScript, kéo dữ liệu từ đối tượng menu của Shopify (và mở rộng nó bằng logic của riêng họ) hoặc từ một cấu trúc dữ liệu riêng được quản lý trong ứng dụng.

Đây là cách nó hoạt động về mặt kỹ thuật:

Ứng dụng đọc menu Shopify của bạn dưới dạng nguồn dữ liệu. Bạn vẫn tạo menu của mình trong admin điều hướng Shopify — điều này giữ cấu trúc danh mục của bạn ở một nơi và làm cho nó dễ quản lý. Nhưng khi ứng dụng hiển thị menu trên cửa hàng của bạn, nó không bị giới hạn bởi giới hạn ba cấp độ của Shopify. Ứng dụng có thể đọc siêu dữ liệu bổ sung (thẻ, metafield hoặc bảng ánh xạ riêng) để xây dựng hệ thống phân cấp sâu hơn.

Ứng dụng hiển thị menu bằng HTML và JavaScript tùy chỉnh. Thay vì dựa vào các mẫu Liquid của theme để xuất danh sách <ul> lồng nhau, ứng dụng sẽ chèn đánh dấu của riêng nó. Điều này cung cấp cho nó toàn quyền kiểm soát cấu trúc và tạo kiểu, bao gồm khả năng hiển thị 4, 5 hoặc 6 cấp độ lồng nhau nếu cần.

Ứng dụng xử lý các trạng thái tương tác độc lập. Khi người mua di chuột hoặc chạm vào một mục menu, JavaScript của ứng dụng quản lý hành vi danh sách thả xuống. Điều này cho phép tương tác tinh vi hơn — chẳng hạn như hiển thị đường dẫn breadcrumb cho các danh mục sâu hoặc triển khai các bảng điều khiển trượt tiết lộ các danh mục con dần dần.

Ví dụ, Navi+ AI Menu Builder cho phép bạn ánh xạ các bộ sưu tập và trang Shopify thành cấu trúc menu có độ sâu không giới hạn. Bạn xác định hệ thống phân cấp trong giao diện quản lý của Navi+, và ứng dụng hiển thị nó dưới dạng mega menu, slide menu hoặc tab bar tùy thuộc vào cấu hình của bạn. Đối tượng menu Shopify cơ bản vẫn đơn giản (thường chỉ các danh mục cấp cao nhất), trong khi ứng dụng bổ sung cấu trúc sâu hơn.

Sự đánh đổi là menu không còn được quản lý hoàn toàn trong admin gốc của Shopify. Bạn cần định cấu hình các cấp độ sâu hơn trong giao diện của ứng dụng, điều này thêm một nguồn sự thật thứ hai cho điều hướng của bạn. Nếu bạn thay đổi tên bộ sưu tập trong Shopify, bạn cũng có thể cần cập nhật nó trong ứng dụng. Các ứng dụng được thiết kế tốt giảm thiểu điều này bằng cách đồng bộ hóa tự động với các bộ sưu tập Shopify, nhưng nó vẫn là một lớp bổ sung để quản lý.

Mẹo di chuyểnNếu bạn chuyển từ menu theme sang ứng dụng, hãy bắt đầu bằng cách sao chép cấu trúc 3 cấp độ hiện tại của bạn trong ứng dụng trước tiên. Kiểm tra kỹ lưỡng, sau đó chỉ thêm cấp độ thứ tư nếu thực sự cần thiết. Cách tiếp cận phân giai đoạn này ngăn ngừa hỗn loạn điều hướng.

Chọn độ sâu phù hợp cho menu của bạn

Chỉ vì ứng dụng cho phép bạn lồng nhau 6 cấp độ không có nghĩa là bạn nên làm vậy. Mỗi cấp độ bổ sung thêm tải nhận thức và làm cho menu chậm hơn khi quét. Đây là một khuôn khổ thực tiễn:

4 cấp độ rất hữu ích cho hầu hết các danh mục phức tạp. Nếu bạn cần nhiều hơn ba cấp độ, bạn có thể cần bốn. Điều này cung cấp cho bạn một lớp độ chính xác bổ sung mà không quá tải cho người mua. Ví dụ: Nữ → Áo trên → Áo blouse → Tay dài. Điều đó cụ thể đủ để hữu ích nhưng vẫn có thể quét được.

5 cấp độ phù hợp cho những người mua kỹ thuật hoặc chuyên nghiệp. Nếu khách hàng của bạn là chuyên gia lĩnh vực (thợ máy ô tô, nhà mua CNTT, kỹ thuật viên phòng thí nghiệm), họ thoải mái với hệ thống phân cấp sâu hơn vì chúng ánh xạ đến phân loại tiêu chuẩn ngành. Trong những trường hợp này, cấp độ thứ năm giảm bớt sự mơ hồ và tăng tốc độ khám phá sản phẩm.

6+ cấp độ hiếm khi được biện minh. Nếu bạn thấy mình muốn sáu cấp độ trở lên, đó là tín hiệu rằng cấu trúc danh mục của bạn có thể quá chi tiết. Hãy xem xét liệu một số cấp độ đó có thể là bộ lọc hoặc thẻ trên trang bộ sưu tập thay thế không. Lọc faceted thường là một giải pháp tốt hơn so với điều hướng siêu sâu vì nó cho phép người mua kết hợp các thuộc tính (ví dụ: Tay dài + Bình thường + Dưới $50) theo những cách mà hệ thống phân cấp cố định không thể hỗ trợ.

Mục tiêu là phù hợp độ sâu với mô hình tinh thần của khách hàng. Nếu bạn không chắc chắn liệu cấp độ thứ tư có hữu ích không, hãy kiểm tra. Thiết lập điều hướng sâu hơn trong một ứng dụng menu, sau đó xem các bản ghi phiên (sử dụng công cụ như Hotjar hoặc Microsoft Clarity) để xem người mua có thực sự sử dụng cấp độ bổ sung không hay họ dừng lại ở Cấp 3 và sử dụng bộ lọc thay thế.

Ví dụ thực tế: các cửa hàng cần điều hướng sâu hơn

Ví dụ 1: Cửa hàng thời trang đa thương hiệu. Một cửa hàng Shopify Plus bán hơn 40 thương hiệu quần áo muốn sắp xếp theo Thương hiệu → Giới tính → Danh mục → Danh mục con. Đó là bốn cấp độ (ví dụ: Nike → Nữ → Áo trên → Áo thể thao). Giới hạn cấp độ thứ ba buộc họ phải bỏ qua cấp độ giới tính (Thương hiệu → Danh mục → Danh mục con) hoặc bỏ qua cấp độ danh mục con. Cả hai tùy chọn đều ảnh hưởng đến trải nghiệm người dùng — tùy chọn đầu tiên vì giới tính là bộ lọc chính cho người mua quần áo, tùy chọn thứ hai vì nó buộc quá nhiều sản phẩm vào các danh mục rộng. Họ triển khai một ứng dụng menu với bốn cấp độ, và rõ ràng điều hướng đã cải thiện đáng kể.

Ví dụ 2: Cửa hàng điện tử có các danh mục kỹ thuật. Một nhà bán lẻ phụ tùng máy tính cần: Thành phần → Lưu trữ → Ổ cứng nội bộ → SSD → Form Factor. Cấp độ thứ năm (Form Factor: M.2, 2.5”, U.2) rất cần thiết vì mỗi form factor không tương thích về mặt vật lý với các cái khác. Người mua cần SSD M.2 không thể sử dụng ổ đĩa 2.5”, do đó việc gom chúng vào một danh mục “SSD” duy nhất buộc khách hàng phải đọc thông số kỹ thuật sản phẩm để xác định tính tương thích. Một ứng dụng menu có điều hướng năm cấp độ cho phép họ hiển thị form factor trực tiếp trong menu, giảm lợi suất và vé hỗ trợ.

Ví dụ 3: Cửa hàng phụ tùng ô tô. Một cửa hàng phụ tùng ô tô thay thế được sắp xếp theo Hãng → Mẫu → Năm → Hệ thống → Thành phần. Nếu không có điều hướng sâu, họ phải dựa vào tiện ích chọn phương tiện yêu cầu người mua nhập thông tin phương tiện của họ trước khi xem bất kỳ sản phẩm nào. Điều này tạo thêm ma sát cho khách hàng quay lại đã biết những gì họ cần. Bằng cách triển khai menu năm cấp độ, họ đã cung cấp cho khách hàng có kinh nghiệm một con đường trực tiếp đến thành phần đúng trong khi vẫn cung cấp tiện ích chọn phương tiện cho người mua lần đầu.

Trong mỗi trường hợp, điều hướng sâu hơn không phải là về việc thêm độ phức tạp vì nó tự nó — nó là về phản ánh quy trình ra quyết định trong thế giới thực mà người mua sử dụng khi tìm sản phẩm. Khi menu phù hợp với cách khách hàng suy nghĩ, điều hướng trở nên vô hình, và tỷ lệ chuyển đổi được cải thiện.

Bài viết này là một phần của hướng dẫn lớn hơn về Hạn chế menu theme Shopify: khi nào nên sử dụng ứng dụng menu thay vì.