Một menu điều hướng máy tính được tạo trong ứng dụng menu chỉ thực sự hiệu quả khi có kế hoạch rõ ràng phía sau. Khi bạn phác thảo một cây ba cấp, dựng các cột thay vì danh sách dài vô tận, chủ động chọn mở khi di chuột hay nhấp chuột, và xuất bản menu vào đúng vị trí trên header, danh mục sản phẩm của bạn sẽ trở nên vô cùng dễ khám phá.
Đối với các chủ cửa hàng quản lý lượng sản phẩm ngày càng tăng, một thanh menu ngang có cấu trúc tốt sẽ mang lại khả năng định hướng rõ ràng. Khách hàng không bao giờ phải đoán xem sản phẩm nằm ở đâu hay chật vật lướt qua những danh sách chật chội. Bằng cách sắp xếp các cột gọn gàng bên dưới header, bạn giúp người mua tiếp cận trực quan ngay các bộ sưu tập trên desktop.
Câu trả lời nhanh: cách tạo menu điều hướng máy tính trong ứng dụng menu Shopify
Để tạo menu điều hướng máy tính trong ứng dụng menu Shopify, hãy lên kế hoạch cây menu tối đa ba cấp, bật app embed trong theme của bạn, tạo các mục cấp 1 và các cột thả xuống, chọn mở khi di chuột hoặc nhấp chuột, sau đó xuất bản bên dưới hoặc thay thế menu header của theme và kiểm tra mọi độ rộng màn hình.
- Lên kế hoạch cây menu: Phác thảo tối đa ba cấp trên giấy trước khi mở ứng dụng.
- Bật app embed: Bật app embed Store Connector trong trình chỉnh sửa theme Shopify.
- Thêm các mục cấp 1: Tạo Desktop Mega Menu và thiết lập các liên kết ngang chính.
- Dựng các cột thả xuống: Bật chế độ nhiều cột, đặt độ rộng cột và cân đối liên kết.
- Xuất bản dưới header và kiểm tra: Chọn Insert After hoặc Replace và kiểm tra độ rộng máy tính.
Phần còn lại của hướng dẫn này sẽ đi qua từng bước trong Navi+, cùng các lỗi thường gặp trong thực tế.
Những gì một ứng dụng menu bổ sung cho menu máy tính của Shopify
Shopify cung cấp nền tảng điều hướng sẵn có rất đáng tin cậy, nhưng các tùy chọn bố cục phụ thuộc nhiều vào theme của bạn. Theo tài liệu chính thức từ Shopify Help Center, một mục menu cấp cao nhất có thể có tối đa hai cấp menu thả xuống lồng nhau. Shopify cũng lưu ý rằng menu chính và các menu thả xuống hiển thị ở những vị trí khác nhau trên cửa hàng tùy thuộc vào theme của bạn.
Một số theme Shopify tích hợp sẵn tính năng mega menu riêng. Nếu theme hiện tại của bạn đã cung cấp bố cục nhiều cột đáp ứng đủ nhu cầu trưng bày, việc sử dụng trực tiếp tính năng của theme là lựa chọn đơn giản và thiết thực nhất. Video hướng dẫn dưới đây minh họa lộ trình chỉ dùng theme:
Nếu theme của bạn đã có sẵn mega menu, video hướng dẫn này sẽ chỉ ra cách thiết lập chỉ bằng theme.
Tuy nhiên, khi danh mục sản phẩm mở rộng qua nhiều ngành hàng, menu mặc định của theme thường bộc lộ sự gò bó. Một ứng dụng menu chuyên dụng sẽ bổ sung nhiều khả năng bố cục thiết thực:
- Đặt độ rộng riêng cho từng cột trên hệ thống lưới 12 cột linh hoạt.
- Thêm các thẻ hình ảnh bộ sưu tập và banner trực tiếp vào bên trong khung thả xuống.
- Quyền chủ động kiểm soát giữa cơ chế mở khi di chuột (hover) và mở khi nhấp chuột (click).
- Kiểm soát vị trí gắn menu chính xác để đặt thanh menu phía trên, bên trong hoặc ngay dưới header.
Nghiên cứu về trải nghiệm người dùng từ Nielsen Norman Group chỉ ra rằng bố cục mega menu hai chiều giúp khách truy cập nhìn thấy toàn bộ các lựa chọn có sẵn cùng lúc, thay vì buộc họ phải ghi nhớ các mục ẩn sâu trong các danh sách thả xuống dạng tầng. Để hiểu rõ giới hạn của giải pháp mặc định trước khi cài đặt công cụ bên thứ ba, hãy đọc bài phân tích của chúng tôi về những giới hạn của menu theme Shopify tích hợp sẵn.
Lên kế hoạch cây menu trước: cấp 1, các cột và liên kết
Sai lầm phổ biến nhất của các chủ shop là mở ngay ứng dụng tạo menu trước khi quyết định cấu trúc thông tin. Khi không có kế hoạch rõ ràng, mega menu sẽ nhanh chóng trở nên lộn xộn và gây bối rối cho khách hàng. Hãy phác thảo cấu trúc điều hướng trên giấy hoặc bảng tính theo mô hình cây ba cấp chuẩn mực:
- Cấp 1 (Thanh ngang trên cùng): Các liên kết ngang chính hiển thị trực tiếp trên header. Hãy hướng tới 5 đến 7 mục để thanh menu nằm vừa vặn trên màn hình laptop mà không bị rớt xuống dòng thứ hai.
- Cấp 2 (Các cột thả xuống): Tiêu đề các cột xuất hiện khi người mua mở một mục menu. Hãy nhóm các tiêu đề này theo hành vi mua sắm của khách: theo loại sản phẩm, theo đối tượng người dùng, hoặc theo dịp mua sắm.
- Cấp 3 (Các liên kết đích): Các liên kết dẫn tới bộ sưu tập, sản phẩm hoặc trang nội dung cụ thể nằm dưới từng tiêu đề cột.
Khi tổ chức các cấp này, hãy áp dụng tính kỷ luật cao. Nghiên cứu công thái học từ Nielsen Norman Group nhấn mạnh rằng nội dung menu điều hướng phải được cắt gọt mạnh tay hơn cả các trang nội dung thông thường. Mỗi liên kết dư thừa đều làm tăng tải nhận thức và làm chậm tốc độ quét mắt của khách. Hãy giữ tên cột ngắn gọn và chỉ dùng hình ảnh khi chúng minh họa đúng lựa chọn mua sắm thực tế, chẳng hạn như ô ảnh bộ sưu tập.
Dưới đây là một mô hình kiến trúc ví dụ về cây điều hướng ba cấp cân đối:
Nữ (Cấp 1)
├── Quần áo (Cột Cấp 2 - Độ rộng: 3/12)
│ ├── Đầm & Jumpsuit (Liên kết Cấp 3)
│ └── Áo sơ mi & Áo thun (Liên kết Cấp 3)
├── Giày dép (Cột Cấp 2 - Độ rộng: 3/12)
│ ├── Bốt & Giày cao gót (Liên kết Cấp 3)
│ └── Giày thể thao (Liên kết Cấp 3)
├── Phụ kiện (Cột Cấp 2 - Độ rộng: 3/12)
│ ├── Túi xách tay (Liên kết Cấp 3)
│ └── Trang sức (Liên kết Cấp 3)
└── Nổi bật (Cột Cấp 2 - Độ rộng: 3/12)
└── [Ô ảnh Bộ sưu tập Mùa mới] (Cấp 3)
Nam (Cấp 1)
├── Trang phục (Cột Cấp 2 - Độ rộng: 4/12)
│ ├── Áo sơ mi & Polo (Liên kết Cấp 3)
│ └── Quần tây & Chinos (Liên kết Cấp 3)
└── Giày dép (Cột Cấp 2 - Độ rộng: 4/12)
└── Giày thường ngày (Liên kết Cấp 3)
Phụ kiện (Cấp 1)
├── Túi & Ví (Cột Cấp 2 - Độ rộng: 6/12)
└── Thắt lưng & Khăn (Cột Cấp 2 - Độ rộng: 6/12)
Giảm giá (Cấp 1 - Liên kết trực tiếp)
Để nắm vững các nguyên tắc bố cục trực quan và giãn cách hợp lý, hãy tham khảo bài hướng dẫn của chúng tôi về các nguyên tắc thực hành tốt nhất cho bố cục và nhóm mega menu.
Bước 1: Cài đặt Navi+ và bật app embed
Bắt đầu bằng việc cài đặt Navi+ từ Shopify App Store.
Navi+ được nạp qua một theme app embed, nên bạn bắt buộc phải bật app embed này trước khi bất kỳ menu nào bạn tạo có thể hiển thị trên storefront của cửa hàng.
- Trong trang quản trị Shopify admin, điều hướng tới Online Store > Themes.
- Nếu cửa hàng của bạn đang có lượng truy cập thực tế từ khách hàng, hãy bấm vào biểu tượng dấu ba chấm cạnh theme đang hoạt động và chọn Duplicate. Làm việc trên bản sao lưu theme giúp bạn dựng cấu trúc, chỉnh giao diện và kiểm tra menu mới một cách an toàn mà không làm gián đoạn người mua sắm.
- Bấm Customize trên bản theme đang thao tác để mở trình chỉnh sửa giao diện Shopify Theme Editor.
- Ở thanh công cụ bên trái, bấm vào biểu tượng App embeds, như được hướng dẫn trong Shopify Help Center về mở rộng theme bằng ứng dụng.
- Tìm mục có tên Store Connector trong danh sách và gạt công tắc sang trạng thái On (Bật).
- Bấm nút Save ở góc trên cùng bên phải của trình chỉnh sửa.
Hãy nhớ rằng app embed gắn liền với từng bản theme cụ thể. Nếu bạn đổi sang một theme khác hoặc cập nhật phiên bản theme mới trong tương lai, bạn sẽ cần mở lại Theme Editor và bật lại app embed Store Connector trên theme mới đó.
Bước 2: Tạo Desktop Mega Menu và thêm các mục cấp 1
Sau khi app embed đã được bật thành công, hãy quay trở lại trang quản trị Shopify và mở giao diện quản lý của Navi+.
- Trong màn hình quản lý menu của Navi+, bấm tạo menu mới và chọn loại menu là Desktop Mega Menu. Bạn có thể bắt đầu từ một mẫu cấu trúc có sẵn hoặc từ một khung trống hoàn toàn.
- Nếu bạn bắt đầu từ mẫu, hãy xóa bỏ các mục mẫu không phù hợp với cấu trúc cây đã lên kế hoạch.
- Thêm lần lượt từng mục cấp 1 chính theo đúng bản phác thảo trên giấy (ví dụ: Nữ, Nam, Phụ kiện, Giảm giá).
- Sử dụng thao tác kéo thả trực quan để di chuyển các mục lên, xuống, sang trái hoặc sang phải. Kéo theo chiều dọc sẽ thay đổi thứ tự hiển thị; kéo thụt lề sang phải sẽ biến mục đó thành con của mục phía trên trong cây menu.
- Gán một URL đích hợp lệ cho từng mục cấp 1. Ngay cả khi mục đó mở ra một khung mega menu nhiều cột, bạn vẫn nên liên kết nó tới một trang bộ sưu tập cha phù hợp để khách hàng bấm chuột vào tiêu đề chính vẫn tới được trang đích hữu ích.
Bước 3: Dựng các cột thả xuống, liên kết và hình ảnh
Bây giờ, hãy biến các danh sách liên kết kéo dài đơn điệu thành những cột nội dung ngăn nắp, dễ quét mắt.
Hình 1: Minh hoạ khái niệm (Concept illustration) — Bước 3: Dựng các cột thả xuống, liên kết và hình ảnh {#step-3-build-dropdown-columns-links-and-images}
- Bấm vào một mục cấp 1 cần mở rộng thành mega menu và bật cài đặt Is Multi-Column menu item. Cài đặt này báo cho ứng dụng hiểu rằng các mục con trực tiếp (cấp 2) sẽ đóng vai trò là tiêu đề các cột thay vì danh sách dọc thông thường.
- Dưới mỗi tiêu đề cột cấp 2, thêm các liên kết đích cấp 3 đại diện cho từng danh mục sản phẩm con.
- Thiết lập độ rộng cho từng cột theo hệ thống lưới 12 cột chuẩn. Ví dụ: với khung menu bốn cột gồm ba cột liên kết và một thẻ ảnh nổi bật, bạn có thể phân bổ độ rộng lần lượt là 3/12, 3/12, 3/12 và 3/12. Với menu hai cột cân bằng, hãy đặt cả hai cột ở mức 6/12.
- Nếu một khung menu chứa ít liên kết, hãy chỉnh trường độ rộng submenu nhiều cột trong phần cài đặt bố cục để khung không bị kéo dãn tạo ra các khoảng trống thừa thãi. Với các mục chỉ có ba hoặc bốn liên kết, hãy tắt chế độ nhiều cột và dùng menu thả xuống một cột tiêu chuẩn.
- Tạo điểm nhấn thị giác bằng cách đặt một ô hình ảnh bộ sưu tập có thể nhấp vào ở cột ngoài cùng bên phải. Hãy đảm bảo hình ảnh dẫn thẳng tới bộ sưu tập thực tế để đóng vai trò là một lựa chọn hành động thay vì hình trang trí thụ động. Bố cục hai chiều phát huy tác dụng chính vì nó định hướng quyết định của khách hàng rõ ràng.
Bước 4: Chọn mở khi di chuột hoặc nhấp chuột và định kiểu thanh menu
Tiếp theo, hãy xác định cách khách hàng kích hoạt mở menu thả xuống và định kiểu thanh điều hướng ăn khớp với nhận diện thương hiệu của bạn.
Các nhà bán hàng trực tuyến thường băn khoăn liệu menu máy tính nên mở khi di chuột qua hay mở khi nhấp chuột chủ động. Các nghiên cứu UX chỉ ra những đánh đổi rõ ràng giữa hai mô hình này:
| Mô hình tương tác | Tỷ lệ phổ biến & Bằng chứng nghiên cứu | Ưu điểm thực tế | Rủi ro UX & Lỗi thường gặp |
|---|---|---|---|
| Mở khi di chuột (Hover) | Xuất hiện trên 74% website thương mại điện tử máy tính theo benchmark của Baymard Institute, nhưng 60% website triển khai kém. Baymard khuyến nghị độ trễ 300–500 ms; NN/g khuyên chuột phải đứng yên 0,5 giây. | Duyệt danh mục nhanh chóng, tốn ít lực nhấp cho người dùng chuột nếu được tinh chỉnh độ trễ cẩn thận. | Dễ mở nhầm khi lia chuột qua header; khung menu biến mất nếu con trỏ trượt ra ngoài vùng chạm hẹp. |
| Mở khi nhấp chuột (Click) | Được Smashing Magazine (Vitaly Friedman, 2021) khuyên dùng để tránh bẫy di chuột gây khó chịu. Theme Dawn của Shopify chọn mở bằng click vì hover không đạt tiêu chuẩn trợ năng. | Tương tác có chủ đích, ổn định trên cả chuột máy tính và laptop có màn hình cảm ứng; ít mở nhầm ngoài ý muốn hơn. | Đòi hỏi một cú nhấp chuột rõ ràng để xem từng ngành hàng; chậm hơn một chút khi khách muốn dạo qua nhiều mục liên tiếp. |
Trong Navi+, việc lựa chọn mô hình tương tác này chỉ cần một công tắc duy nhất. Trong cài đặt bố cục menu, hãy tìm tùy chọn Show submenu on hover. Bật tùy chọn này sẽ mở menu con khi con trỏ chuột di qua; tắt nó đi sẽ yêu cầu khách hàng phải nhấp chuột vào mục menu mới mở dropdown.
Sau khi chọn xong cơ chế kích hoạt, hãy hoàn thiện kiểu dáng giao diện:
- Chọn màu nền và màu chữ hài hòa với thanh header của theme cửa hàng.
- Thiết lập màu nhấn khi di chuột hoặc đường gạch chân tinh tế để tạo tín hiệu phản hồi thị giác rõ nét.
- Tinh chỉnh kích thước phông chữ và khoảng cách đệm giữa các mục để thanh menu hòa hợp tự nhiên bên cạnh logo và các biểu tượng tiện ích.
Bước 5: Xuất bản bên dưới thanh header và kiểm tra mọi độ rộng màn hình
Việc tạo và lưu menu trong bảng điều khiển ứng dụng không đồng nghĩa với việc menu sẽ tự động hiện lên trên cửa hàng. Bạn bắt buộc phải xuất bản menu thì nó mới xuất hiện trên website của bạn.
Hình 2: Minh hoạ khái niệm (Concept illustration) — Bước 5: Xuất bản bên dưới thanh header và kiểm tra mọi độ rộng màn hình {#step-5-publish-under-the-header-and-test-every-screen-width}
Trong Navi+, hãy bấm vào nút Publish to website và cấu hình các tùy chọn vị trí gắn:
| Phương pháp xuất bản | Bộ chọn CSS ví dụ | Vị trí hiển thị trên Storefront | Phù hợp nhất cho |
|---|---|---|---|
| Insert After | header hoặc header(D) |
Chèn thanh menu ngay bên dưới khối container header của theme. | Phần lớn menu desktop mega menu; tạo một thanh menu riêng biệt trải rộng toàn màn hình trong khi giữ nguyên logo và biểu tượng giỏ hàng. |
| Replace | .header-menu hoặc .header-menu(D) |
Ẩn phần tử menu gốc của theme và đặt menu Navi+ vào đúng vị trí đó. | Các cửa hàng muốn đặt menu app nằm trên cùng một hàng ngang với logo và thanh tìm kiếm của theme. |
| Insert Before | main hoặc main(D) |
Chèn thanh menu ngay phía trên phần nội dung chính của trang. | Các bố cục đặc biệt khi menu cần nổi ngay phía trên phần banner hero chính. |
Để ngăn các quy tắc máy tính can thiệp vào giao diện di động, hãy thêm hậu tố (D) vào sau bộ chọn của bạn (ví dụ: header(D)). Hậu tố này yêu cầu tập lệnh chỉ áp dụng quy tắc đặt vị trí này riêng cho màn hình máy tính.
Theo mặc định, bất kỳ màn hình nào hẹp hơn 768px sẽ tự động chuyển menu sang chế độ di động.
Trước khi công bố menu mới cho khách hàng thực tế, hãy kiểm tra cửa hàng trên nhiều độ rộng màn hình khác nhau:
- Màn hình máy tính để bàn rộng: Đảm bảo các khung mega menu nhiều cột căn giữa chuẩn xác và tỷ lệ các cột giữ được sự cân đối.
- Laptop tiêu chuẩn: Xác nhận rằng các mục menu cấp 1 nằm trọn trên một dòng ngang duy nhất và không bị tràn hay chạm vào viền header.
- Máy tính bảng và laptop nhỏ: Kiểm tra điểm chuyển tiếp quanh ngưỡng 768px để đảm bảo phản hồi chuyển đổi giữa giao diện desktop và mobile diễn ra mượt mà.
Để xem các bước thiết lập cụ thể cho từng mẫu theme, hãy xem hướng dẫn của chúng tôi về cách thêm mega menu vào theme Dawn và khám phá bộ sưu tập menu Navi+ trên các theme Shopify phổ biến. Để theo dõi các bước bằng hình ảnh chụp thực tế, hãy tham khảo tài liệu chính thức hướng dẫn xuất bản chi tiết kèm ảnh chụp màn hình.
Nếu cửa hàng của bạn cũng cần menu cho thiết bị di động, tính năng Smart responsive sẽ nhúng một tham chiếu trực tiếp của cây menu máy tính vào ngăn kéo trượt mobile mà bạn không cần phải tốn công dựng lại một cây menu thứ hai.
Các lỗi thường gặp: menu không hiển thị, bị header che khuất, xuống thành hai dòng
Khi cài đặt và xuất bản menu máy tính bằng ứng dụng bên thứ ba, các chủ shop đôi khi gặp phải một số lỗi hiển thị ngoài ý muốn. Hãy dùng bảng chẩn đoán sự cố này để khắc phục nhanh chóng:
| Hiện tượng lỗi | Nguyên nhân khả dĩ | Biện pháp xử lý đề xuất |
|---|---|---|
| Menu không hiển thị trên storefront | App embed bị tắt, menu chưa được xuất bản hoặc bộ chọn CSS bị sai. | Kiểm tra Theme Editor > App embeds để chắc chắn Store Connector đã được bật và lưu. Trong Navi+, kiểm tra xem bạn đã bấm Publish to website chưa. Soi mã nguồn theme để kiểm tra bộ chọn CSS có khớp với phần tử thực tế không. |
| Khung menu bị header dính che khuất | Header của theme có thứ tự xếp lớp hiển thị (z-index) cao hơn khung menu thả xuống. | Mở phần cài đặt bố cục trong Navi+ và tăng chỉ số Z-Index lên để khung mega menu hiển thị nổi lên phía trước thanh header cố định của theme. |
| Thanh menu bị xuống thành hai dòng | Có quá nhiều mục cấp 1 hoặc nhãn liên kết quá dài so với màn hình laptop tiêu chuẩn. | Cắt gọt bớt các mục cấp 1 về mức 5 đến 7 mục chính, rút ngắn từ ngữ trên nhãn, hoặc bật tính năng mũi tên khi tràn để gom các mục thừa phía sau một nút mũi tên thay vì rớt dòng. |
| Menu máy tính chuyển sang mobile trên laptop nhỏ hoặc tablet | Độ rộng màn hình rơi xuống dưới ngưỡng điểm ngắt desktop mặc định 768px. | Hạ ngưỡng breakpoint desktop trong phần cài đặt bố cục và bật tính năng mũi tên tràn để thanh menu ngang vẫn hoạt động trên các kích thước màn hình trung gian. |
| Nháy menu cũ của theme trong khoảnh khắc tải trang | Với Replace, Navi+ đợi menu cũ hiển thị rồi mới thay thế, nên menu cũ có thể xuất hiện thoáng qua. | Làm theo mục I.5 trong hướng dẫn xuất bản (publishing guide): mục này ẩn menu cũ và hiện hiệu ứng tải thay vào đó. |
| Liên kết trong dropdown dẫn tới trang 404 hoặc sai trang | Đường dẫn URL bị gõ sai chính tả hoặc dẫn tới bộ sưu tập chưa được xuất bản. | Nhấp thử vào từng liên kết trong cây menu trên bản xem trước trực tiếp để xác nhận mọi bộ sưu tập, trang nội dung và sản phẩm đều phản hồi chính xác. |
Để xem thêm các mẹo cấu hình nâng cao và xử lý các trường hợp biên chi tiết, hãy ghé thăm trang Các câu hỏi thường gặp về Desktop Mega Menu.
Đánh đổi: khi nào menu thả xuống đơn giản tốt hơn mega menu
Một mega menu nhiều cột là công cụ trưng bày sản phẩm mạnh mẽ, nhưng không phải là giải pháp phù hợp cho mọi cửa hàng Shopify. Trước khi quyết định đầu tư vào một bố cục phức tạp, hãy cân nhắc những điểm đánh đổi thực tế sau:
- Danh mục sản phẩm nhỏ: Nếu cửa hàng chỉ kinh doanh một số ít mặt hàng hoặc chỉ dựa vào hai đến ba bộ sưu tập chính, menu mặc định của theme hoặc menu thả xuống một cột đơn giản sẽ gọn gàng và nhanh hơn rất nhiều. Hệ thống điều hướng sẵn có của Shopify hỗ trợ tối đa hai cấp menu con lồng nhau, hoàn toàn đủ cho các cửa hàng tinh gọn.
- Chi phí bảo trì vận hành: Mega menu đòi hỏi sự chăm chút liên tục. Khi các bộ sưu tập thay đổi theo mùa, sản phẩm hết hàng hoặc chương trình khuyến mại kết thúc, từng tiêu đề cột, liên kết và thẻ hình ảnh đều phải được cập nhật thủ công. Thiếu kỷ luật quản lý sẽ khiến menu nhanh chóng tích tụ liên kết hỏng và rác thị giác.
- Rủi ro tương tác khi di chuột: Các mega menu mở bằng hover rất dễ gây ức chế cho người dùng nếu thiếu thời gian chờ hợp lý hoặc khi khách hàng truy cập bằng laptop có màn hình cảm ứng.
- Phụ thuộc vào lớp ứng dụng: Việc thêm một ứng dụng điều hướng tạo thêm một lớp app embed mà bạn cần kiểm tra lại mỗi khi nâng cấp hoặc thay đổi theme cửa hàng.
Một desktop mega menu chỉ thực sự xứng đáng khi bạn sở hữu lượng bộ sưu tập lớn, có các danh mục con phong phú cần gom nhóm theo cột rõ ràng, và có các ô ảnh bộ sưu tập chất lượng cao giúp dẫn dắt quyết định mua hàng. Để đánh giá đúng cấu trúc điều hướng phù hợp với quy mô cửa hàng của bạn, hãy tham khảo bài viết về cách chọn đúng loại menu cho cửa hàng của bạn.
Vị trí phù hợp của Navi+
Navi+ Tab Bar & Mega Menu được thiết kế để lấp đầy khoảng trống giữa các khuôn mẫu theme gò bó và các đoạn code tùy chỉnh phức tạp.
Đối với giao diện máy tính, Navi+ cung cấp trình dựng Desktop Mega Menu chuyên biệt dựa trên cấu trúc cây ba cấp rõ ràng. Các chủ shop có thể tùy biến độ rộng từng cột trên hệ thống lưới linh hoạt, chuyển đổi cơ chế mở bằng hover hoặc click chỉ bằng một công tắc, và đặt thanh menu vào đúng vị trí bằng bộ chọn Insert After hoặc Replace đi kèm hậu tố giới hạn cho desktop.
Để thanh menu gọn gàng trên các màn hình laptop nhỏ hơn, Navi+ có thiết lập điểm ngắt (breakpoint) và nút mũi tên khi tràn, gom các mục cấp 1 dư vào sau mũi tên thay vì để chúng xuống dòng. Tính năng Smart responsive nhúng một tham chiếu sống của cây menu desktop vào ngăn kéo trượt mobile, nên bạn không phải dựng cây thứ hai.
Nếu bạn muốn trải nghiệm giải pháp này trên chính cửa hàng của mình, Navi+ Tab Bar & Mega Menu cho phép bạn xây dựng Desktop Mega Menu như mô tả trong bài viết này, kiểm tra an toàn trên một bản sao theme và có thể tắt đi bất cứ lúc nào.
Danh sách kiểm tra hành động trước khi xuất bản
Hãy rà soát kỹ bảng kiểm tra từng bước này trước khi đưa thanh menu máy tính mới ra phục vụ khách mua hàng thực tế:
- Đã phác thảo cây menu: Lên kế hoạch tối đa ba cấp rõ ràng trên giấy (thanh menu ngang, các cột, các liên kết).
- App embed đã được bật: App embed Store Connector đã được bật và lưu trong Theme Editor > App embeds.
- Các mục cấp 1 nằm vừa vặn: Các mục cấp 1 hiển thị thoải mái trên một dòng ngang duy nhất trên màn hình laptop tiêu chuẩn.
- Các cột đã có tiêu đề và độ rộng chuẩn: Các mục cấp 2 được cấu hình làm tiêu đề cột với độ rộng lưới được cân đối hợp lý.
- Hình ảnh đã được tinh chọn: Các thẻ hình ảnh chỉ được dùng cho các lựa chọn bộ sưu tập thực sự thay vì đồ họa trang trí thừa.
- Đã chọn cơ chế kích hoạt: Chủ động lựa chọn mở khi di chuột có độ trễ hợp lý hoặc mở bằng nhấp chuột có chủ đích.
- Bộ chọn xuất bản đã được xác minh: Cấu hình Insert After hoặc Replace với đúng bộ chọn header và hậu tố
(D)cho desktop. - Đã kiểm tra trên nhiều độ rộng: Kiểm tra hiển thị storefront trên màn hình máy tính lớn, laptop thông thường và máy tính bảng.
- Đã kiểm tra điều hướng bằng bàn phím: Xác nhận rằng phím
Tabdi chuyển tiêu điểm tuần tự qua các mục menu và liên kết, và phímEscapeđóng khung menu đang mở rồi trả tiêu điểm về nút điều khiển, khớp với khuyến nghị về mẫu disclosure navigation của W3C. - Đã kiểm tra toàn bộ liên kết: Nhấp thử vào từng liên kết một lần để đảm bảo các URL dẫn chính xác về các trang và bộ sưu tập đang hoạt động.
Nếu bạn muốn trải nghiệm giải pháp này trên chính cửa hàng của mình, Navi+ Tab Bar & Mega Menu cho phép bạn xây dựng Desktop Mega Menu như mô tả trong bài viết này, kiểm tra an toàn trên một bản sao theme và có thể tắt đi bất cứ lúc nào.
Câu hỏi thường gặp
### Một menu máy tính có thể có bao nhiêu cấp?
Menu thả xuống mặc định của Shopify cho phép tối đa hai cấp lồng nhau dưới một mục cấp cao nhất. Trong khi đó, một cây Desktop Mega Menu của Navi+ được xây dựng theo cấu trúc ba cấp: thanh ngang cấp 1, các tiêu đề cột cấp 2 và các liên kết con cấp 3.
### Mega menu nên mở khi di chuột hay khi nhấp chuột?
Cả hai cách đều hoạt động tốt nếu được triển khai cẩn thận: mở khi di chuột cần một khoảng trễ ngắn (Baymard đề xuất 300–500 ms) để tránh mở nhầm ngoài ý muốn, trong khi mở khi nhấp chuột là mặc định an toàn và hỗ trợ trợ năng tốt hơn. Trong Navi+, bạn có thể đổi qua lại chỉ với một tùy chọn: “Show submenu on hover”.
### Menu sẽ xuất hiện ở đâu trên thanh header của tôi?
Khi sử dụng phương pháp Insert After với bộ chọn header, menu sẽ hiển thị ngay bên dưới thanh header. Khi dùng Replace, menu của theme sẽ được ẩn đi và Navi+ sẽ thế chỗ vào đúng vị trí đó.
### Tại sao menu của tôi không hiển thị sau khi cài đặt ứng dụng?
Thông thường là do app embed chưa được bật hoặc menu chưa được nhấn xuất bản. Hãy kiểm tra xem Store Connector đã bật trong Theme Editor chưa, xác minh lại bộ chọn CSS, và tăng chỉ số z-index nếu thanh header dính đang che khuất menu.
### Tại sao menu máy tính của tôi lại chuyển sang phiên bản di động trên tablet hoặc laptop nhỏ?
Theo mặc định, bất kỳ màn hình nào hẹp hơn 768px sẽ tự động chuyển sang chế độ di động. Bạn có thể hạ thấp ngưỡng điểm ngắt breakpoint này trong phần cài đặt bố cục và bật tính năng mũi tên tràn để bảo toàn thanh menu ngang.
### Cùng một menu này có thể hiển thị trên thiết bị di động không?
Có, tính năng Smart responsive sẽ tự động nhúng một bản tham chiếu trực tiếp của menu máy tính vào ngăn kéo Slide menu di động mà bạn không cần phải tạo lại cây menu thứ hai.
Nguồn tham khảo
- Shopify Help Center: Drop-down menus
- Shopify Help Center: App embeds in themes
- Nielsen Norman Group: Mega Menus Work Well
- Nielsen Norman Group: Mega Menus Gone Wrong
- Baymard Institute: Dropdown Menu Flickering Issue
- Smashing Magazine: Frustrating Design Patterns: Mega-Dropdown Hover Menus
- Shopify Dawn Theme PR #1316
- W3C WAI-ARIA APG: Disclosure Navigation Example
- Navi+ Help: Publishing on Shopify
- Navi+ Help: Desktop Mega Menu FAQ
- Navi+ Help: How to Use Desktop Mega Menu
- Navi+ Help: Setting Layout
Khám phá các chủ đề
Bài này dẫn tới các bài chuyên sâu hơn — đào sâu từng phần.