Cách tạo menu máy tính và menu di động riêng cho cửa hàng Shopify (Từng bước chi tiết)

Khi thiết kế giao diện cho cửa hàng Shopify, thanh điều hướng trên máy tính thường cần hiển thị đầy đủ danh mục: bộ sưu tập sản phẩm, chương trình khuyến mãi và các menu thả xuống nhiều tầng. Tuy nhiên, khi xem cửa hàng trên điện thoại thông minh, toàn bộ hệ thống liên kết đồ sộ đó dễ biến thành một ngăn kéo trượt chật chội, buộc khách hàng phải cuộn mỏi tay để tìm món đồ cần mua.

Chủ shop thường tìm kiếm một nút gạt đơn giản trong trang quản trị Shopify để gán một menu cho máy tính và một menu ngắn gọn hơn cho điện thoại. Thế nhưng, nhiều theme không có sẵn tùy chọn tách riêng này. Shopify cho phép bạn tạo nhiều menu trong Content > Menus, nhưng theme mới là nơi quyết định menu nào hiện ở đâu — và hầu hết theme đều cho cả desktop lẫn mobile đọc chung một menu.

Để phân tách chúng, bạn có thể chọn giữ một menu tinh gọn, chỉnh sửa code ngăn kéo của theme hoặc sử dụng ứng dụng điều hướng chuyên dụng. Bài viết này sẽ hướng dẫn bạn chi tiết từng cách thực hiện.

Câu trả lời nhanh: Shopify có thể hiện menu khác nhau trên điện thoại không?

Không thể với hầu hết theme mặc định. Bạn tạo menu ở Content > Menus, nhưng theme quyết định vị trí hiển thị, và các theme như Dawn cấp cùng một menu cho cả header máy tính lẫn ngăn kéo di động. Để tách chúng, bạn cần sửa code drawer hoặc dùng một ứng dụng menu.

Bạn có ba phương án xử lý chính:

• Cách 1: Giữ một menu và để ngăn kéo theme tự xử lý trên mobile. Duy trì một danh sách liên kết tinh gọn trong Content > Menus mà không cần can thiệp code.
• Cách 2: Gán menu di động riêng bằng cách sửa code theme. Nhân bản theme để sao lưu an toàn, sau đó chỉnh sửa file drawer (như snippets/header-drawer.liquid trong Dawn) để gọi handle của menu di động.
• Cách 3: Dùng ứng dụng menu điều hướng. Xây dựng mega menu nhiều cột cho máy tính và ngăn kéo drawer hoặc thanh tab bar đáy cho di động, kiểm soát hiển thị riêng cho từng thiết bị mà không cần sửa code.

Để đánh giá giải pháp nào phù hợp nhất với quy mô catalog của bạn, hãy xem bảng so sánh ở phần Đánh đổi bên dưới.

Cơ chế hoạt động của menu Shopify trên máy tính và điện thoại

Concept illustration: một menu chính Shopify cấp dữ liệu cho cả header máy tính và ngăn kéo di động.

Trong Shopify, dữ liệu liên kết điều hướng được quản trị tập trung tại mục Content > Menus. Tuy nhiên, theo tài liệu từ Shopify Help Center, vị trí hiển thị main menu và dropdown phụ thuộc vào theme của bạn.

Ở theme mặc định Dawn của Shopify, section Header chỉ có một cài đặt menu kiểu link_list duy nhất (mặc định là main-menu). Trên màn hình máy tính, theme hiển thị menu này theo hàng ngang, mở ra các danh mục con trong một Header dropdown.

Trên màn hình điện thoại, nút hamburger mở ra một Mobile drawer. Trong mã nguồn của Dawn, file template dựng ngăn kéo này là snippets/header-drawer.liquid. Vòng lặp Liquid chính bên trong file được viết như sau:

{%- for link in section.settings.menu.links -%}

