Cách tạo menu Shopify giống demo theme (Cài đặt theme, ứng dụng hoặc code)

Khi xem bản xem trước demo của một theme Shopify, bạn ấn tượng với thanh điều hướng nhiều cột hoành tráng, có hình ảnh minh họa nổi bật và quyết định cài đặt theme về store. Nhưng khi mở trang lên, menu của bạn lại hoàn toàn khác: một danh sách thả xuống đơn cột ngắn ngủi, nhạt nhòa và nhiều khoảng trống.

Menu của bản demo theme không phải là phép màu. Đó là kết quả của việc kết hợp cài đặt header trong theme với một cấu trúc menu lồng 3 cấp chứa đầy nội dung mẫu. Bạn hoàn toàn có thể tái hiện diện mạo đó bằng cách chẩn đoán chính xác kiểu menu của demo, tận dụng cài đặt có sẵn của theme, dùng ứng dụng hỗ trợ hoặc can thiệp code, đồng thời quy hoạch riêng giao diện mobile.

Quick answer: how to make your Shopify menu look like the demo

Menu demo theme thường được tạo từ cài đặt header của theme kết hợp với menu nhiều cấp chứa đầy nội dung mẫu, chứ không tự xuất hiện từ menu mặc định. Để làm giống demo, bạn hãy xác định kiểu menu, dựng đủ 3 cấp trong Content > Menus, bật tuỳ chọn tương ứng trong Header, rồi thêm ảnh hoặc dùng app nếu theme thiếu kiểu đó.

Để triển khai chuẩn xác trên cửa hàng của bạn, hãy thực hiện theo 4 bước cốt lõi sau:

1. Xác định kiểu menu của demo: Quan sát bản demo để nhận diện đó là dropdown đơn cột, mega menu nhiều cột, ngăn kéo drawer hay thanh tab bar đáy.
2. Dựng đủ các cấp menu lồng nhau: Thiết lập tối đa 3 cấp liên kết bên trong mục Content > Menus của Shopify admin.
3. Bật cài đặt Header tương ứng: Mở theme editor, tìm phần Header settings và kích hoạt đúng khối hiển thị mega menu.
4. Bổ sung hình ảnh hoặc dùng app: Tải ảnh nổi bật trực tiếp trong khối theme, hoặc cài ứng dụng mega menu nếu theme hiện tại không có sẵn bố cục nhiều cột.

Cần lưu ý rằng menu trên điện thoại hoạt động rất khác so với máy tính để bàn, do đó bạn cần quy hoạch menu ngăn kéo drawer hoặc thanh tab bar mobile một cách độc lập.

Why your Shopify menu doesn’t look like the theme demo

Sự chênh lệch lớn giữa bản demo mẫu và cửa hàng thực tế sau khi cài theme thường khiến các chủ shop bối rối. Hiểu rõ nguyên nhân gốc rễ sẽ giúp bạn xử lý vấn đề một cách nhanh chóng.

Demo sample content

Một bản demo theme được dựng để cho thấy theme ở trạng thái đẹp nhất. Bản demo theme chứa sample products and content to help you get a feel of how the theme looks and works. Các cột menu trong demo được lấp đầy bằng danh mục, hình ảnh và banner mà cửa hàng của bạn chưa có.

Khi cài đặt hoặc thử nghiệm theme, you can try it by previewing the theme in your Shopify admin. Tuy nhiên, cơ chế của Shopify là you will need to preview the theme using whatever data is live on your site. Nếu cửa hàng của bạn chỉ mới có vài bộ sưu tập ít ỏi hoặc cây menu chỉ gồm các liên kết cấp 1 bằng phẳng, theme sẽ không có dữ liệu để hiển thị. Phần nội dung mẫu Demo sample content của bản demo không hề tự động điền vào cửa hàng của bạn. Một cây danh mục thưa thớt thường tạo ra một khung menu thưa thớt, lệch lạc.

The theme’s own menu style

Nhiều theme cung cấp nhiều hơn một kiểu hiển thị điều hướng trong hệ thống cài đặt. Chẳng hạn trong một chủ đề trên cộng đồng Shopify về theme Prestige, một chủ shop hỏi vì sao menu của mình không giống demo; Shopify Support trả lời rằng the Prestige theme also has two different menu styles, and this is likely why your menu looks different. Nếu bạn đang sử dụng mẫu này, hãy tham khảo hướng dẫn chi tiết về cách add a mega menu to Prestige.

