Bạn dành hàng giờ tuyển chọn bộ sưu tập và sắp xếp các liên kết lồng nhau trong trang quản trị Shopify. Trên màn hình máy tính, danh mục sản phẩm trải rộng gãy gọn qua một mega menu nhiều cột. Nhưng khi cầm điện thoại lên, mở biểu tượng ngăn kéo (drawer), thanh điều hướng lại mang cảm giác rời rạc hoặc lệch pha.
Nhiều chủ cửa hàng nghĩ rằng muốn có bảng mega menu trên máy tính và thanh menu gọn gàng trên điện thoại thì bắt buộc phải tạo hai menu riêng. Thực tế, bạn không cần duy trì hai cấu trúc dữ liệu. Bạn hoàn toàn có thể giữ một cây danh mục duy nhất làm nguồn dữ liệu gốc, rồi để mỗi thiết bị hiển thị cấu trúc đó theo bố cục tối ưu của riêng mình.
Câu trả lời nhanh: một menu có dùng được cho cả desktop và mobile?
Có. Trong Dawn, menu chính của header cung cấp dữ liệu cho cả menu máy tính lẫn ngăn kéo di động, nên cấu trúc vốn đã được dùng chung. Điểm khác biệt duy nhất nằm ở bố cục: máy tính hiển thị dạng cột, di động mở từng cấp lồng nhau. Hãy chọn cách làm giúp duy trì một nguồn dữ liệu duy nhất.
- Cách 1 (Cài đặt theme gốc không code): Giữ một menu duy nhất trong admin Shopify và chuyển cài đặt kiểu menu desktop của header sang Mega menu; theme sẽ tự xử lý hiển thị trên ngăn kéo di động.
- Cách 2 (Tách hai menu riêng trong admin): Tạo một menu linklist độc lập cho di động và sửa code template drawer trỏ vào đó, chấp nhận công việc bảo trì danh mục gấp đôi.
- Cách 3 (Chỉnh sửa template drawer): Can thiệp vào đoạn code Liquid của drawer để các danh mục con hiển thị ngay khi mở menu thay vì bắt khách chạm nhiều lần để chuyển màn hình.
Cách theme Shopify tái sử dụng một menu trên desktop và mobile
Trong kiến trúc Shopify, dữ liệu điều hướng hoàn toàn độc lập với giao diện hiển thị. Khi bạn tạo một menu trong mục Content > Menus (hoặc Navigation cũ), hệ thống lưu trữ cấu trúc đó dưới dạng đối tượng linklist. Theo Tài liệu nhà phát triển Shopify, “Bạn có thể lồng các liên kết sâu tối đa ba cấp”: một mục cấp đầu cùng hai cấp con lồng bên dưới. Để nắm vững cách phân tầng danh mục chuẩn, bạn có thể tham khảo Shopify menu guide.
Vì mỗi linklist chỉ là dữ liệu thuần túy, theme đang kích hoạt sẽ quyết định cách thức và vị trí hiển thị chúng (Shopify Dev Docs). Một theme hiện đại như Dawn thể hiện rõ cơ chế này trong mã nguồn: file sections/header.liquid cung cấp cài đặt menu_type_desktop cho phép chọn giữa menu thả xuống (dropdown), mega menu hoặc drawer trên desktop (GitHub Shopify Dawn).
Dù bạn chọn kiểu hiển thị máy tính nào, ngăn kéo di động của Dawn vẫn duyệt qua chính linklist đó. Trong file snippets/header-drawer.liquid, template lặp qua menu header bằng cú pháp for link in section.settings.menu.links và tiếp tục duyệt sâu đến cấp cháu thông qua for grandchildlink in childlink.links (GitHub Shopify Dawn). Liquid cũng theo dõi độ sâu thông qua thuộc tính levels của đối tượng link (Shopify Liquid API).
Cấu trúc danh mục vốn đã được chia sẻ chung. Bạn đang sở hữu One menu tree duy nhất; sự khác biệt giữa hai thiết bị chỉ là cách thức dàn trang.
Vì sao hai bố cục vẫn mang lại cảm giác khác nhau
Dù dùng chung một linklist, trải nghiệm giữa máy tính và điện thoại vẫn có khoảng cách rõ rệt do mô hình tương tác hoàn toàn khác nhau.
Hình 1: Minh hoạ khái niệm (Concept illustration) — Vì sao hai bố cục vẫn mang lại cảm giác khác nhau
Trên máy tính, thao tác rê chuột vào danh mục chính sẽ kích hoạt một bảng Hover panel rộng lớn. Người mua có thể quét mắt qua nhiều cột chứa danh mục con và đường dẫn sản phẩm cùng một lúc mà không cần chuyển trang.
Trên màn hình điện thoại, chiều rộng hạn chế không cho phép hiển thị các cột song song. Các theme buộc phải dùng ngăn kéo trượt với cơ chế drill-down (đi sâu từng nấc). Khách muốn xem danh mục con phải chạm vào dòng cha, đợi màn hình trượt sang panel mới rồi mới chạm tiếp vào sản phẩm. Thao tác Two taps này là một phàn nàn mà một số người dùng Dawn đã nêu trên cộng đồng Shopify (Shopify Community). Để hiểu sâu hơn về cơ chế này, bạn có thể xem bài phân tích về mobile drawer menu architecture.
Màn hình cảm ứng cũng làm phát sinh nhiều trở ngại công thái học:
- Parent link not clickable: Trong nhiều drawer di động, việc chạm vào tên danh mục cha chỉ có tác dụng mở submenu lồng bên trong, khiến người mua không thể truy cập trực tiếp trang bộ sưu tập cha.
- Dễ chạm nhầm trên cảm ứng: Nghiên cứu trải nghiệm người dùng từ Nielsen Norman Group chỉ ra rằng “các lựa chọn nhỏ li ti bên trong mega menu dễ gây ra lỗi bấm nhầm trên màn hình cảm ứng” (NN/g).
- Tách biệt thiết kế cho mobile: Nhận thấy rào cản này, ứng dụng Meteor chủ động tách riêng mẫu menu máy tính và di động (Helium Meteor Docs), trong khi các chuyên gia Clean Canvas khuyên nên tạo một menu di động một tầng với các liên kết sản phẩm trực tiếp cho theme Symmetry (Clean Canvas).
Cách 1: Giữ một menu Shopify và đổi kiểu desktop sang Mega menu
Giải pháp không dùng code sạch sẽ nhất là tận dụng tính năng mega menu tích hợp sẵn của theme. Phương pháp này giữ cho trang quản trị gọn gàng với một linklist duy nhất trong khi theme tự chuyển đổi bố cục cho từng màn hình.
Hãy thực hiện theo 4 bước sau:
- Dựng cây danh mục 3 cấp trong admin: Vào Content > Menus, mở Main menu và sắp xếp danh mục theo cấu trúc: mục cấp đầu chứa tiêu đề con cấp 2, tiêu đề con chứa liên kết cấp 3.
- Gán menu vào phần header: Truy cập Online Store > Themes > Customize > Header, đảm bảo menu vừa tạo được chọn tại mục Menu.
- Đổi kiểu menu desktop sang Mega menu: Trong phần cài đặt Header, chuyển tùy chọn Menu type sang Mega menu (GitHub Shopify Dawn). Để xem hướng dẫn chi tiết về Dawn, đọc bài viết hướng dẫn add a mega menu to Dawn.
- Kiểm tra ngăn kéo di động: Chuyển chế độ xem trước sang Mobile và mở thanh drawer. Hệ thống sẽ tự động hiển thị chính xác cây danh mục từ menu chính (GitHub Shopify Dawn).
Nếu bạn sử dụng theme thương mại khác, tên cài đặt có thể khác biệt đôi chút; hãy xem tài liệu hướng dẫn của theme đó (Shopify Dev Docs).
Cách 2: Sử dụng hai menu riêng biệt trong admin Shopify
Khi menu máy tính chứa quá nhiều liên kết và khuyến mãi gây rối mắt trên điện thoại, bạn có thể chủ động tách thành hai menu độc lập trong admin Shopify.
Theo cách này, bạn tạo một menu chính cho desktop trong Content > Menus và một menu rút gọn mang tên “Mobile Menu”. Vì cài đặt theme gốc thường chỉ có một ô chọn menu, các lập trình viên thường sửa file snippets/header-drawer.liquid để trỏ biến menu của drawer sang handle của menu di động thay vì đọc section.settings.menu (Shopify Community). Hãy xem tài liệu của theme để biết nó có cài đặt riêng cho menu drawer hay không; nếu có thì không cần sửa code.
Dù cách này cho phép tùy biến giao diện di động tối đa, nó lại mang lại chi phí bảo trì rất lớn:
- Mỗi lần thêm bộ sưu tập mới hoặc triển khai chương trình khuyến mãi, bạn buộc phải cập nhật ở hai menu khác nhau.
- Sau một thời gian, hai menu có thể lệch nhau, khiến khách hàng trên di động thiếu các liên kết có trên máy tính. Những chủ shop muốn “sao y menu desktop sang mobile” chính là muốn tránh điều này (Shopify Community).
Chỉ nên dùng Cách 2 khi bạn thực sự cần một luồng điều hướng hoàn toàn riêng biệt cho người dùng di động.
Cách 3: Sửa drawer để các cấp lồng nhau hiển thị cùng lúc
Nhiều chủ cửa hàng mong muốn menu di động hiển thị ngay các danh mục con lồng nhau mà không bắt khách hàng bấm qua từng màn hình trượt (Shopify Community).
Template drawer của Dawn vốn đã duyệt qua cả liên kết con và liên kết cấp cháu (GitHub Shopify Dawn). Bằng cách điều chỉnh mã Liquid và CSS, bạn có thể gỡ bỏ các lớp panel ẩn và hiển thị các cấp con mở sẵn dưới dạng danh sách lồng trực tiếp.
Tuy nhiên, bạn cần hết sức cẩn trọng với các lưu ý kỹ thuật sau:
- Khác biệt phiên bản theme: Các đoạn code chia sẻ trên diễn đàn từ năm 2022 được viết cho các bản Dawn cũ. Cấu trúc file và tên class đã thay đổi qua các bản cập nhật.
- Luôn nhân bản theme trước khi sửa: Hãy tạo một bản sao dự phòng của theme trước khi can thiệp vào Liquid. Tuyệt đối không sửa code trực tiếp trên theme đang chạy thật.
- Trang bị kéo dài: Nếu mega menu máy tính có nhiều liên kết, việc mở bung tất cả trên di động sẽ tạo ra một danh sách dài, buộc người dùng phải cuộn nhiều.
Những gì chuyển từ desktop mega menu sang mobile
Khi đưa một mega menu từ máy tính sang màn hình nhỏ của điện thoại, các yếu tố giao diện bắt buộc phải biến đổi. Nghiên cứu của Nielsen Norman Group khuyến nghị nên “gom nhóm các lựa chọn thành những tập hợp liên quan” (NN/g). Để tìm hiểu sâu về bố cục và gom nhóm, hãy xem hướng dẫn về mega menu layout and grouping best practices.
Hình 2: Minh hoạ khái niệm (Concept illustration) — Những gì chuyển từ desktop mega menu sang mobile
| Thành phần trên desktop | Trạng thái trên di động | Hướng xử lý đề xuất |
|---|---|---|
| Lưới nhiều cột | Chiều ngang điện thoại không đủ chỗ cho nhiều cột hiển thị song song (Navi+ Docs) | Các Columns become one column xếp chồng dọc theo một danh sách cuộn duy nhất trong ngăn kéo |
| Tiêu đề cột | Tiêu đề chỉ dùng để gắn nhãn một cột trên desktop sẽ chiếm chỗ trong danh sách hẹp | Thường bỏ đi khi các cột xếp chồng; một Divider between columns mảnh giúp giữ lại cách nhóm cũ |
| Hình ảnh và banner quảng bá | Các khối Promo banner lớn chiếm quá nhiều diện tích màn hình phía trên liên kết | Ẩn hình ảnh nặng trên di động; dùng tùy chọn Exclude when embedded để ngăn kéo luôn gọn gàng (Navi+ Docs) |
| Độ sâu phân tầng | Shopify giới hạn menu trong 3 cấp (mục cha và 2 cấp con lồng) (Shopify Dev Docs) | Giữ cấu trúc ≤ 3 cấp để liên kết không bị cắt cụt trong vòng lặp Liquid gốc |
| Liên kết chữ nhỏ | Chữ xếp sát nhau gây ra lỗi bấm nhầm trên màn hình cảm ứng (NN/g) | Mở rộng khoảng đệm để mỗi vùng chạm đạt kích thước tối thiểu WCAG 2.2 là 24 x 24 CSS pixel (W3C WCAG 2.2) |
Kiểm tra trên thiết bị thật trước khi xuất bản
Công cụ giả lập trên trình duyệt máy tính chỉ mô phỏng được độ rộng hiển thị, không thể tái hiện vùng với ngón tay cái hay độ nhạy cảm ứng thực tế. Hãy thực hiện quy trình kiểm tra trên thiết bị thật:
- Thử nghiệm trên điện thoại iOS và Android thực tế: Mở liên kết xem trước trên các kích thước màn hình khác nhau, kiểm tra cả chế độ dọc và ngang.
- Bấm thử từng cấp danh mục: Chạm vào từng mục cấp 1, cấp 2 và cấp 3 để xác nhận đường dẫn dẫn đến đúng trang bộ sưu tập.
- Kiểm tra hành vi của mục cha: Đảm bảo khi bấm vào danh mục cha, trang web sẽ mở bộ sưu tập tương ứng hoặc mở submenu mượt mà, không bị hiện tượng chạm đơ.
- Đo kích thước vùng chạm: Xác minh các nút và liên kết có khoảng cách bấm thoải mái, đạt chuẩn tối thiểu 24x24 pixel của WCAG 2.2 (W3C WCAG 2.2).
- Kiểm tra cuộn ngăn kéo: Thao tác cuộn từ trên cùng xuống đến các liên kết tài khoản dưới đáy để đảm bảo không bị kẹt hay mất nội dung.
- Sử dụng bản xem trước theme: Luôn kiểm tra kỹ trên bản theme nhân bản trước khi xuất bản ra storefront đang hoạt động.
Các vấn đề thường gặp và cách khắc phục
Khi đồng bộ cấu trúc menu giữa hai thiết bị, các chủ shop thường gặp 4 trở ngại phổ biến sau:
Menu di động phải bấm hai lần
- Nguyên nhân: Cơ chế drill-down của ngăn kéo bắt người dùng chạm vào danh mục, chờ chuyển cảnh rồi mới chạm tiếp vào mục con (Shopify Community).
- Cách sửa: Sửa code drawer để bung sẵn mục con (Cách 3), hoặc áp dụng giải pháp loại bỏ tầng cột trung gian để khách chạm là tới đích ngay.
Các cấp danh mục sâu bị mất
- Nguyên nhân: Shopify chỉ hỗ trợ lồng tối đa 3 cấp (cấp 1 cùng 2 cấp con) (Shopify Dev Docs). Vòng lặp của Dawn không duyệt quá cấp cháu (GitHub Shopify Dawn).
- Cách sửa: Tinh gọn lại cây danh mục để mọi trang quan trọng đều nằm trong phạm vi 3 cấp quy định.
Dòng danh mục cha không bấm được
- Nguyên nhân: Trên màn hình cảm ứng, thao tác chạm vào dòng cha được dành riêng để kích hoạt mở đóng menu con.
- Cách sửa: Thêm một liên kết “Xem tất cả [Tên danh mục]” làm mục đầu tiên bên trong menu con.
Menu di động hiển thị mục khác với máy tính
- Nguyên nhân: Cửa hàng đang dùng Cách 2 qua code tùy biến trong
snippets/header-drawer.liquidhoặc cài đặt app trỏ sang một menu riêng biệt (Shopify Community). - Cách sửa: Rà soát lại cài đặt Header trong Theme Editor và kiểm tra code Liquid của drawer xem có biến menu nào bị gán cứng không.
Đánh đổi: khi nào một cấu trúc là lựa chọn sai lầm
Dùng chung một cấu trúc giúp tiết kiệm thời gian vận hành, nhưng mỗi phương án triển khai đều có những giới hạn riêng:
| Phương pháp | Công sức cài đặt | Yêu cầu code | Nơi quản trị | Rủi ro và đánh đổi chính |
|---|---|---|---|---|
| Cách 1: Mega Menu gốc của Theme | Thấp (vài phút) | Không cần code | Một menu trong admin Shopify | Phụ thuộc vào tính năng của theme; drawer di động vẫn dùng thao tác trượt từng cấp |
| Cách 2: Hai Menu Riêng Biệt | Trung bình | Sửa nhẹ Liquid hoặc cài đặt theme | Hai menu riêng trong admin | Dễ bị lệch dữ liệu danh mục; tốn gấp đôi công sức mỗi khi cập nhật kho hàng |
| Cách 3: Can Thiệp Code Drawer | Cao | Viết code Liquid và CSS tùy biến | Một menu trong admin Shopify | Dễ lỗi khi cập nhật theme; danh sách dài gây mỏi tay khi cuộn trên di động |
Khi nào nên chủ động tách riêng hai menu
Dù việc giữ một nguồn dữ liệu giúp tránh lệch danh mục, việc tách riêng menu di động vẫn là quyết định đúng đắn trong một số trường hợp:
- Danh mục sản phẩm quá đồ sộ: Cửa hàng có hàng ngàn sản phẩm trải trên nhiều nhánh con có thể làm khách di động choáng ngợp. Một menu di động tinh gọn một tầng với các liên kết trực tiếp sẽ mang lại trải nghiệm cảm ứng tốt hơn (Clean Canvas).
- Lối tắt ưu tiên cho di động: Khách hàng dùng điện thoại có thể được lợi từ những lối tắt tiện ích như Tra cứu đơn hàng hoặc Tìm cửa hàng ngay tại cấp đầu tiên.
- Bảo toàn khả năng thu thập dữ liệu (SEO): Nếu bạn ẩn bớt liên kết trên menu di động, hãy đảm bảo các trang bộ sưu tập vẫn có thể được bot tìm kiếm thu thập thông qua liên kết nội bộ, breadcrumbs hoặc sitemap. Xem hướng dẫn cách keep your menu crawlable.
Navi+ hỗ trợ bạn ở đâu
Nếu theme hiện tại của bạn thiếu tính năng mega menu hoặc việc can thiệp code Liquid tiềm ẩn nhiều rủi ro, Navi+ cung cấp một cách có cấu trúc để chia sẻ điều hướng giữa các thiết bị.
Theo tài liệu của Navi+, menu desktop và menu mobile phối hợp với nhau như sau:
- Desktop Mega Menu: Trên màn hình lớn, Navi+ Desktop Mega Menu hiển thị các bảng nhiều cột kèm hình ảnh và banner. Menu này không hiển thị trên điện thoại vì các cột ngang không có chỗ đứng trên màn hình hẹp (Navi+ Docs).
- Nhúng vào Mobile Menu: Thay vì bắt bạn nhập lại danh mục từ đầu, Navi+ Mobile Menu cho phép nhúng Desktop Mega Menu thông qua một mục nhúng duy nhất đặt tại cấp 1 của drawer (Navi+ Docs).
- Tự động xếp một cột: Khi được nhúng, các Columns become one column xếp chồng gọn gàng (Navi+ Docs). Tầng cột trung gian được lược bỏ giúp người mua chạm tới sản phẩm chỉ với một lần bấm thay vì hai.
- Kiểm soát hiển thị linh hoạt: Bật tùy chọn Exclude when embedded để giữ các banner khuyến mãi lớn trên máy tính và tự động ẩn chúng khỏi ngăn kéo di động (Navi+ Docs).
- Chỉnh sửa ở một nơi: Drawer dùng lại các mục của mega menu, nên bạn chỉ cần Edit once trên Desktop Mega Menu, bản nhúng trong drawer sẽ cập nhật theo. Nếu muốn xóa mega menu, bạn chỉ cần gỡ mục nhúng khỏi Mobile Menu trước (Navi+ Docs).
- Hỗ trợ tối đa 3 cấp: Navi+ Mobile Menu hỗ trợ đầy đủ 3 cấp danh mục (danh mục chính, danh mục phụ và liên kết bên trong), khớp trọn vẹn với giới hạn nền tảng của Shopify (Navi+ Docs).
Quy trình thiết lập gồm 3 bước nhanh chóng:
- Trong dashboard Navi+, mở Desktop Mega Menu và sao chép mục nhúng (embed item).
- Mở Mobile Menu và dán mục nhúng vào cấp 1 của drawer.
- Bật tùy chọn Exclude when embedded cho các banner hoặc khối nội dung chỉ phù hợp với màn hình máy tính.
Để xem chi tiết từng thao tác, hãy xem tài liệu hướng dẫn cách reuse a Desktop Mega Menu on phones và quản lý hiển thị với Exclude when embedded.
Nếu bạn đã dùng Navi+ cho một Desktop Mega Menu, hãy thử sao chép mục nhúng của nó vào một Mobile Menu và xem trước trên điện thoại — nếu kết quả chưa như ý, chỉ cần xóa mục nhúng đó và mọi thứ khác không thay đổi.
Checklist hành động
Hãy làm theo checklist thực tế này để đồng bộ mega menu máy tính và menu di động của bạn:
- Xây dựng một cây menu duy nhất: Hoàn thiện cây danh mục trong Content > Menus, đảm bảo nằm trong giới hạn 3 cấp của Shopify.
- Lựa chọn phương pháp phù hợp: Chọn giữa cài đặt theme gốc (Cách 1), tạo menu riêng (Cách 2), hoặc chỉnh sửa code drawer (Cách 3).
- Nhân bản theme dự phòng: Luôn tạo một bản sao lưu của theme trước khi sửa Liquid hoặc chèn code tùy biến.
- Xếp các cột thành một cột: Đảm bảo các nhóm cột trên máy tính tự động chuyển thành danh sách một cột dễ đọc trên điện thoại.
- Loại bỏ các thành phần rườm rà: Ẩn bớt banner quảng cáo lớn và đồ họa nặng khỏi giao diện di động.
- Kiểm tra liên kết danh mục cha: Xác nhận danh mục cha mở được trang bộ sưu tập hoặc có liên kết “Xem tất cả” rõ ràng.
- Kiểm tra trên điện thoại thật: Thử nghiệm độ nhạy cảm ứng, độ mượt khi cuộn và kích thước vùng chạm tối thiểu 24x24 px trên phần cứng thực tế.
Câu hỏi thường gặp (FAQ)
Tôi có thể dùng một menu cho cả desktop và mobile không?
Có. Trong các theme như Dawn, ngăn kéo di động được dựng từ chính menu được gán cho header, giúp bạn duy trì một linklist duy nhất trong khi theme tự áp dụng các bố cục tương ứng.
Menu Shopify có thể có bao nhiêu cấp?
Một mục menu cấp đầu trong Shopify có thể có tối đa hai cấp con lồng bên dưới, tạo thành tổng cộng ba cấp phân tầng. Template drawer của Dawn duyệt qua các liên kết sâu đến cấp cháu.
Vì sao menu mobile của tôi phải chạm hai lần?
Các drawer di động mặc định thường dùng cấu trúc drill-down: người mua bấm vào danh mục cha để mở bảng con, rồi phải bấm thêm lần nữa để chọn link. Bạn có thể khắc phục bằng cách bung sẵn menu con hoặc bỏ bớt tầng cột trung gian.
Cột và hình ảnh của mega menu có hoạt động trên mobile không?
Các cột ngang không vừa với màn hình điện thoại nên sẽ được xếp chồng thành một cột. Hình ảnh và banner chiếm nhiều diện tích cuộn nên thường được ẩn đi thông qua cài đặt hiển thị.
Tôi có cần sửa code theme không?
Không bắt buộc. Nếu theme có hỗ trợ mega menu sẵn, bạn chỉ cần bật trong Theme Editor mà không cần chạm vào code. Bạn chỉ cần sửa code khi muốn thay đổi hành vi mặc định của drawer hoặc trỏ sang một menu riêng biệt.
Nguồn tham khảo
- Shopify Developer Documentation: Navigation and Search — Đặc tả kỹ thuật về đối tượng linklist và giới hạn lồng liên kết tối đa ba cấp.
- Shopify Dawn Repository: header.liquid — Mã nguồn triển khai các kiểu menu máy tính bao gồm dropdown, mega menu và drawer.
- Shopify Dawn Repository: header-drawer.liquid — Vòng lặp duyệt menu trong drawer di động đến cấp cháu.
- Shopify Liquid API Reference: Link Object — Tài liệu về các thuộc tính của link bao gồm số cấp lồng nhau.
- Nielsen Norman Group: Mega Menus Work Well Anywhere — Nghiên cứu UX về lỗi chạm cảm ứng, gom nhóm lựa chọn và thứ bậc thị giác.
- W3C Web Accessibility Initiative: Target Size Minimum (WCAG 2.2) — Tiêu chuẩn tiếp cận yêu cầu vùng chạm tối thiểu đạt 24x24 CSS pixel.
- Shopify Community: Main menu nesting mobile vs desktop — Thảo luận về vấn đề phải chạm hai lần trên thanh điều hướng Dawn di động.
- Shopify Community: Desktop Mega Menu and Mobile Hamburger Menu — Hướng dẫn cộng đồng về việc trỏ drawer sang menu di động riêng.
- Shopify Community: DAWN how to show nested menu/submenu on mobile — Nhu cầu hiển thị cấp 2 và cấp 3 cùng lúc trong menu mobile của Dawn.
- Shopify Community: How can I make my desktop menu identical on mobile — Thắc mắc của chủ shop về việc sao chép cấu trúc menu máy tính sang di động.
- Helium Meteor Documentation: Welcome to Meteor — Tổng quan về kiến trúc tách biệt giữa mẫu menu máy tính và di động.
- Clean Canvas Blog: Mega Menu Your Shopify Store — Tài liệu theme Symmetry khuyên dùng menu di động một tầng.
- Navi+ Documentation: Create a Desktop Mega Menu — Hướng dẫn kỹ thuật về xếp cột, mục nhúng và kiểm soát hiển thị.
- Navi+ Documentation: Create a Mobile Menu — Hướng dẫn cấu trúc menu di động 3 cấp và nhúng drawer.
- Navi+ Documentation: Item Visibility — Hướng dẫn dùng tính năng Exclude when embedded để ẩn mục trên thiết bị cụ thể.
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.