Do ngăn kéo đọc dữ liệu từ chính section.settings.menu.links — cài đặt đang cấp cho header máy tính — nên mỗi khi bạn chỉnh sửa Main menu trong admin, cả giao diện máy tính lẫn di động đều bị thay đổi đồng thời.

Một số theme có thể tích hợp sẵn ô chọn menu di động riêng trong cài đặt Header của Theme Editor. Hãy kiểm tra cài đặt Header trong Theme Editor trước; nếu theme không hỗ trợ sẵn, bạn hãy áp dụng một trong các cách dưới đây.

Bước 1: Tạo menu máy tính và menu di động trong Content > Menus

Dù bạn chọn tự sửa code hay dùng ứng dụng, bước đầu tiên luôn là tạo sẵn hai danh sách liên kết trong admin Shopify.

Hãy luôn tạo menu tại Content > Menus.

Dựng menu máy tính (menu chính có menu thả xuống)

1. Trong admin Shopify, truy cập Content > Menus.
2. Nhấp vào Main menu có sẵn hoặc nhấp Add menu để tạo danh sách mới.
3. Nhấp Add menu item để thêm các danh mục cấp cao nhất (Trang chủ, Sản phẩm, Bộ sưu tập, Về chúng tôi).
4. Để tạo danh mục con, kéo mục đó thụt vào phía dưới mục cha. Theo hướng dẫn của Shopify Help Center về menu thả xuống, mục cấp cao nhất có tối đa hai cấp dropdown lồng bên dưới (tạo thành cấu trúc 3 tầng tối đa).

Dựng menu di động tinh gọn hơn

1. Quay lại Content > Menus và nhấp Add menu.
2. Đặt tên rõ ràng, ví dụ Mobile menu.
3. Chú ý phần handle (ví dụ mobile-menu). Bạn sẽ cần chuỗi ký tự này nếu làm theo Cách 2.
4. Chỉ thêm các liên kết thiết yếu: bộ sưu tập bán chạy, tìm kiếm, tra cứu đơn hàng và liên hệ hỗ trợ. Tránh lồng quá nhiều cấp con.
5. Nhấp Save menu.

[!NOTE] Việc tạo một Separate mobile menu trong Content > Menus mới chỉ lưu dữ liệu vào hệ thống. Menu này hoàn toàn chưa hiển thị trên website cho đến khi cài đặt theme, code Liquid hoặc một Menu app gọi đến nó.

Cách 1: Dùng chung một menu và để ngăn kéo theme tự xử lý trên mobile

Với các cửa hàng có danh mục sản phẩm gọn, giải pháp thuận tiện nhất là giữ một Main menu duy nhất và để ngăn kéo Mobile drawer mặc định của giao diện tự động định dạng trên màn hình nhỏ.

Bạn chỉ cần gom nhóm danh mục gọn gàng và hạn chế tầng lồng. Khi mở trên di động, theme sẽ tự động cuộn các liên kết này vào trong ngăn kéo trượt.

• Ưu điểm: Không cần viết code, không phát sinh chi phí ứng dụng và bảo trì rất nhẹ nhàng. Khi thêm danh mục mới trong Content > Menus, cả hai giao diện đều tự cập nhật.
• Nhược điểm: Màn hình máy tính và di động luôn giống hệt nhau. Nếu desktop dùng mega menu lớn với hàng chục liên kết, ngăn kéo mobile sẽ trở nên dài lê thê và khó cuộn.

Hãy kiểm tra Theme Editor xem giao diện của bạn có cho phép tinh chỉnh ngăn kéo hay không. Để tối ưu trải nghiệm chạm vuốt, bạn có thể tham khảo thêm hướng dẫn về mobile drawer menu best practices.

Cách 2: Gán menu di động riêng bằng cách chỉnh sửa code theme

Nếu muốn có menu di động riêng biệt mà không muốn cài đặt thêm ứng dụng, bạn có thể chỉnh sửa code Liquid của theme để trỏ ngăn kéo di động sang menu thứ hai.

