Đây là chuyện gì xảy ra khi bạn bỏ qua một trong năm yếu tố menu thiết yếu: khách hàng từ Instagram vào trang sản phẩm, quyết định mua hàng, tìm kiếm biểu tượng giỏ hàng, không thấy nó, cho rằng cửa hàng của bạn bị hỏng, và rời đi.
Đây không phải là chuyện tưởng tượng. Tôi đã xem các bản ghi session nơi người dùng vò tay tìm kiếm một giỏ mua sắm ẩn trong menu mobile gập lại. Họ bỏ cuộc sau 8 giây.
Chủ sở hữu cửa hàng mới thường suy nghĩ quá mức về điều hướng—thêm trang tùy chỉnh, banner khuyến mại và tên danh mục thông minh—trong khi quên những cơ bản. Hướng dẫn này bao gồm năm yếu tố menu phải hiển thị và dễ tiếp cận từ khi cửa hàng của bạn ra mắt, trước khi bạn lo lắng về bất cứ điều gì khác.
- Trang chủ, Danh mục, Tìm kiếm, Giỏ hàng và Tài khoản là nền tảng năm yếu tố—bỏ qua bất kỳ yếu tố nào và bạn tạo ra ma sát
- 80% lượt mua trên mobile liên quan đến biểu tượng giỏ hàng trong 30 giây đầu tiên duyệt xem
- Tìm kiếm có tỷ lệ chuyển đổi cao hơn 2-3 lần so với duyệt danh mục, thậm chí trên các cửa hàng nhỏ
- Vị trí rất quan trọng: desktop và mobile cần các bố cục khác nhau cho cùng năm yếu tố
- Tính nhất quán về hình ảnh (biểu tượng, màu sắc, nhãn) giúp khách hàng lần đầu định hướng trong chưa đầy 5 giây
Yếu tố 1: Trang chủ (neo điều hướng của bạn)
Liên kết Trang chủ là cửa thoát hiểm của khách hàng. Dù họ hạ cánh ở đâu—trang sản phẩm, bài viết blog, trang danh mục—họ cần một con đường rõ ràng để quay lại điểm bắt đầu.
Tại sao điều này quan trọng
Theo nghiên cứu của Baymard Institute về khả năng sử dụng điều hướng, 43% người dùng kỳ vọng logo sẽ liên kết đến trang chủ, và 12% khác cụ thể tìm kiếm liên kết “Trang chủ” trong menu. Nếu không có cái nào, họ cảm thấy mất phương hướng.
Hãy nghĩ về nó theo cách này: trong một cửa hàng thật, khách hàng luôn có thể bước trở lại lối vào. Trực tuyến, liên kết Trang chủ phục vụ chức năng đó. Nếu không có, khách hàng muốn bắt đầu lại hoặc khám phá các danh mục khác không có cách hiển nhiên nào để đặt lại.
Nơi đặt nó
Desktop:
- Logo ở góc trên cùng bên trái phải luôn liên kết đến trang chủ (đây là quy ước web được lúc lắc tới mức người dùng không thậm chí nghĩ về nó)
- Tùy chọn: thêm “Trang chủ” làm mục đầu tiên trong menu điều hướng chính của bạn, đặc biệt nếu logo của bạn nhỏ hoặc trừu tượng
Mobile:
- Logo ở trên cùng vẫn liên kết về nhà
- Nếu sử dụng thanh tab dưới cùng, thêm biểu tượng Trang chủ chuyên dụng (thường là ký hiệu ngôi nhà) làm tab đầu tiên hoặc trung tâm
- Trong menu trượt kiểu hamburger, “Trang chủ” phải là mục đầu tiên trong danh sách
Lỗi thường gặp
Đừng làm logo của bạn không thể nhấp được. Một số chủ đề hoặc thiết kế tùy chỉnh vô hiệu hóa liên kết logo vì lý do thẩm mỹ—điều này phá vỡ kỳ vọng của người dùng và làm bực bỉ khách truy cập.
Ngoài ra, tránh sự mơ hồ: nếu logo của bạn là một monogram hoặc ký hiệu trừu tượng, người dùng có thể không nhận ra nó là một phần tử điều hướng. Thêm nhãn “Trang chủ” hiển thị loại bỏ nhầm lẫn.
Yếu tố 2: Danh mục (cấu trúc danh mục của bạn)
Danh mục (còn gọi là Hạng mục hoặc Cửa hàng) là cách khách hàng duyệt các sản phẩm của bạn. Đây là nơi tổ chức quyết định trải nghiệm.
Tại sao điều này quan trọng
Nghiên cứu khả năng sử dụng của Nielsen Norman Group phát hiện ra rằng 50% người dùng thích duyệt danh mục hơn là tìm kiếm, ngay cả khi họ biết họ muốn gì. Họ đang khám phá, so sánh và khám phá các lựa chọn.
Đối với các cửa hàng mới có 10-100 sản phẩm, các danh mục rõ ràng giảm mệt mỏi khi quyết định. Thay vì trình bày “Tất cả sản phẩm” (quá tải), bạn hướng dẫn khách hàng tới một tập hợp con phù hợp với ý định của họ: “Áo phông nam”, “Quà tặng dưới $50”, “Mới nhất”.
Nơi đặt nó
Desktop:
- Thanh menu ngang chính ở trên cùng, trực tiếp dưới hoặc tích hợp với tiêu đề
- Sử dụng menu thả xuống cho các danh mục phụ nếu bạn có chúng (ví dụ: “Quần áo” mở rộng để hiển thị “Áo”, “Quần”, “Áo khoác ngoài”)
- Đối với các cửa hàng có 30+ sản phẩm, hãy cân nhắc menu siêu lớn hiển thị các danh mục phụ trong bố cục nhiều cột
Mobile:
- Menu hamburger vẫn là mô hình phổ biến nhất, nhưng hãy chắc chắn biểu tượng có nhãn (“Bản đồ” văn bản bên cạnh biểu tượng ba dòng cải thiện khả năng phát hiện 20%)
- Thanh tab dưới cùng hoạt động tốt cho các cửa hàng có 4-6 danh mục chính—dành một tab cho mỗi danh mục hàng đầu
- Tránh ẩn tất cả các danh mục phía sau một biểu tượng không có nhãn; hiển thị ít nhất 1-2 danh mục chính có thể nhìn thấy
Cách tổ chức danh mục
Sử dụng ngôn ngữ của khách hàng, không phải từ jargon nội bộ. Nếu bạn bán cà phê, hãy tổ chức theo loại rang (“Rang nhẹ”, “Rang đậm”) hoặc nguồn gốc (“Ethiopia”, “Colombia”), không phải mã SKU hoặc tên nhà cung cấp.
Giới hạn các danh mục cấp cao nhất từ 5-9 mục (điểm ngọt ngào nhận thức). Quá ít và khách hàng phải đào sâu thông qua menu nhiều lớp; quá nhiều và họ trải nghiệm liệt lựa chọn.
Kiểm tra cấu trúc của bạn bằng cách yêu cầu ai đó không quen thuộc với sản phẩm của bạn tìm một mục cụ thể. Nếu họ ngần ngại hoặc đoán sai, các nhãn của bạn cần rõ ràng.
| Loại cửa hàng | Cấu trúc danh mục tốt | Cấu trúc danh mục kém |
|---|---|---|
| Quần áo | Nữ, Nam, Trẻ em, Phụ kiện, Giảm giá | Sản phẩm, Quần áo, Khác, Mới, Mua tất cả |
| Hàng gia dụng | Phòng khách, Phòng ngủ, Bếp, Ngoài trời | Danh mục A, Danh mục B, Bán chạy, Hỗn hợp |
| Làm đẹp | Chăm sóc da, Trang điểm, Chăm sóc tóc, Dụng cụ, Gói hàng | Tất cả mục, Phổ biến, Nổi bật, Cửa hàng |
Yếu tố 3: Tìm kiếm (ngay cả với danh mục nhỏ)
Nhiều chủ sở hữu cửa hàng mới cho rằng tìm kiếm chỉ dành cho các danh mục lớn. Sai. Ngay cả với 20 sản phẩm, khách hàng sử dụng tìm kiếm—và họ chuyển đổi ở tỷ lệ cao hơn nhiều khi họ làm.
Tại sao điều này quan trọng
Nghiên cứu thương mại điện tử 2024 của Baymard Institute phát hiện ra rằng 30% khách truy cập sử dụng tìm kiếm trang web, và những người tìm kiếm đó chuyển đổi ở tỷ lệ 2-3 lần cao hơn những người không tìm kiếm. Tại sao? Vì họ đã biết họ muốn gì. Công việc của bạn là giúp họ tìm thấy nó một cách nhanh chóng.
Tìm kiếm cũng tiết lộ những gì khách hàng đang tìm kiếm. Nếu “bột protein vegan” nhận được 40 lượt tìm kiếm mỗi tháng nhưng bạn chỉ mang protein huyết thanh, bạn đã xác định được khoảng trống trong dòng sản phẩm của mình.
Nơi đặt nó
Desktop:
- Góc trên cùng bên phải của tiêu đề (quy ước phổ quát)
- Luôn hiển thị—đừng ẩn nó phía sau một biểu tượng trừ khi không gian màn hình cực kỳ hạn chế
- Sử dụng trường đầu vào tìm kiếm với biểu tượng kính lúp, không chỉ một biểu tượng (trường báo hiệu “bạn có thể gõ ở đây”)
Mobile:
- Biểu tượng kính lúp trong tiêu đề là chấp nhận được; khi nhấn vào nó, nên mở một lớp phủ tìm kiếm toàn chiều rộng hoặc mở rộng một trường nhập
- Hoặc, dành một tab trong thanh tab dưới cùng cho tìm kiếm (phổ biến trong giao diện kiểu ứng dụng)
- Đặt tìm kiếm nổi bật trong menu hamburger—lý tưởng là mục thứ hai sau “Trang chủ”
Kiến thức cơ bản về chức năng tìm kiếm
Tìm kiếm mặc định của Shopify xử lý các kết quả chính xác tốt nhưng vấp phải lỗi chính tả, từ đồng nghĩa và truy vấn một phần. Ví dụ, tìm kiếm “áo phông” có thể không trả về sản phẩm được gắn thẻ “áo phông”.
Đối với các cửa hàng mới, giá trị mặc định đủ tốt để bắt đầu. Nhưng một khi bạn đạt 50+ sản phẩm hoặc nhận thấy tỷ lệ zero-kết quả tìm kiếm cao trong phân tích của bạn, hãy cân nhắc nâng cấp lên ứng dụng tìm kiếm như Searchanise, Boost Product Filter hoặc Instant Search+. Những ứng dụng này thêm autocomplete, khả năng chịu lỗi chính tả và bộ lọc (giá, màu, kích thước).
Theo dõi các truy vấn tìm kiếmXem xét phân tích tìm kiếm của bạn hàng tháng. Các truy vấn khối lượng cao cho bạn biết khách hàng muốn gì. Các truy vấn zero-kết quả cho bạn biết bạn đang thiếu gì. Cả hai thông tin chi tiết đều là những kho báu cho kế hoạch hàng tồn kho.
Yếu tố 4: Giỏ hàng (động cơ doanh thu của bạn)
Biểu tượng giỏ hàng là cửa vào thanh toán. Nếu khách hàng không thể tìm thấy nó ngay lập tức, bạn sẽ mất bán hàng. Nó đơn giản như vậy.
Tại sao điều này quan trọng
Một nghiên cứu của Baymard Institute phát hiện ra rằng 18% lần từ bỏ giỏ hàng xảy ra vì người dùng không thể dễ dàng tiếp cận giỏ hàng của họ. Trên mobile, nơi biểu tượng giỏ hàng có thể được chôn trong menu hamburger hoặc ẩn phía sau tiêu đề gập lại, vấn đề này tăng lên nhiều lần.
Dữ liệu thương mại Shopify 2025 cho thấy rằng 80% lượt mua trên mobile liên quan đến khách hàng nhấn biểu tượng giỏ hàng trong 30 giây đầu tiên duyệt xem. Đó là một điểm tham chiếu—khách hàng kiểm tra những gì họ đã thêm, so sánh tổng cộng và quyết định có tiếp tục mua sắm hay thanh toán.
Nơi đặt nó
Desktop:
- Góc trên cùng bên phải của tiêu đề, bên cạnh hoặc gần thanh tìm kiếm
- Luôn hiển thị, không bao giờ ẩn
- Hiển thị một badge với số lượng mục trong giỏ hàng (ví dụ: một vòng tròn nhỏ với “3” chồng lên biểu tượng giỏ hàng)—điều này cung cấp phản hồi tức thì và khuyến khích khách hàng xem lại giỏ hàng của họ
Mobile:
- Góc trên cùng bên phải vẫn là tiêu chuẩn
- Nếu sử dụng thanh tab dưới cùng, hãy dành một tab cho giỏ hàng (thường là vị trí ngoài cùng bên phải)
- Sử dụng biểu tượng giỏ hàng dính lại vẫn hiển thị khi người dùng cuộn—đừng để nó biến mất
Thiết kế biểu tượng giỏ hàng
Sử dụng một ký hiệu được công nhận phổ biến: một túi mua sắm hoặc giỏ mua sắm. Đừng có sáng tạo với những biểu tượng trừu tượng mà người dùng phải giải thích.
Badge hiển thị số lượng mục rất quan trọng. Nếu không có, khách hàng không biết liệu nhấp “Thêm vào giỏ hàng” của họ có được đăng ký hay không. Có nó, họ nhận được xác nhận trực quan ngay lập tức, giảm lo âu và từ bỏ giỏ hàng.
Yếu tố 5: Tài khoản (truy cập đăng nhập và hồ sơ)
Truy cập tài khoản thường bị bỏ qua trên các cửa hàng mới, nhưng nó rất cần thiết cho khách hàng quay lại và xây dựng lòng trung thành.
Tại sao điều này quan trọng
Khách truy cập lần đầu có thể không cần truy cập tài khoản ngay lập tức, nhưng khách hàng quay lại cần. Họ muốn kiểm tra lịch sử đơn hàng, cập nhật địa chỉ giao hàng, quản lý đăng ký hoặc truy cập các mục đã lưu.
Ẩn đăng nhập tài khoản phía sau nhiều lần nhấp báo hiệu cho khách hàng rằng bạn không coi trọng kinh doanh lặp lại của họ. Nó cũng tạo ra ma sát cho các chương trình lòng trung thành, danh sách yêu thích và trải nghiệm được cá nhân hóa.
Nơi đặt nó
Desktop:
- Góc trên cùng bên phải, thường bên cạnh biểu tượng giỏ hàng
- Sử dụng biểu tượng người hoặc text “Tài khoản” / “Đăng nhập”
- Sau khi đăng nhập, hiển thị tên hoặc chữ viết tắt của khách hàng (xây dựng quen thuộc và niềm tin)
Mobile:
- Góc trên cùng bên phải bên cạnh giỏ hàng, hoặc
- Thêm “Tài khoản” làm một mục trong menu hamburger (gần đầu)
- Nếu sử dụng thanh tab dưới cùng, tài khoản có thể chiếm một trong 5 vị trí tab, mặc dù giỏ hàng và tìm kiếm thường có ưu tiên
Cân nhắc thanh toán khách
Không phải mọi khách hàng đều muốn tạo một tài khoản trước khi mua. Hãy chắc chắn thanh toán của bạn hỗ trợ thanh toán khách (được bật theo mặc định trong Shopify). Liên kết Tài khoản dành cho những người muốn đăng nhập—đừng bắt buộc nó trên người mua lần đầu.
Chiến lược vị trí: desktop vs mobile
Năm yếu tố vẫn giữ nguyên trên các thiết bị, nhưng bố cục của chúng phải thích ứng với kích thước màn hình và các mô hình tương tác.
Bố cục desktop
Giải phẫu tiêu đề desktop tiêu chuẩn (từ trái sang phải):
- Logo (liên kết đến Trang chủ)
- Menu điều hướng chính (Danh mục)
- Thanh tìm kiếm
- Biểu tượng tài khoản
- Biểu tượng giỏ hàng
Bố cục này tận dụng mô hình F của chuyển động mắt—người dùng quét từ trái sang phải trên hàng đầu, vì vậy các phần tử quan trọng nằm trong dải trên cùng đó.
Bố cục mobile
Mobile cần ưu tiên. Bạn không thể phù hợp năm yếu tố một cách thoải mái trong tiêu đề hẹp mà không tạo ra sự lộn xộn.
Tùy chọn A: Tiêu đề + Hamburger
- Tiêu đề: Logo (Trang chủ), biểu tượng Hamburger, biểu tượng Giỏ hàng
- Menu Hamburger chứa: Danh mục, Tìm kiếm, Tài khoản
Tùy chọn B: Tiêu đề + Tab Bar
- Tiêu đề: Logo (Trang chủ), biểu tượng Giỏ hàng
- Thanh tab dưới cùng: Trang chủ, Danh mục, Tìm kiếm, Tài khoản, Giỏ hàng
Thanh tab hoạt động đặc biệt tốt cho các cửa hàng có 4-6 danh mục chính vì chúng giữ điều hướng hiển thị và dễ tiếp cận bằng ngón tay mà không cần nhấp thêm.
| Bố cục | Ưu điểm | Nhược điểm | Tốt nhất cho |
|---|---|---|---|
| Tiêu đề + Hamburger | Quen thuộc, tiết kiệm không gian | Ẩn danh mục phía sau một lần nhấp | Cửa hàng có nhiều danh mục phụ |
| Tiêu đề + Tab Bar | Luôn hiển thị, dễ tiếp cận bằng ngón tay | Giới hạn 5 tab | Cửa hàng có 4-6 danh mục chính |
| Hybrid (Tab Bar + Slide Menu) | Cân bằng khả năng hiển thị và độ sâu | Cần suy nghĩ thiết kế thêm | Danh mục vừa đến lớn |
Tính nhất quán hình ảnh: biểu tượng, nhãn và màu sắc
Một khi bạn đã đặt năm yếu tố, hãy chắc chắn chúng nhất quán về hình ảnh để người dùng có thể nhận ra chúng ngay lập tức.
Biểu tượng
Sử dụng các biểu tượng tiêu chuẩn, được công nhận phổ biến:
- Trang chủ: Ký hiệu ngôi nhà
- Tìm kiếm: Kính lúp
- Giỏ hàng: Túi mua sắm hoặc giỏ mua sắm
- Tài khoản: Bóng người hoặc vòng tròn với chữ viết tắt
Đừng sử dụng các biểu tượng trừu tượng hoặc tùy chỉnh yêu cầu giải thích. Mỗi giây mà khách hàng dành để tìm hiểu ý nghĩa của một biểu tượng là một giây họ không mua sắm.
Nhãn
Ghép biểu tượng với nhãn văn bản khi có thể, đặc biệt là trên desktop nơi không gian cho phép. “Giỏ hàng” bên cạnh biểu tượng túi mua sắm loại bỏ sự mơ hồ.
Trên mobile, chỉ các biểu tượng là chấp nhận được cho giỏ hàng và tìm kiếm (được công nhận rộng rãi), nhưng hãy cân nhắc dán nhãn các phần tử ít rõ ràng hơn như Tài khoản (“Đăng nhập” hoặc “Hồ sơ”).
Màu sắc và độ tương phản
Các phần tử điều hướng của bạn phải nổi bật so với phần còn lại của trang mà không xung đột với thương hiệu của bạn.
- Tỷ lệ độ tương phản tối thiểu: 4.5:1 cho văn bản và biểu tượng (sử dụng Trình kiểm tra độ tương phản WebAIM để xác minh)
- Trạng thái hover: Trên desktop, biểu tượng và liên kết phải thay đổi màu hoặc gạch chân khi di chuột để người dùng biết chúng có thể nhấp được
- Trạng thái hoạt động: Khi khách hàng thêm một mục vào giỏ hàng, biểu tượng giỏ hàng phải hoạt động ngắn gọn hoặc làm nổi bật để xác nhận hành động
Ghép lại: ví dụ thực tế
Hãy xem cách các loại cửa hàng khác nhau triển khai năm thiết yếu.
Ví dụ 1: Thương hiệu quần áo nhỏ (30 sản phẩm)
Desktop:
- Logo (Trang chủ) — góc trên cùng bên trái
- Menu chính: Nữ, Nam, Giảm giá — thanh ngang
- Thanh tìm kiếm — góc trên cùng bên phải
- Biểu tượng Tài khoản, Giỏ hàng — góc trên cùng bên phải
Mobile:
- Tiêu đề: Logo, Hamburger, Giỏ hàng
- Menu Hamburger: Trang chủ, Nữ, Nam, Giảm giá, Tìm kiếm, Tài khoản
Ví dụ 2: Cửa hàng hàng gia dụng (80 sản phẩm)
Desktop:
- Logo (Trang chủ) — góc trên cùng bên trái
- Menu siêu lớn: Phòng khách, Phòng ngủ, Bếp, Ngoài trời (mỗi cái mở rộng để hiển thị các danh mục phụ)
- Thanh tìm kiếm — góc trên cùng bên phải
- Biểu tượng Tài khoản, Giỏ hàng — góc trên cùng bên phải
Mobile:
- Tiêu đề: Logo, Giỏ hàng
- Thanh tab dưới cùng: Trang chủ, Cửa hàng, Tìm kiếm, Tài khoản, Giỏ hàng
- Khi nhấp vào “Cửa hàng” sẽ mở menu trượt với toàn bộ cây danh mục
Ví dụ 3: Cửa hàng sản phẩm kỹ thuật số (5 sản phẩm)
Desktop:
- Logo (Trang chủ) — góc trên cùng bên trái
- Menu đơn giản: Khóa học, Mẫu, Gói hàng — thanh ngang
- Thanh tìm kiếm — góc trên cùng bên phải (ngay cả với chỉ 5 sản phẩm, khách hàng có thể tìm kiếm theo từ khóa)
- Biểu tượng Tài khoản, Giỏ hàng — góc trên cùng bên phải
Mobile:
- Tiêu đề: Logo, Menu, Giỏ hàng
- Menu Hamburger: Trang chủ, Khóa học, Mẫu, Gói hàng, Tài khoản
- Tìm kiếm trong menu hamburger
Công cụ để triển khai mà không cần code
Hầu hết các chủ đề Shopify đã bao gồm năm yếu tố này ngay từ hộp, nhưng vị trí và khả năng hiển thị của chúng khác nhau.
Dawn, Sense và Refresh (các chủ đề miễn phí của Shopify) hỗ trợ:
- Liên kết logo trang chủ (tự động)
- Menu điều hướng chính (cấu hình trong Cửa hàng trực tuyến → Điều hướng)
- Thanh tìm kiếm (bật trong cài đặt chủ đề)
- Biểu tượng giỏ hàng có số lượng mục (tích hợp sẵn)
- Liên kết tài khoản (tích hợp sẵn)
Để có thêm kiểm soát—đặc biệt là cho bố cục dành riêng cho mobile như thanh tab—hãy xem xét ứng dụng điều hướng như Navi+ Menu Builder. Nó cho phép bạn cấu hình điều hướng desktop và mobile riêng biệt, thêm biểu tượng, tùy chỉnh màu sắc và xem trước các thay đổi trước khi xuất bản, tất cả mà không cần viết code.
Danh sách kiểm tra triển khai 5 phút của bạn
Sử dụng danh sách kiểm tra này để kiểm toán thiết lập menu hiện tại của bạn:
- Trang chủ: Logo của bạn có liên kết đến trang chủ không? Có mục “Trang chủ” hiển thị trên mobile không?
- Danh mục: Các danh mục chính của bạn có hiển thị trong tiêu đề (desktop) hoặc có thể truy cập trong một lần nhấp (mobile) không?
- Tìm kiếm: Thanh tìm kiếm có luôn hiển thị trên desktop không? Có thể truy cập được trong một lần nhấp trên mobile không?
- Giỏ hàng: Biểu tượng giỏ hàng có ở góc trên cùng bên phải không? Nó có hiển thị badge số lượng mục không?
- Tài khoản: Có liên kết đăng nhập/tài khoản rõ ràng trong tiêu đề hoặc menu chính không?
Nếu bất kỳ câu trả lời nào là “không”, hãy ưu tiên sửa chữa nó tuần này. Đây không phải là những điều đẹp—chúng là nền tảng của một cửa hàng chức năng.
Có được năm thiết yếu đúng sẽ không làm được những tiêu đề, nhưng nó sẽ yên tĩnh chuyển đổi nhiều khách truy cập thành khách hàng hơn. Bắt đầu ở đây, sau đó bổ sung các tính năng nâng cao (menu siêu lớn, khuyến nghị được cá nhân hóa, hỗ trợ đa tiền tệ) khi các cơ bản vững chắc.
Bài viết này là một phần của hướng dẫn lớn hơn về Nền tảng điều hướng cho cửa hàng trực tuyến đầu tiên của bạn: 5 yếu tố thiết yếu.