Mở cửa hàng Shopify của bạn trên điện thoại. Điều hướng ở đâu? Nó ẩn sau biểu tượng hamburger — ba đường ngang ở góc trên cùng bên trái hoặc bên phải. Đây là nơi mà hầu hết theme Shopify đặt toàn bộ catalog của bạn trên mobile. Ẩn sau một biểu tượng nhỏ, ở vị trí khó tiếp cận nhất trên màn hình.
Bây giờ hãy nghĩ về cách bạn sử dụng các ứng dụng yêu thích. Instagram có thanh tab ở dưới cùng. Amazon có thanh điều hướng phía dưới. Uber, Spotify, Google Maps — tất cả đều sử dụng điều hướng phía dưới luôn hiển thị khi bạn cuộn. Những công ty này đã chi hàng triệu đô cho nghiên cứu khả năng sử dụng trước khi chọn mô hình này. Và dù vậy, hầu hết theme Shopify vẫn mặc định sử dụng mô hình điều hướng di động mà nghiên cứu liên tục cho thấy có hiệu suất tệ nhất: hamburger menu ẩn mọi thứ ở góc trên.
- Hầu hết theme Shopify chỉ cung cấp một mô hình điều hướng di động: hamburger menu ở góc trên.
- Hamburger menu giảm việc sử dụng điều hướng gần 50% so với điều hướng hiển thị (Nielsen Norman Group).
- Thanh tab phía dưới nằm trong vùng sử dụng ngón tay tự nhiên và tạo ra nâng cao chuyển đổi di động 15-25% trong các nghiên cứu thương mại điện tử.
- Các phương pháp hybrid (thanh tab hiển thị + menu slide-out cho các danh mục sâu hơn) vượt trội hơn hamburger-only bằng cách kết hợp truy cập nhanh chóng với độ sâu.
Tại sao theme Shopify mặc định hamburger-only
Hamburger menu chiếm ưu thế các theme Shopify vì những lý do thực tế, không phải vì đó là mô hình tốt nhất cho tỷ lệ chuyển đổi.
Không gian màn hình hiếm hoi. Màn hình di động rộng khoảng 375 pixel. Thanh điều hướng ngang hiển thị năm tên danh mục cần ít nhất 50–70 pixel cho mỗi nhãn để vẫn dễ đọc, nghĩa là bạn có thể hiển thị tối đa 5–6 mục. Biểu tượng hamburger nén điều hướng không giới hạn thành một nút 44 pixel. Đối với các nhà phát triển theme cần hỗ trợ các cửa hàng có bất cứ nơi nào từ 3 đến 30 danh mục, hamburger là mô hình duy nhất hoạt động phổ biến mà không cần tùy chỉnh.
Theme phải là chung chung. Một theme được bán trên Shopify Theme Store cần phải hoạt động cho cửa hàng trang sức có 4 danh mục và cửa hàng phụ tùng ô tô có 200. Hamburger menu xử lý cả hai trường hợp giống hệt nhau. Thanh tab, ngược lại, yêu cầu người bán chọn danh mục 4–5 nào xuất hiện trong điều hướng liên tục — một quyết định đòi hỏi kiến thức về catalog mà nhà phát triển theme không có.
Đơn giản hóa triển khai. Mô hình hamburger rất dễ dàng xây dựng: một nút chuyển đổi overlay toàn màn hình chứa menu. Không cần tính toán breakpoint phản ứng cho nhãn hiển thị, không lo về cắt ngắn văn bản, và không có tương tác phức tạp giữa thanh tab liên tục và hành vi cuộn của trang. Các nhà phát triển theme có thể triển khai nó một cách đáng tin cậy trong vài giờ.
Tính nhất quán thiết kế. Khi mọi theme Shopify sử dụng hamburger menu, người mua phát triển hành vi học được: “Tôi nhấn ba đường này để xem menu.” Các nhà phát triển theme có thể hợp lý giả định rằng người dùng di động biết mô hình này và sẽ tìm kiếm nó.
Đây là những lý do kỹ thuật và kinh doanh hợp lệ. Vấn đề là chúng tối ưu hóa cho các ràng buộc của nhà phát triển theme, không phải trải nghiệm của người mua hàng.
Chi phí chuyển đổi của điều hướng hamburger-only
Nghiên cứu về hamburger menu liên tục cho thấy kết quả tương tự: ẩn điều hướng sau biểu tượng hamburger làm giảm việc sử dụng và làm tổn hại hoàn thành nhiệm vụ.
Việc sử dụng điều hướng giảm gần một nửa. Nghiên cứu của Nhóm Nielsen Norman về hamburger menu cho thấy rằng điều hướng ẩn đáng kể làm giảm tính khám phá. Khi menu hiển thị, mọi người sử dụng nó. Khi nó ẩn sau một biểu tượng, một tỷ lệ lớn người dùng không bao giờ mở nó — họ có thể dựa vào các liên kết bất kỳ được hiển thị trên trang hiện tại, sử dụng tìm kiếm, hoặc rời đi.
Vấn đề vùng ngón tay. Nghiên cứu có ảnh hưởng của Steven Hoober về cách mọi người cầm và tương tác với điện thoại cho thấy rằng các góc trên của màn hình điện thoại là những nơi khó tiếp cận nhất bằng một tay. Biểu tượng hamburger nằm đúng ở khu vực chết này. Trên điện thoại lớn hơn 6 inch (bây giờ bao gồm hầu hết các mô hình), để tiếp cận góc trên cần thay đổi grip hoặc bàn tay thứ hai. Thanh tab phía dưới nằm nơi ngón tay tự nhiên nằm — phần ba dưới cùng của màn hình — làm cho nó dễ tiếp cận mà không cần nỗ lực.
Tác động cụ thể của thương mại điện tử. Đối với các cửa hàng trực tuyến, chi phí của điều hướng ẩn có thể đo lường trực tiếp trong tỷ lệ chuyển đổi. Nghiên cứu được trích dẫn bởi LibauTech cho thấy thanh tab phía dưới tạo ra nâng cao chuyển đổi di động 15–25% so với điều hướng hamburger-only. Cơ chế rất đơn giản: khi người mua có thể thấy các liên kết danh mục liên tục ở dưới cùng màn hình, họ duyệt nhiều danh mục hơn, khám phá nhiều sản phẩm hơn, và có khả năng tìm thấy cái gì đó họ muốn mua nhiều hơn.
Kết nối với tỷ lệ từ bỏ giỏ hàng. Nghiên cứu của Baymard Institute về khả năng sử dụng di động cho thấy rằng khó khăn trong điều hướng là một yếu tố góp phần đáng kể vào tỷ lệ từ bỏ giỏ hàng di động. Khi người mua không thể dễ dàng điều hướng giữa các danh mục, họ có xu hướng xem ít sản phẩm hơn trên mỗi phiên. Ít sản phẩm được xem hơn có nghĩa là khả năng tìm thấy sản phẩm đáng mua ít hơn, điều này xuất hiện dưới dạng tỷ lệ thoát cao hơn và tỷ lệ chuyển đổi thấp hơn trên mobile.
Tác động tích lũy là đáng kể. Đối với một cửa hàng có 60% lưu lượng di động thực hiện $100,000/tháng doanh thu, cải thiện chuyển đổi di động 15% dịch thành khoảng $9,000/tháng doanh thu bổ sung. Đó là chi phí của việc gắn bó với mô hình hamburger-only khi những giải pháp tốt hơn tồn tại.
Các mô hình điều hướng di động: so sánh
Không phải tất cả các mô hình điều hướng di động đều có hiệu suất ngang nhau. Đây là cách các phương pháp phổ biến nhất so sánh:
| Mô hình | Hiển thị | Tính tiếp cận ngón tay | Khả năng danh mục | Tốt nhất cho |
|---|---|---|---|---|
| Hamburger only | Ẩn cho đến khi nhấp | Kém (góc trên) | Không giới hạn (tất cả ẩn) | Catalog nhỏ, trang web nội dung |
| Bottom tab bar | Luôn hiển thị | Xuất sắc (vùng ngón tay) | 4–5 mục | Cửa hàng với danh mục hàng đầu rõ ràng |
| Sticky header bar | Hiển thị khi cuộn lên | Trung bình (đầu trang) | 3–4 mục | Cửa hàng ưu tiên tìm kiếm + giỏ hàng |
| Floating action button | Luôn hiển thị | Tốt (góc dưới) | 1 hành động (mở rộng để có thêm) | Cửa hàng tập trung đơn (ví dụ, “Mua ngay”) |
| Hybrid: tab bar + slide menu | Thanh tab luôn hiển thị, menu đầy đủ khi yêu cầu | Xuất sắc cho các nhiệm vụ phổ biến, tốt cho nav sâu | 4–5 hiển thị + không giới hạn trong slide | Cửa hàng có 20+ danh mục |
Phương pháp hybrid — thanh tab phía dưới cho 4–5 danh mục hàng đầu cộng với menu slide-out (được kích hoạt từ một trong các slot thanh tab) cho điều hướng đầy đủ — liên tục vượt trội các mô hình khác. Nó cung cấp cho người mua quyền truy cập tức thì vào các điểm đến phổ biến nhất trong khi bảo tồn quyền truy cập vào cây danh mục hoàn chỉnh.
Theme Shopify phổ biến thực sự cung cấp gì trên di động
Đây là cách điều hướng di động trông như thế nào trong các theme được sử dụng rộng rãi:
Dawn (miễn phí, Shopify): Hamburger menu ở header. Không có tab bar. Menu di động mở dưới dạng overlay toàn màn hình với accordion-style dropdowns cho các danh mục lồng nhau. Triển khai sạch sẽ, nhưng hoàn toàn hamburger-only. Không có cài đặt để thay đổi mô hình điều hướng di động.
Prestige (Clean Canvas): Hamburger menu với bảng slide-out được làm sạch hơn một chút. Hỗ trợ hình ảnh nổi bật trong menu di động, điều này thêm sự quan tâm trực quan nhưng không thay đổi tương tác cơ bản. Vẫn yêu cầu một lần nhấp vào góc trên để truy cập điều hướng.
Impact (Maestrooo): Hamburger menu với bảng điều khiển slide-out. Impact bao gồm tùy chọn “sticky header” giữ biểu tượng hamburger hiển thị khi người dùng cuộn, đây là một cải tiến nhỏ — nhưng biểu tượng vẫn ở góc trên. Không có tùy chọn tab bar.
Impulse (Archetype): Hamburger menu với bảng drawer-style. Impulse có menu di động tương đối tinh vi với hoạt ảnh mượt mà và hỗ trợ hình ảnh trong điều hướng. Nhưng như những cái khác, nó hoàn toàn hamburger-triggered và không cung cấp lớp điều hướng hiển thị liên tục.
Warehouse (Maestrooo): Hamburger menu với thanh dưới cùng hiển thị các biểu tượng giỏ hàng và tìm kiếm. Điều này gần nhất với phương pháp hybrid bằng cách đặt một số biểu tượng tiện ích ở dưới cùng, nhưng bản thân điều hướng (duyệt danh mục) vẫn ẩn sau hamburger ở góc trên.
Mô hình này là nhất quán: trên tất cả các theme Shopify chính, điều hướng di động được truy cập độc quyền thông qua biểu tượng hamburger trong khu vực header. Không có theme phổ biến nào cung cấp tùy chọn thanh tab phía dưới hoặc điều hướng hybrid tích hợp sẵn.
Thêm thanh tab mà không cần thay đổi theme của bạn
Nếu theme của bạn không cung cấp thanh tab (và không có cái nào phổ biến), bạn có ba tùy chọn:
Tùy chọn 1: Mã theme tùy chỉnh. Một nhà phát triển Shopify có thể thêm thanh tab phía dưới bằng cách chỉnh sửa các template Liquid và CSS của theme. Điều này liên quan đến:
- Tạo một đoạn mã mới với HTML thanh tab
- Thêm CSS cho vị trí fixed-bottom, trạng thái hoạt động, và kích thước phản ứng
- Bao gồm nó trong tệp bố cục
theme.liquid - Viết JavaScript để xử lý các trạng thái hoạt động và hành vi cụ thể di động
Chi phí phát triển thường là 4–8 giờ cho một nhà phát triển quen thuộc với các theme Shopify. Kết quả là một thanh tab nhẹ, nhanh được tích hợp đầy đủ với theme. Nhược điểm: các bản cập nhật theme có thể ghi đè các thay đổi của bạn, và bạn sẽ cần sự tham gia của nhà phát triển mỗi khi bạn muốn sửa đổi các mục thanh tab.
Tùy chọn 2: Tiêm JavaScript thông qua Trình chỉnh sửa Tập lệnh của Shopify hoặc khối ứng dụng tùy chỉnh. Bạn có thể thêm thanh tab bằng cách sử dụng khối ứng dụng hoặc phần Liquid tùy chỉnh tiêm HTML, CSS, và JavaScript vào trang. Điều này không sửa đổi các tệp cơ bản của theme, vì vậy các bản cập nhật theme sẽ không ghi đè nó. Nhưng triển khai này rất mỏng — nó phụ thuộc vào cấu trúc DOM của theme, có thể thay đổi giữa các phiên bản theme.
Tùy chọn 3: Ứng dụng menu có hỗ trợ thanh tab. Các ứng dụng như Navi+ bao gồm các thành phần thanh tab được xây dựng sẵn cài đặt cùng theme mà không sửa đổi các tệp theme. Ứng dụng hiển thị thanh tab dưới dạng lớp phủ ở dưới cùng màn hình, độc lập với điều hướng theme. Bạn cấu hình danh mục nào xuất hiện trong thanh tab thông qua quản lý ứng dụng, và ứng dụng xử lý tất cả hành vi phản ứng, trạng thái hoạt động, và tương tác với header hiện tại của theme.
Phương pháp ứng dụng có ưu điểm là không có thay đổi mã theme và giao diện cấu hình trực quan. Sự đánh đổi là tải trọng JavaScript bổ sung (thường 30–50 KB cho ứng dụng được xây dựng tốt) và chi phí đăng ký hàng tháng. Đối với các cửa hàng trong đó cải thiện chuyển đổi di động biện minh cho thậm chí một khoản đầu tư khiêm tốn, toán học ROI thường hoạt động — lợi tức doanh thu từ điều hướng di động hiển thị vượt xa chi phí ứng dụng.
Thiết kế thanh tab hiệu quả cho cửa hàng của bạn
Dù bạn xây dựng thanh tab tùy chỉnh hay sử dụng ứng dụng, các quyết định thiết kế đều quan trọng:
Chọn tối đa 4–5 mục. Mỗi tab cần đủ lớn để nhấp một cách đáng tin cậy (tối thiểu 44x44 pixel theo HIG của Apple và Hướng dẫn Thiết kế Vật liệu của Google). Trên màn hình rộng 375 pixel, 5 mục cung cấp cho mỗi tab khoảng 75 pixel — đủ cho một biểu tượng và nhãn ngắn. Nhiều hơn 5 mục làm cho các mục tiêu nhấp nhỏ hơn kích thước có thể sử dụng được.
Đặt các danh mục được truy cập nhiều nhất vào thanh tab. Xem lại phân tích của bạn để xác định trang bộ sưu tập 3–4 hàng đầu theo lưu lượng truy cập. Đây là những ứng cử viên thanh tab. Slot còn lại phải là mục “Menu” (mở điều hướng đầy đủ) hoặc hành động “Tìm kiếm”.
Sử dụng biểu tượng với nhãn, không phải biểu tượng riêng. Nghiên cứu từ Nhóm Nielsen Norman cho thấy biểu tượng không có nhãn thường bị hiểu lầm. Biểu tượng túi mua sắm có thể có nghĩa là “Giỏ hàng,” “Mua sắm,” hoặc “Danh sách yêu thích” tùy thuộc vào kỳ vọng của người dùng. Luôn ghép các biểu tượng với nhãn văn bản ngắn (1–2 từ).
Bao gồm tab “Thêm” hoặc “Menu”. Thanh tab hiển thị các danh mục hàng đầu của bạn, nhưng người mua vẫn cần truy cập vào điều hướng đầy đủ. Dành một tab để mở menu hoàn chỉnh (thường là bảng slide-out). Điều này cung cấp cho bạn mô hình hybrid: truy cập nhanh chóng vào các điểm đến phổ biến cộng với độ sâu điều hướng đầy đủ khi yêu cầu.
Khớp kiểu thanh tab với theme của bạn. Thanh tab phải trông giống như một phần tự nhiên của cửa hàng của bạn, không phải là một afterthought. Sử dụng cùng họ phông chữ, bảng màu, và kiểu biểu tượng với phần còn lại của theme. Nếu theme của bạn sử dụng các góc tròn và bóng mềm, thanh tab cũng nên như vậy.
Chiến thắng nhanh chóngNgay cả trước khi triển khai thanh tab đầy đủ, hãy thử nghiệm tác động của điều hướng hiển thị bằng cách thêm nút "Danh mục Mua sắm" dính ở dưới cùng các trang di động. Nếu tỷ lệ nhấp cao, nó xác thực đầu tư vào thanh tab thích hợp.
Đo lường tác động của điều hướng hybrid
Sau khi triển khai thanh tab hoặc điều hướng hybrid, hãy theo dõi các số liệu này trong 4–6 tuần để đo lường tác động:
Tỷ lệ thoát di động. Nên giảm khi người mua tham gia với điều hướng hiển thị thay vì rời đi khi họ không thể tìm thấy ngay những gì họ muốn.
Trang trên mỗi phiên di động. Nên tăng khi người mua duyệt nhiều danh mục hơn thông qua thanh tab. Nâng cao từ 3,2 lên 4,1 trang mỗi phiên là điển hình sau khi thêm điều hướng liên tục.
Tỷ lệ chuyển đổi di động. Số liệu chính. So sánh trung bình 4 tuần trước và sau thay đổi. Hãy tính đến tính mùa vụ bằng cách so sánh với cùng kỳ năm trước nếu có thể.
Tỷ lệ nhấp thanh tab. Nếu triển khai của bạn theo dõi nhấp chuột, hãy đo tần suất người mua nhấp vào mỗi tab. Dữ liệu này giúp bạn tối ưu hóa danh mục nào xuất hiện trong thanh — thay thế các mục nhấp thấp bằng các danh mục mà người mua thực sự muốn truy cập nhanh chóng.
Sử dụng tìm kiếm trang. Nên giảm cho các truy vấn liên quan đến danh mục. Nếu người mua tìm kiếm “giày nam” trước đây vì họ không thể tìm thấy nó trong hamburger menu, thanh tab liên kết đến “Nam” sẽ làm giảm khối lượng truy vấn tìm kiếm đó.
Thêm giỏ hàng trên mỗi phiên từ di động. Khám phá sản phẩm nhiều hơn thông qua điều hướng tốt hơn sẽ dịch thành nhiều mục được thêm vào giỏ hàng hơn. Số liệu này cô lập tác động của điều hướng từ các yếu tố chuyển đổi khác như giá cả hoặc luồng thanh toán.
Chạy so sánh trong ít nhất 4 tuần để làm mượt biến thiên hàng tuần. Nếu cửa hàng của bạn có biến động lưu lượng truy cập đáng kể (mùa lễ hội, chiến dịch tiếp thị), hãy kéo dài thời gian đo lường hoặc sử dụng máy tính ý nghĩa thống kê để xác thực kết quả. Nâng cao chuyển đổi có thể mất 1–2 tuần để ổn định khi khách trở lại tìm hiểu mô hình điều hướng mới.
This article is part of the larger guide on Shopify theme menu limitations: when to use a menu app instead.