Bên cạnh đó, tài liệu chính thức từ Shopify chỉ rõ rằng the main menu and drop-down menus display in different locations in your online store depending on your theme. Vì vậy cùng một menu có thể xuất hiện ở vị trí hoặc dạng khác nhau giữa các theme.

Một hiểu lầm phổ biến khác liên quan đến preset (theme style). Nhiều chủ shop cho rằng khi đổi preset của theme thì giao diện menu sẽ tự biến đổi theo. Thực tế, preset thiên về các cài đặt toàn trang: each theme style is a set of pre-selected theme settings that configure site-wide colors, fonts, product options, and more. Một preset chủ yếu chỉ thay đổi các cài đặt về màu sắc, phông chữ và tùy chọn hiển thị; việc đổi preset khó có thể tự động biến một dropdown đơn giản thành mega menu nhiều cột.

Step 1: Identify the menu type the demo uses

Trước khi can thiệp vào cài đặt của Shopify admin, hãy mở trang demo của theme trên cả trình duyệt máy tính lẫn điện thoại di động. Hãy rê chuột hoặc chạm thử vào các mục danh mục cấp 1 để quan sát cách menu mở ra.

Theo định nghĩa từ nhóm nghiên cứu trải nghiệm người dùng Nielsen Norman Group, mega menu là a type of expandable menu in which many choices are displayed in a two-dimensional dropdown layout. Các phát hiện thực nghiệm của họ khẳng định rằng mega menus show everything at a glance, so users can see rather than try to remember.

Bảng dưới đây giúp bạn đối chiếu và nhận diện chính xác kiểu menu mà bản demo đang áp dụng:

Khi phân tích demo, hãy ghi chú lại: Menu có bao nhiêu cột, có chứa hình ảnh hay nhãn khuyến mãi không, và độ sâu phân cấp là bao nhiêu tầng. Một Drawer menu phù hợp cho danh mục tra cứu phụ, trong khi Bottom tab bar giúp khách thao tác nhanh trên điện thoại. Để tìm hiểu sâu về độ phù hợp cho từng quy mô sản phẩm, hãy xem hướng dẫn về cách choosing the right menu type.

Minh họa khái niệm: So sánh menu dropdown đơn cột với mega menu nhiều cột trên giao diện mô phỏng.

Hình 1: Minh họa khái niệm — Menu dropdown dạng Single column list so sánh với Mega Menu dạng Multi-column panel có Featured image.

Step 2: Check your theme’s header settings and menu structure

Nếu theme của bạn có sẵn tính năng dựng menu như bản demo, bạn có thể thiết lập hoàn toàn miễn phí mà không cần cài thêm công cụ phụ. Quá trình này đòi hỏi hai bước phối hợp nhịp nhàng: dựng cây liên kết trong admin và kích hoạt giao diện trong theme editor.

Build three levels in Content > Menus

Tất cả các menu mặc định của Shopify được quản lý tập trung trong phần quản trị. Tài liệu Shopify Help Center nêu rõ: you can add, remove, change, and view your links and menus from Content > Menus in your Shopify admin (với các giao diện admin cũ, mục này nằm tại Online Store > Navigation).

Để hiển thị dạng nhiều cột, bạn bắt buộc phải kéo thả các liên kết thành các cấp lồng nhau Nested menu levels. Giới hạn nền tảng của Shopify quy định: the top-level item can have up to two levels of nested drop-down menus, tức tổng cộng có tối đa 3 cấp phân cấp:

• Cấp 1 (Mục gốc): Danh mục lớn hiển thị trực tiếp trên thanh header (ví dụ: “Thời trang nam”).
• Cấp 2 (Tiêu đề cột con): Nhóm sản phẩm đóng vai trò tiêu đề của từng cột (ví dụ: “Áo nam”, “Quần nam”, “Phụ kiện”).
• Cấp 3 (Liên kết sản phẩm/bộ sưu tập): Các liên kết chi tiết nằm dưới tiêu đề cột (ví dụ: “Áo sơ mi”, “Áo thun”, “Quần jean”).

Một số theme cần có cấp thứ ba này mới hiển thị mega menu. Ví dụ, nhà phát triển theme Fluorescent lưu ý rõ ràng trong tài liệu: for the mega navigation, you first need to create a nested menu with 3 levels of links. Nếu bạn chỉ tạo đến cấp 2, theme như vậy có thể chỉ hiển thị dạng Single column list thông thường thay vì Multi-column panel.