Nhân bản theme trước khi thao tác

Theo khuyến nghị chính thức từ Shopify Help Center về quản lý theme, hãy luôn tạo bản sao theme làm backup để bạn có thể hủy các thay đổi và làm lại từ đầu nếu cần.

1. Vào Online Store > Themes.
2. Nhấp vào nút ba chấm (...) cạnh theme đang xuất bản và chọn Duplicate.
3. Tiến hành chỉnh sửa hoàn toàn trên bản sao chép chưa xuất bản này.

Trỏ ngăn kéo drawer sang menu di động của bạn

1. Trên bản theme nhân bản, nhấp vào nút ba chấm (...) và chọn Edit code.
2. Với theme Dawn, mở file snippets/header-drawer.liquid.
3. Tìm vòng lặp lặp qua các liên kết menu:

{%- for link in section.settings.menu.links -%}

1. Theo tài liệu tham khảo Liquid của Shopify về đối tượng linklists, bạn có thể truy cập một menu cụ thể qua đối tượng linklists bằng handle của menu. Hãy thay dòng code trên bằng:

{%- for link in linklists['mobile-menu'].links -%}

(Thay 'mobile-menu' bằng handle chính xác của menu bạn đã tạo ở Bước 1.)

Cách làm tương tự từng được chia sẻ trên diễn đàn Shopify Community cho theme Ride.

[!WARNING] Tên file ở trên chỉ là ví dụ cho Dawn; theme khác dùng file khác, hãy tìm vòng lặp tương tự đọc section.settings.menu. Bạn chỉ nên thay vòng lặp ngoài cùng; các vòng lặp con bên trong cần giữ nguyên cấu trúc để menu phụ hiển thị đúng. Sau khi cập nhật theme, đoạn code Liquid sửa tay có thể cần được áp dụng lại.

Hãy xem trước thật kỹ bản theme nhân bản trên cả desktop lẫn mobile trước khi chính thức xuất bản.

Cách 3: Dùng ứng dụng menu để tách riêng menu máy tính và di động

Nếu bạn muốn thao tác trực quan bằng kéo thả mà không cần đụng đến code Liquid, việc sử dụng một Menu app chuyên dụng là lựa chọn an toàn.

Ứng dụng điều hướng cho phép bạn thiết kế các bố cục riêng cho từng thiết bị: dựng mega menu nhiều cột cho máy tính và tạo ngăn kéo trượt gọn gàng hoặc thanh tab bar cố định ở đáy cho điện thoại.

Khi chọn app trên Shopify App Store, bạn nên chú ý các tiêu chí:

• Nút bật tắt theo thiết bị: App cho phép gán cụ thể menu nào hiển thị trên Mobile, Desktop hoặc cả hai.
• Xem trước giao diện di động: Có màn hình preview trực quan ngay trong trình chỉnh sửa.
• Cách ứng dụng cài vào theme: Kiểm tra xem app tự thêm mình qua Theme App Embed hay yêu cầu bạn sửa file theme.
• Tương thích với theme: Hoạt động ổn định cùng header của theme bạn đang dùng.

Để tìm hiểu dạng menu nào phù hợp nhất với cửa hàng của mình, bạn có thể tham khảo bài viết hướng dẫn choose the right menu type for each screen.

Nguyên tắc thiết kế cho menu di động

Concept illustration: cấu trúc lồng tầng quá sâu đối lập với menu rút gọn có vùng chạm lớn thuận tay.

Khi thiết kế menu cho điện thoại, bạn nên áp dụng các nguyên tắc công thái học sau:

• Fewer items (Ít mục hơn): Màn hình điện thoại có chiều dọc hạn chế. Hãy ưu tiên danh mục bán chạy, sản phẩm mới, ô tìm kiếm và hỗ trợ. Đưa các liên kết phụ (như Tuyển dụng, Báo chí) xuống chân trang (footer).
• Larger tap targets (Vùng chạm lớn): Ngón tay bấm không chuẩn xác như chuột máy tính. Tiêu chuẩn WCAG 2.2 Target Size (Minimum) 2.5.8 yêu cầu kích thước mục tiêu cho thao tác trỏ tối thiểu là 24×24 CSS pixel (có một số ngoại lệ). Đệm khoảng cách rộng rãi giữa các dòng menu giúp người dùng dễ bấm mà không chạm nhầm.
• Shallow nesting (Phân cấp nông): Các accordion lồng sâu khó dùng hơn trên màn hình nhỏ. Hãy ưu tiên Shallow nesting: danh sách phẳng hoặc tối đa một cấp danh mục con.
• Điều hướng vượt ngoài hamburger: Nghiên cứu từ Nielsen Norman Group về khả năng nhận diện menu di động chỉ ra rằng biểu tượng hamburger không phải ai cũng nhận ra hoặc chủ động tìm kiếm ngay. Việc kết hợp ngăn kéo với các thành phần điều hướng nhìn thấy được — như thanh tab bar đáy — giúp khách hàng truy cập ngay các mục quan trọng.

Xem thêm phân tích sâu của chúng tôi về giải pháp mobile navigation beyond the hamburger menu.

Kiểm tra kỹ trước khi xuất bản

Theo khuyến nghị của Shopify Help Center, bạn nên kiểm tra menu trên thiết bị di động thực tế để đảm bảo các menu thả xuống mở ra đúng như mong muốn.

Các bước kiểm tra cần làm:

1. Xem trước trong Theme Editor: Chuyển đổi giữa chế độ Desktop và Mobile để kiểm tra bố cục tổng thể.
2. Thử nghiệm trên điện thoại thật: Mở link xem trước trên điện thoại qua trình duyệt Safari và Chrome.
3. Đóng mở ngăn kéo: Kiểm tra thao tác mở và đóng drawer có mượt mà không.
4. Mở từng menu thả xuống: Bấm vào từng danh mục con để kiểm tra độ nhạy và xem chữ có bị tràn mép không.
5. Kiểm tra liên kết đích: Bấm thử mọi liên kết để chắc chắn không trỏ vào trang 404 hay bộ sưu tập trống.
6. Xoay màn hình ngang: Xoay điện thoại nằm ngang để xác nhận menu không bị che mất nút đóng.
7. Kiểm tra trên các trang con: Thử mở menu từ trang chủ, trang bộ sưu tập và trang chi tiết sản phẩm.

Các lỗi thường gặp và cách khắc phục

• Điện thoại vẫn hiện menu cũ sau khi sửa code: Bạn có thể đang xem theme chính thức trong khi code mới sửa ở bản theme nhân bản chưa xuất bản. Hoặc kiểm tra lại handle trong linklists['mobile-menu'].links xem đã trùng khớp từng chữ cái với Content > Menus chưa.
• Menu mới tạo không hiển thị ở đâu cả: Tạo menu trong Content > Menus mới chỉ lưu dữ liệu. Menu sẽ không hiện cho đến khi bạn gán nó vào Header settings của theme, gọi qua code Liquid hoặc chọn trong ứng dụng.
• Xoá mục cha làm mất toàn bộ danh mục con: Theo hướng dẫn chỉnh sửa menu của Shopify, khi bạn xoá một mục có các mục con lồng bên dưới, các mục con đó cũng sẽ bị xoá theo. Hãy kéo các mục con ra ngoài trước khi xoá mục cha.
• Menu thả xuống không mở được trên điện thoại: Kiểm tra độ sâu phân cấp trong Content > Menus. Shopify cho phép tối đa hai cấp lồng dưới mục cao nhất; hãy giữ menu di động trong giới hạn đó và thử trong drawer của theme.
• Mục di động bị mất submenu sau khi sửa code: Đảm bảo bạn chỉ thay thế vòng lặp ngoài cùng for link in section.settings.menu.links. Nếu sửa nhầm các vòng lặp con bên trong (for childlink in link.links), các menu phụ sẽ biến mất.

