Desktop Mega Menu Slide Menu Tab Bar

Baby Studio — catalog mẹ và bé dễ duyệt hơn trên Shopify với Mega Menu, Slide Menu và Tab Bar

Cách Baby Studio tổ chức lại điều hướng để catalog mẹ và bé dễ khám phá hơn trên cả desktop và mobile.

BS
Baby Studio
babystudio.com.au
Baby & nursery retail Shopify Mobile navigation
Tóm tắt nhanh
Ngành
Baby & nursery retail
Nền tảng
Shopify
Thách thức
Catalog nhiều nhóm sản phẩm, điều hướng còn phẳng
Navi+ menus
Desktop Mega Menu · Slide Menu · Tab Bar
Trọng tâm
Khám phá catalog trên desktop, thao tác nhanh trên mobile

Vấn đề của khách hàng

Baby Studio phục vụ nhóm khách rất đặc thù: cha mẹ, gia đình trẻ, và người mua quà cho trẻ nhỏ. Với nhóm khách này, nhu cầu thường rõ ràng nhưng đường đi đến sản phẩm lại có nhiều nhánh: xe đẩy, ghế ngồi ô tô, nursery, feeding, chăm sóc bé, đồ chơi, phụ kiện, và các nhóm sản phẩm theo độ tuổi hoặc tình huống sử dụng.

Khi catalog có nhiều nhóm như vậy, menu mặc định của theme thường bắt đầu thiếu chỗ. Trên desktop, một thanh menu phẳng không thể hiện được toàn bộ chiều rộng của store. Trên mobile, nếu mọi thứ bị giấu sau hamburger menu, khách phải tự mở từng cấp và tự đoán nhóm nào chứa sản phẩm họ cần.

Baby Studio desktop storefront before Navi+ — flat category navigation without a mega menu
Baby Studio trên desktop: nhiều nhóm sản phẩm nhưng header vẫn là thanh menu phẳng, chưa mở catalog thành mega menu.

Vấn đề không phải là thiếu sản phẩm. Vấn đề là sản phẩm tốt nhưng cấu trúc điều hướng chưa giúp khách nhìn thấy store bán gì, nên khách phải mất thêm bước để tìm đúng khu vực. Với mobile, vài bước thừa là đủ để khách bỏ qua một nhóm sản phẩm quan trọng.

Baby Studio mobile menu before Navi+ — first navigation level
Mobile menu hiện tại: các nhóm chính nằm trong drawer, khách phải mở menu trước khi nhìn thấy catalog.

Navi+ giải quyết được gì

Cách tiếp cận phù hợp là không thay theme và không làm lại toàn bộ store. Navi+ được dùng như một lớp điều hướng bổ sung, chia rõ vai trò theo từng ngữ cảnh: desktop cần nhìn rộng, mobile cần thao tác nhanh, và khách đang mua sắm cần shortcut đến những điểm quan trọng.

Desktop Mega Menu — cho khách thấy store có gì ngay từ đầu

Mega Menu có thể chia các nhóm sản phẩm chính thành nhiều cột rõ ràng, ví dụ: prams & strollers, car seats, nursery, feeding, toys, baby care, sale hoặc featured collections. Mỗi nhóm có nhãn dễ hiểu và hình ảnh đại diện để khách mới vào store không phải click thử quá nhiều.

Slide Menu — đi sâu danh mục mà không làm mobile bị nặng

Slide Menu phù hợp cho catalog có nhiều nhóm con. Khách có thể đi từ nhóm lớn sang nhóm nhỏ theo từng màn hình, giống trải nghiệm app hơn là một danh sách link dài. Điều này đặc biệt hữu ích khi khách cần chọn theo nhu cầu, độ tuổi, loại sản phẩm hoặc phụ kiện đi kèm.

Tab Bar — đưa menu, search và cart xuống tầm ngón cái

Trên mobile, Tab Bar giữ các thao tác quan trọng luôn ở dưới cùng màn hình: Home, Shop/Menu, Search, Cart, Account hoặc Sale. Khách không cần kéo lên header để tìm kiếm, mở menu hoặc xem giỏ hàng. Với nhóm khách đang duyệt nhiều sản phẩm cho bé, việc giảm thao tác lặp lại này tạo ra trải nghiệm nhẹ hơn.

Kết quả sau Navi+

Sau khi tổ chức lại điều hướng bằng Navi+, Baby Studio có thể trình bày catalog theo cách gần hơn với hành vi mua sắm thực tế: desktop nhìn được nhiều nhóm sản phẩm hơn, mobile có đường đi rõ hơn, và các thao tác chính nằm ở vị trí khách dễ bấm.

Baby Studio updated desktop mega menu showing Prams and Strollers navigation with product images
Bản update trên desktop: danh mục Prams & Strollers được mở thành mega menu, có nhóm con và sản phẩm minh họa.
Baby Studio updated mobile storefront with Navi+ bottom Tab Bar
Bản update trên mobile: Tab Bar đặt Menu, Catalog, Blogs, Support và More ở đáy màn hình, đúng vùng thao tác của ngón cái.
Baby Studio updated mobile slide menu with product highlights and category links
Slide Menu sau update: panel trượt phủ lên storefront, vừa giữ ngữ cảnh trang phía sau vừa đưa danh mục, sản phẩm nổi bật và lối tắt liên hệ vào cùng một luồng.

Kết quả cần hướng tới không phải là một menu “đẹp hơn” đơn thuần. Kết quả là khách mới hiểu nhanh store có gì, khách mobile tìm đúng khu vực ít vòng hơn, và header có thể gọn lại mà không mất các chức năng quan trọng như search, cart và menu.

  • Desktop thể hiện được chiều rộng catalog tốt hơn bằng Mega Menu.
  • Mobile có đường đi rõ ràng hơn bằng Slide Menu.
  • Search, cart và menu nằm gần ngón cái hơn bằng Tab Bar.
  • Khách mới hiểu store có gì nhanh hơn.
  • Catalog nhiều nhóm sản phẩm trở nên dễ duyệt hơn mà không cần thay theme.

Nguyên tắc rút ra

Những điểm áp dụng được cho hầu hết store có catalog nhiều nhánh — không riêng Baby Studio.

  • Desktop để khám phá: mega menu mở chiều rộng catalog ngay từ header, để khách mới thấy store bán gì mà không phải click thử.
  • Mobile để đi sâu: slide menu cho khách đi qua từng cấp như app, hợp với catalog phân nhóm theo nhu cầu hoặc độ tuổi.
  • Thao tác chính phải trong tầm ngón cái: đưa menu, search và cart xuống Tab Bar, bỏ gánh nặng khỏi header.
  • Thêm lớp, không thay nền: cải thiện điều hướng mà không cần đổi theme hay bỏ app đang chạy.

Có một store tương tự và muốn thử Navi+? Xem qua các loại menu hoặc đọc tài liệu hướng dẫn.

K
Khoi — Founder, Navi+
Xây dựng Navi+ và trực tiếp tư vấn điều hướng cho các store Shopify nhiều danh mục.

Bắt đầu với Navi+ AI Menu Builder

Chọn nền tảng của bạn — miễn phí cài đặt, hoạt động trong vài phút.