Turn on the mega menu in Header settings

Sau khi lưu cấu trúc cây thư mục trong admin, hãy truy cập vào Online Store > Themes > Customize để mở theme editor. Bấm chọn phần Header ở cột bên trái để truy cập vào Header settings.

Shopify lưu ý rằng the sections and blocks that are available in the theme editor depend on your theme and theme version. Tên gọi của các tùy chọn khác nhau tùy theo từng theme; hãy tìm tùy chọn kiểu menu trong phần Header và đối chiếu với tài liệu của theme. Nếu cửa hàng đang sử dụng theme Dawn, bạn có thể tham khảo bài hướng dẫn add a mega menu to Dawn.

Đối với các theme cho phép chèn banner hoặc hình ảnh quảng bá trong menu, bạn có thể select or upload a Mega nav featured image to display inside the mega navigation menu. Việc bổ sung một ô Featured image đẹp mắt sẽ giúp tái hiện hoàn chỉnh cảm giác sang trọng của bản demo. Nếu phần Header của bạn không hề có tùy chọn mega menu, hãy đọc tài liệu hướng dẫn của theme hoặc liên hệ với bộ phận hỗ trợ của đơn vị phát triển.

Video hướng dẫn chính thức từ Shopify Help Center dưới đây minh họa các bước tạo liên kết lồng nhiều cấp trong trang quản trị:

Step 3: Rebuild the demo menu with a mega menu app

Khi theme bạn đang dùng hoàn toàn không có tùy chọn mega menu, hoặc khi bạn muốn gắn thêm các thẻ sản phẩm nổi bật, huy hiệu giảm giá mà theme không hỗ trợ, việc sử dụng ứng dụng chuyên dụng Mega menu app là giải pháp tối ưu.

Một ứng dụng menu bên thứ ba là lựa chọn hợp lý trong ba trường hợp điển hình:

1. Giới hạn tính năng của theme: Theme đang dùng chỉ hỗ trợ dropdown đơn cột, không thể chia cột trên màn hình rộng.
2. Nhu cầu trưng bày trực quan: Bạn muốn hiển thị sản phẩm, bộ sưu tập, hình ảnh hoặc icon bên trong từng cột menu.
3. Độc lập khi nâng cấp theme: Bạn muốn đổi sang giao diện theme khác trong tương lai mà không phải làm lại cấu trúc menu từ đầu.

Quy trình chuẩn để dựng lại menu demo thông qua app gồm các bước:

• Chọn mẫu khởi tạo (Template): Chọn một bố cục có số cột và cấu trúc tương đồng với bản demo bạn muốn học hỏi.
• Ánh xạ cột danh mục: Thiết lập các mục cấp 2 làm tiêu đề cột và sắp xếp các liên kết cấp 3 tương ứng vào từng cột.
• Thêm tư liệu hình ảnh: Gắn ảnh đại diện bộ sưu tập, banner quảng bá vào các ô khuyến mãi đã thiết kế.
• Kiểm tra đa thiết bị: Xem trước khả năng co giãn và thao tác trên cả màn hình máy tính lẫn điện thoại.
• Kích hoạt qua Theme App Extension: Bật khối app nhúng trong theme editor. Với chuẩn kiến trúc hiện đại của Shopify, merchants won’t need to manually edit their theme code.

Khi lựa chọn app, hãy ưu tiên các giải pháp trực quan, thao tác kéo thả và không gây xáo trộn mã nguồn Liquid của theme. Để nắm rõ các nguyên tắc căn chỉnh khoảng cách và tỷ lệ hình ảnh, bạn có thể tham khảo cẩm nang về mega menu best practices.

Step 4: Make the mobile menu match the demo

Một sai lầm rất thường gặp khi sao chép menu demo là chỉ tập trung tinh chỉnh trên máy tính mà quên mất trải nghiệm trên điện thoại. Cơ chế lướt web bằng ngón tay trên màn hình nhỏ hoàn toàn khác biệt với chuột máy tính.

Nghiên cứu công thái học từ Baymard Institute nhấn mạnh: during usability testing we consistently observe that mobile navigation is particularly difficult for users. Do không gian hẹp, most often the mobile menu is by default collapsed and hidden behind a ‘3-bars’ ‘hamburger’ icon.