Đánh đổi: Khi nào không nên tách riêng hai menu

Khi nào không nên tách riêng hai menu

Việc tách thành hai menu độc lập không phải lúc nào cũng là giải pháp tốt nhất:

• Catalog nhỏ: Nếu cửa hàng có catalog nhỏ, đơn giản, một menu tinh gọn dùng chung cho cả hai màn hình sẽ hiệu quả hơn.
• Không có nhân sự bảo trì thường xuyên: Khi có hai menu, bạn phải cập nhật ở cả hai nơi mỗi khi có bộ sưu tập mới. Nếu quên cập nhật, khách dùng điện thoại sẽ bỏ lỡ sản phẩm mới.
• Nâng cấp theme thường xuyên mà không biết code: Nếu dùng Cách 2, sau khi cập nhật theme bạn có thể phải chèn lại đoạn mã thủ công.

Nếu một menu duy nhất được sắp xếp gọn gàng đã đủ phục vụ tốt cả hai thiết bị, việc giữ nguyên một menu sẽ mang lại độ ổn định cao nhất.

Vị trí của Navi+ trong giải pháp này

Nếu bạn không muốn sửa code theme, Navi+ cho phép bạn dựng một mega menu cho máy tính và một menu di động hoặc tab bar riêng, rồi chọn mỗi menu hiển thị trên thiết bị nào. Bạn có thể dùng thử với gói miễn phí và giữ nguyên theme của mình.

Navi+ cho phép bạn dựng thanh sticky bottom tab bar, desktop mega menu nhiều cột, ngăn kéo mobile drawer, icon menu và nút nổi liên hệ bằng thao tác kéo thả, không cần đụng đến code theme.

Trong tab Publish của mỗi menu, Navi+ cung cấp nút gạt kiểm soát hiển thị riêng biệt:

• Toggle Mobile: Bật/tắt menu trên màn hình điện thoại.
• Toggle Desktop: Bật/tắt menu trên màn hình máy tính.

Theo mặc định, chỉ có Mobile được bật khi tạo menu di động. Bạn có thể giữ nguyên cấu hình này cho ngăn kéo mobile, và tạo một menu khác bật riêng Desktop cho máy tính. Cả hai menu hoạt động độc lập trên cùng một cửa hàng, hỗ trợ phân cấp tối đa 3 tầng.

Để tối ưu trải nghiệm chạm vuốt trên di động, bạn có thể kết hợp ngăn kéo trượt với thanh bottom tab bar for Shopify, giúp các nút chức năng cốt lõi luôn nằm gọn trong tầm với ngón tay cái của khách hàng.

Checklist hành động

• Đánh giá catalog: Xác định xem cửa hàng cần tách riêng hai menu hay chỉ cần tinh gọn lại một menu chung.
• Dựng menu máy tính: Vào Content > Menus, thiết lập Main menu với đầy đủ danh mục và dropdown.
• Dựng menu di động: Trong Content > Menus, tạo một menu ngắn gọn hơn và ghi lại handle của menu đó.
• Kiểm tra Header settings: Xem Theme Editor phần Header có sẵn ô gán menu di động riêng hay không.
• Chọn phương án thực hiện: Chọn giữa Cách 1 (một menu), Cách 2 (sửa code) hoặc Cách 3 (dùng app).
• Nhân bản theme trước khi code: Nếu dùng Cách 2, luôn nhân bản theme và chỉnh sửa file snippets/header-drawer.liquid trên bản sao.
• Cấu hình hiển thị theo thiết bị: Nếu dùng app, bật Desktop cho mega menu và bật Mobile cho menu di động.
• Kiểm tra trên điện thoại thật: Mở thử ngăn kéo, menu con, kích thước vùng chạm và xoay ngang màn hình.
• Đồng bộ khi có thay đổi: Cập nhật cả hai menu trong Content > Menus mỗi khi có sản phẩm hoặc collection mới.

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

Tôi có thể hiện menu khác nhau trên điện thoại và máy tính không?

Có, nhưng phần lớn theme mặc định đều cấp chung một menu cho cả hai thiết bị. Để hiển thị các liên kết khác nhau, bạn có thể sửa code drawer của theme hoặc dùng ứng dụng menu.

Vì sao menu trên điện thoại hiện cùng các liên kết với menu máy tính?

Ở các theme như Dawn, template ngăn kéo di động lặp qua chính menu được chọn trong section Header (section.settings.menu.links). Vì vậy việc sửa Main menu trong admin sẽ thay đổi cả hai giao diện.

Tôi có cần sửa code theme để dùng hai menu không?

Không bắt buộc. Bạn có thể sử dụng ứng dụng menu để gán riêng từng menu theo thiết bị mà không cần sửa code. Nếu chọn sửa code, hãy luôn nhân bản theme trước.

Tôi tạo menu ở đâu trong Shopify?

Bạn tạo và quản lý tất cả các menu của cửa hàng trực tuyến tại mục Content > Menus trong trang quản trị Shopify.

Menu thả xuống của Shopify có thể có bao nhiêu cấp?

Một mục menu cấp cao nhất có tối đa hai cấp menu thả xuống lồng bên dưới, tạo thành tối đa ba tầng điều hướng.

Điều gì xảy ra nếu tôi xoá một mục menu cha?

Khi bạn xoá một mục cha đang chứa các mục con bên dưới, các mục con đó cũng sẽ bị xoá theo. Hãy kéo các mục con ra ngoài trước khi xoá mục cha.

Nguồn tham khảo

• Shopify Help Center: Editing Menus — Hướng dẫn quản trị menu tại Content > Menus và quy tắc xoá mục cha.
• Shopify Help Center: Drop-down Menus — Quy định về giới hạn hai cấp lồng, vị trí theo theme và kiểm tra trên thiết bị di động.
• Shopify Help Center: Duplicating Themes — Khuyến nghị nhân bản theme làm bản sao lưu an toàn trước khi chỉnh sửa mã nguồn.
• Shopify Developer Documentation: Liquid linklists Object — Tài liệu kỹ thuật truy cập menu thông qua đối tượng linklists bằng handle.
• Shopify Dawn Repository: sections/header.liquid — Mã nguồn mở Dawn hiển thị cài đặt link_list mặc định trong section header.
• Shopify Dawn Repository: snippets/header-drawer.liquid — Mã nguồn mở Dawn minh họa ngăn kéo di động đọc qua section.settings.menu.links.
• Shopify Community: Customizing Main Menu and Sidebar Menu for Desktop and Mobile — Thảo luận cộng đồng về giải pháp chỉnh sửa header-drawer.liquid trên theme Ride.
• Shopify Community: Use Different Menu for Mobile and Desktop — Chủ đề cộng đồng phản ánh nhu cầu thực tế của chủ shop về việc phân tách menu.
• Fudge: How to Change Mobile Menu Behavior in Shopify — Phân tích về hành vi dùng chung menu mặc định và cách tùy biến giao diện di động.
• W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Minimum) — Tiêu chuẩn thành công 2.5.8 quy định vùng chạm tối thiểu 24×24 CSS pixel.
• Nielsen Norman Group: Mobile Navigation Beyond the Hamburger — Nghiên cứu hành vi người dùng về mức độ nhận diện biểu tượng hamburger và giải pháp kết hợp.
• Navi+ Help Center: Display Rules Settings — Tài liệu hướng dẫn thiết lập quy tắc hiển thị menu trên Mobile và Desktop.
• Shopify App Store: Navi+ Navigation & Menu Bar — Chi tiết tính năng kéo thả mega menu, drawer và bottom tab bar.