Các thành phần đồ họa đẹp mắt trên desktop cũng không thể tự động co nhỏ lại trên điện thoại. Ví dụ trong các theme của Fluorescent, nhà phát triển ghi chú rõ: this image is not displayed on mobile. Một bảng menu nhiều cột rất khó hiển thị ngang trên màn hình điện thoại mà không gây cuộn ngang hoặc làm vùng chạm trở nên quá nhỏ.

Để bản mobile đạt độ hoàn thiện tương đương bản demo:

• Drawer menu: Chuyển đổi hệ thống phân cấp thành dạng ngăn kéo trượt Drawer menu. Các mục cấp 1 cần có nút chạm mở rộng mượt mà để hiện cấp 2 và cấp 3, giữ trọn vẹn cùng một cấu trúc logic Same structure như trên bản máy tính.
• Bottom tab bar: Nếu bạn muốn vài trang quan trọng luôn trong tầm tay, hãy kết hợp ngăn kéo header với một thanh Bottom tab bar. Đặt một vài lối tắt quan trọng (Trang chủ, Tìm kiếm, Danh mục, Giỏ hàng, Tài khoản) cố định ở đáy màn hình giúp khách mua bấm chuyển đổi tức thì trong tầm với của ngón cái.

Để tìm hiểu chi tiết các giải pháp tối ưu cho điện thoại, hãy xem hướng dẫn về mobile drawer menu và cách thiết lập bottom tab bar for mobile.

Minh họa khái niệm: Cấu trúc mega menu desktop được kế thừa trên mobile dưới dạng menu ngăn kéo drawer và tab bar đáy.

Hình 2: Minh họa khái niệm — Các danh mục mega menu desktop duy trì cùng cấu trúc Same structure trên Drawer menu di động và Bottom tab bar.

Custom Liquid code vs. an app: trade-offs

Khi các tùy chọn có sẵn của theme không đáp ứng được yêu cầu, chủ cửa hàng thường đứng trước hai ngã rẽ: tự viết mã code Liquid hoặc cài đặt ứng dụng điều hướng chuyên nghiệp. Mỗi phương án đều có những ưu và khuyết điểm cần cân nhắc kỹ lưỡng:

Cài đặt theme có sẵn luôn là phương án an toàn nhất. Tài liệu của Shopify nêu rằng any customizations made to your theme using the theme editor are copied over and applied to the updated theme.

Viết mã code tùy chỉnh mang lại nhiều quyền kiểm soát giao diện nhất. Như các chuyên gia trên diễn đàn Shopify chia sẻ, việc tạo menu theo ý muốn can be done using custom code on the theme. Tuy nhiên, can thiệp code làm tăng công việc bảo trì. Mỗi khi nhà sản xuất cập nhật bản vá lỗi cho theme, các đoạn mã bạn thêm vào có thể không tự động chuyển sang bản mới. Shopify khuyến cáo rõ ràng: you should always save a copy of any customized code before updating your theme, bởi bạn có thể phải tự ghép nối lại từng dòng mã sau này.

Ứng dụng Mega menu app sử dụng chuẩn Theme App Extension mang lại sự cân bằng lý tưởng. Do merchants won’t need to manually edit their theme code, cấu trúc file của bạn được giữ nguyên trạng thái sạch. Dẫu vậy, app vẫn tạo ra một sự phụ thuộc công nghệ ngoài, có thể phát sinh chi phí định kỳ và Shopify cũng lưu ý rằng some apps might not be compatible with a new theme.

Để hiểu rõ hơn về các giới hạn của menu mặc định, mời bạn đọc phân tích về limits of theme menus.

Common mistakes when copying a demo menu

Trong quá trình nỗ lực tái hiện lại menu của bản demo, các chủ shop thường mắc phải 5 sai sót phổ biến sau:

1. Bộ sưu tập chưa có sản phẩm và thiếu hình ảnh: Menu demo gây ấn tượng vì mỗi danh mục đều chứa hàng chục sản phẩm có ảnh chụp tuyệt đẹp. Nếu bộ sưu tập của bạn chỉ có 1–2 sản phẩm hoặc chưa có ảnh đại diện, bảng menu sẽ trông cực kỳ trống trải và thiếu chuyên nghiệp.
2. Tạo cấu trúc menu phẳng: Thêm toàn bộ các danh mục thành hàng ngang cấp 1 hoặc cấp 2 trong Content > Menus sẽ khiến theme không thể kích hoạt thuật toán chia cột. Một số theme cần đủ 3 cấp mới hiển thị mega menu.
3. Bỏ quên kiểm tra giao diện mobile: Thiết kế một bảng menu desktop nhiều cột hoành tráng nhưng không kiểm tra trên điện thoại thường dẫn đến menu bị vỡ. Hãy nhớ rằng một số theme ẩn ảnh nổi bật của mega menu trên mobile.
4. Bắt chước cấu trúc cồng kềnh khi catalog còn nhỏ: Bản demo được dựng để trưng bày một danh mục đầy đủ. Nếu cửa hàng bạn chỉ có vài bộ sưu tập, việc gượng ép dùng mega menu nhiều cột có thể làm rối mắt người mua.
5. Kỳ vọng đổi preset sẽ đổi luôn menu: Thay đổi preset của theme chỉ thay đổi màu sắc và phông chữ, hoàn toàn không tự động sắp xếp lại cây liên kết hay thêm khối menu cho bạn.

Where Navi+ fits

Nếu theme hiện tại của bạn không hỗ trợ kiểu menu như bản demo mong muốn, bạn có thể tham khảo việc dựng lại giao diện đó bằng Navi+ từ các mẫu có sẵn, sau đó tùy chỉnh cột và hình ảnh theo danh mục thực tế của cửa hàng.

Navi+ được thiết kế để giải quyết bài toán thiếu hụt bố cục điều hướng mà không bắt buộc bạn phải chỉnh sửa mã nguồn theme:

• Desktop Mega Menu: Build mega menus with products, collections, images, icons, and flexible layouts thông qua giao diện kéo thả trực quan.
• Menu di động dạng ngăn kéo (Drawer): Create mobile menus, drawer menus, and hamburger menus for easier store browsing.
• Thanh Tab Bar đáy cố định: Add sticky bottom tab bars with icons and labels for app-like mobile navigation.
• Tạo menu không cần code: Generate menus with AI, templates, drag-and-drop editing, and no coding required.

Trong ứng dụng Navi+, bạn có thể chọn một mẫu khởi đầu từ màn hình “Create from a template”, tinh chỉnh các cột, hình ảnh và liên kết trực tiếp với các bộ sưu tập thực tế trên Shopify. Điểm tiện lợi là tính năng Mobile Menu của Navi+ có thể nhúng trực tiếp cấu trúc từ Desktop Mega Menu, giúp cả hai thiết bị chia sẻ cùng một cây danh mục nhất quán (hỗ trợ tối đa 3 cấp phân cấp).

Cần nhìn nhận thực tế rằng: các mẫu template chỉ là khung sườn khởi đầu. Ứng dụng không tự động sao chép nguyên trạng menu bí mật của một store khác; bạn vẫn cần nhập liệu đúng các bộ sưu tập và tải lên hình ảnh của chính thương hiệu mình.

Để xem khả năng tích hợp của Navi+ trên các mẫu theme phổ biến, mời bạn ghé thăm trang Navi+ menus on Shopify themes.

Video phân tích dưới đây mổ xẻ chi tiết cách xây dựng menu cho một theme Shopify, gồm mega menu, header cố định và tab bar:

Pre-publish checklist

Trước khi công bố menu mới cho khách hàng trải nghiệm, hãy rà soát kỹ lưỡng 8 tiêu chí kiểm tra sau:

• Nhận diện chính xác kiểu menu: Xác định rõ bản demo mẫu đang dùng dropdown đơn cột, mega menu nhiều cột, ngăn kéo drawer hay thanh tab bar.
• Đảm bảo cấu trúc đủ 3 cấp: Kiểm tra cây danh mục trong Content > Menus đã được kéo lồng đầy đủ cấp 1, cấp 2 và cấp 3 ở những mục cần hiển thị dạng cột.
• Rà soát nội dung bộ sưu tập: Đảm bảo mọi bộ sưu tập được gắn link đều có sản phẩm thực tế, không dẫn tới trang trắng rỗng.
• Bổ sung thẻ alt cho hình ảnh: Kiểm tra các ảnh nổi bật, banner gắn trong menu đã có văn bản thay thế (alt text) mô tả rõ ràng.
• Kích hoạt đúng tùy chọn Header: Bật chính xác khối mega menu hoặc khối app nhúng trong phần theme editor.
• Kiểm tra công thái học trên mobile: Mở thử nghiệm trên điện thoại thật để kiểm tra độ nhạy của nút bấm, vùng chạm ngón tay và thanh tab bar đáy.
• Sao lưu mã theme dự phòng: Luôn lưu lại một bản sao lưu toàn bộ code theme trước khi tiến hành sửa đổi Liquid thủ công.
• Đánh giá sau khi cập nhật theme: Kiểm tra lại hoạt động của menu và ứng dụng mỗi khi theme có đợt cập nhật phiên bản lớn.

FAQ

Why doesn’t my theme’s menu look like the demo?

Các cửa hàng demo luôn chứa sẵn sản phẩm và nội dung mẫu, đồng thời nhiều theme cung cấp nhiều hơn một kiểu hiển thị menu. Khi bạn xem trước theme trên cửa hàng của mình, hệ thống sử dụng dữ liệu thực tế hiện có, do đó danh mục trống sẽ tạo ra một menu rỗng.

How many levels can a Shopify menu have?

Một mục menu cấp 1 trên Shopify có thể chứa tối đa hai cấp con lồng nhau, tạo thành tổng cộng ba cấp phân cấp. Một số theme cần cấp thứ ba này để hiển thị mega menu.

Do I need an app or custom code for a mega menu like the demo?

Trước tiên hãy kiểm tra các tùy chọn trong phần Header của theme editor, vốn phụ thuộc vào từng theme và phiên bản cụ thể. Nếu theme không hỗ trợ, bạn có thể sử dụng ứng dụng mega menu mà không cần sửa mã theme, hoặc tự viết code Liquid và lưu lại bản sao dự phòng.

Will my menu break when I update my theme?

Các tùy chỉnh được thực hiện trực tiếp trong theme editor sẽ được tự động giữ lại khi nâng cấp theme. Tuy nhiên, các đoạn mã Liquid chỉnh sửa thủ công có thể sẽ phải chép lại, đồng thời bạn nên kiểm tra lại độ tương thích của các ứng dụng sau mỗi đợt cập nhật lớn.

Can mobile look the same as desktop?

Menu trên di động và máy tính khó có thể giống hệt nhau. Menu mobile thường được thu gọn phía sau biểu tượng hamburger, và một số theme không hiển thị hình ảnh của mega menu trên màn hình nhỏ. Bạn nên quy hoạch riêng một menu ngăn kéo hoặc thanh tab bar đáy cho bản di động.

Sources

1. Shopify Help Center — Drop-down menus. help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus
2. Shopify Help Center — Menus and links. help.shopify.com/en/manual/online-store/menus-and-links
3. Shopify Help Center — Sections and blocks in the theme editor. help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks
4. Shopify Help Center — Updating themes. help.shopify.com/en/manual/online-store/themes/managing-themes/updating-themes
5. Shopify Help Center — Adding, previewing, and buying themes. help.shopify.com/en/manual/online-store/themes/adding-themes
6. Out of the Sandbox — What to look for when trying out Shopify theme demos. outofthesandbox.com/blogs/shopify-theme-blog/shopify-theme-buying-tips
7. Shopify Community — Trying the Prestige theme but my menu doesn’t look like the one the demo. community.shopify.com/t/trying-the-prestige-theme-but-my-menu-doesn-t-look-like-the-one-the-demo/28768
8. Fluorescent Help — Context Mega Navigation. help.fluorescent.co/context/pages/header/mega-navigation
9. Fluorescent Help — Style Presets. help.fluorescent.co/ira/theme-styles/style-presets
10. Nielsen Norman Group — Mega Menus Work Well for Site Navigation. nngroup.com/articles/mega-menus-work-well/
11. Baymard Institute — Mobile Navigation Menu Usability Benchmark. baymard.com/mcommerce-usability/benchmark/mobile-page-types/navigation-menu
12. Shopify Dev Docs — Theme App Extensions. shopify.dev/docs/apps/build/online-store/theme-app-extensions
13. Shopify Community — How can I set my product collections to a stylish and useful navigation page like this Shopify store. community.shopify.com/t/how-can-i-set-my-product-collections-to-a-stylish-and-useful-navigation-page-like-this-shopify-store/333164
14. Shopify App Store — Navi+ Tab Bar & Mega Menu. apps.shopify.com/pronavi-navigation-design