Tạo thanh menu Shopify với các liên kết Trang chủ, Danh mục và Giới thiệu cho máy tính và điện thoại
Menu đầu tiên của một cửa hàng chỉ cần ba liên kết được chọn lọc kỹ lưỡng — Trang chủ, Danh mục và Giới thiệu — thiết lập một lần duy nhất trong Content > Menus, hiển thị rõ ràng trên header máy tính, nằm gọn trong ngăn kéo di động và có thể ghim vào thanh tab bar ở đáy điện thoại để luôn trong tầm với của người mua.
- Ba liên kết thiết yếu: Trang chủ dẫn về gốc cửa hàng, Danh mục giới thiệu toàn bộ sản phẩm, và Giới thiệu tạo dựng niềm tin mua sắm.
- Hiển thị kép: Cùng một menu sẽ xuất hiện trên thanh header máy tính và ngăn kéo điều hướng di động.
- Tầm với di động: Thanh tab bar ở cạnh đáy luôn hiển thị ba trang chính trên điện thoại, chỉ cách một lần chạm.
Câu trả lời nhanh: cách tạo menu với liên kết Trang chủ, Danh mục và Giới thiệu
Tạo trang Giới thiệu trong Online Store > Pages, sau đó vào Content > Menus, mở menu chính và thêm ba mục: Trang chủ (kiểu liên kết Home page), Danh mục (/collections/all hoặc một bộ sưu tập cụ thể), và Giới thiệu (trang bạn vừa tạo). Lưu menu và kiểm tra cài đặt theme để header hiển thị đúng danh sách này. Có thể thêm một thanh tab bar cho điện thoại.
Quy trình 5 bước thực hiện:
- Tạo trang Giới thiệu trong Online Store > Pages và chuyển sang trạng thái xuất bản (Visible).
- Mở Content > Menus trong trang quản trị Shopify và chọn menu chính của cửa hàng.
- Thêm ba liên kết: Trang chủ (kiểu Home page), Danh mục (
/collections/allhoặc một bộ sưu tập) và Giới thiệu (trang nội dung của bạn). - Lưu menu và xác nhận trong phần tùy biến theme rằng header đang trỏ đúng vào menu này.
- Kiểm tra trên di động: xem hiển thị trong ngăn kéo menu và bổ sung thanh tab bar ở đáy nếu muốn liên kết luôn sẵn sàng.
Các liên kết trong thanh menu Trang chủ, Danh mục và Giới thiệu
Khi mới bắt đầu mở cửa hàng trực tuyến, bạn không cần một cấu trúc điều hướng đồ sộ. Một thanh menu tập trung với ba liên kết cung cấp lộ trình rõ ràng, giúp khách truy cập lần đầu không bị quá tải thông tin:
- Trang chủ (Home): Điểm tựa cố định giúp khách hàng dễ dàng quay trở lại trang gốc của cửa hàng từ bất kỳ đâu.
- Danh mục (Catalog): Trung tâm mua sắm nơi khách hàng khám phá toàn bộ sản phẩm, duyệt qua các bộ sưu tập và tìm kiếm mặt hàng phù hợp.
- Giới thiệu (About): Kể câu chuyện thương hiệu và chứng minh sự uy tín của doanh nghiệp, mang lại lý do thuyết phục để khách an tâm đặt hàng.
Giữ menu ban đầu ở mức ba liên kết đảm bảo tính dễ đọc trên mọi kích thước màn hình. Nghiên cứu trải nghiệm người dùng từ Nielsen Norman Group chỉ ra rằng các lựa chọn điều hướng hiển thị trực tiếp hoạt động hiệu quả nhất khi có từ 4 đến 5 mục cấp cao nhất. Việc duy trì ba mục cốt lõi giúp các nhãn văn bản luôn rõ ràng trên màn hình điện thoại nhỏ, đồng thời để dành không gian cho việc bổ sung liên kết Liên hệ hoặc Câu hỏi thường gặp sau này.
Bước 1: Tạo trang Giới thiệu và chọn liên kết Danh mục
Trước khi ghép nối menu, bạn cần chuẩn bị sẵn các trang đích để mỗi mục điều hướng đều kết nối chính xác vào nội dung đã xuất bản.
Tạo trang Giới thiệu
Trong quản trị Shopify, điều hướng đến Online Store > Pages và nhấp vào nút Add page. Đặt tiêu đề là Về chúng tôi hoặc Giới thiệu. Viết một câu chuyện thương hiệu súc tích mô tả nguồn gốc doanh nghiệp, chất lượng sản phẩm hoặc cam kết phục vụ khách hàng. Tài liệu chính thức của Shopify về quản lý trang nêu rõ rằng các trang nội dung dùng để lưu trữ thông tin ít khi thay đổi, và hướng dẫn trang Giới thiệu của Shopify nhấn mạnh vai trò khơi gợi niềm tin nơi người mua. Chọn chế độ hiển thị là Visible rồi nhấn lưu. Lưu ý rằng việc tạo một About page sẽ không tự động đưa trang đó vào thanh menu; bạn bắt buộc phải tạo liên kết thủ công ở bước tiếp theo.
Lựa chọn đích đến cho liên kết Danh mục
Xác định nơi mà Catalog link sẽ dẫn khách hàng tới:
| Đích đến | Cách chọn trong admin | Trường hợp áp dụng phù hợp |
|---|---|---|
Tất cả sản phẩm (/collections/all) |
Nhập your-store.com/collections/all |
Liệt kê toàn bộ sản phẩm đang hiển thị theo thứ tự chữ cái mặc định. |
| Một bộ sưu tập cụ thể | Chọn bộ sưu tập trong danh sách | Dành cho danh mục chọn lọc hoặc các dòng sản phẩm trọng tâm. |
Theo tài liệu Help Center của Shopify về trang catalog, mọi cửa hàng đều có sẵn đường dẫn /collections/all hiển thị sản phẩm theo thứ tự A-Z mặc định. Để thay đổi thứ tự, bạn có thể tạo một bộ sưu tập với định danh (handle) là all, hoặc trỏ liên kết trực tiếp vào một bộ sưu tập được tuyển chọn riêng.
Bước 2: Dựng menu trong Content > Menus
Khi các trang đích đã sẵn sàng, bạn tiến hành lắp ráp thanh menu trong giao diện quản trị.
Hình 1: Minh hoạ khái niệm (Concept illustration) — Bước 2: Dựng menu trong Content > Menus
Thêm liên kết Trang chủ
Trong Content > Menus, nhấp vào menu chính của bạn và bấm Add menu item. Đặt tên là Trang chủ (hoặc Home). Tại mục Link, chọn Home page. Khi bạn chọn đúng kiểu Home page link, hệ thống sẽ tự động gán đường dẫn về trang chủ cửa hàng mà không cần gõ URL.
Thêm liên kết Danh mục
Nhấp vào Add menu item và nhập tên Danh mục (hoặc Sản phẩm). Tại mục Link, chọn một bộ sưu tập từ danh sách, hoặc dùng trang tất cả sản phẩm tại /collections/all. Tài liệu chính thức của Shopify về chỉnh sửa menu khuyến cáo rằng việc tự dán URL thô thay vì chọn trực tiếp từ danh sách có thể làm gián đoạn liên kết và gây ra lỗi 404. Vì vậy, hãy chọn đích đến từ danh sách của Shopify mỗi khi đích đó có trong danh sách.
Thêm liên kết Giới thiệu
Nhấp vào Add menu item và nhập tên Giới thiệu. Tại mục Link, nhấp vào Pages và chọn đúng trang Giới thiệu bạn đã xuất bản ở Bước 1.
Lưu và sắp xếp thứ tự liên kết
Kiểm tra lại ba mục trong bảng cấu hình menu:
| Tên liên kết | Kiểu liên kết | Đích đến | Ghi chú |
|---|---|---|---|
| Trang chủ | Home page | Gốc cửa hàng (/) |
Hệ thống tự động gán. |
| Danh mục | Collections / URL | /collections/all hoặc BST cụ thể |
Liệt kê danh sách sản phẩm. |
| Giới thiệu | Pages | Trang Giới thiệu đã xuất bản | Chia sẻ câu chuyện thương hiệu. |
Dùng chuột giữ vào biểu tượng dấu chấm ở đầu mỗi dòng để kéo thả theo đúng thứ tự: Trang chủ, Danh mục, Giới thiệu. Thứ tự hiển thị ngoài cửa hàng sẽ phản ánh chính xác vị trí trong danh sách này. Shopify giới hạn tối đa 200 thay đổi chưa lưu, vì vậy hãy bấm Save menu thường xuyên. Bạn cũng có thể thêm biểu tượng cảm xúc (emoji) trực tiếp vào ô tên liên kết nếu muốn tạo điểm nhấn sinh động.
Bước 3: Hiển thị menu trên header máy tính
Việc lưu menu trong quản trị không đồng nghĩa với việc nó sẽ tự động hiển thị ra ngoài giao diện; vị trí gắn menu phụ thuộc vào thiết lập của theme.
Để đưa menu lên thanh đầu trang trên máy tính, vào Online Store > Themes và bấm Customize tại theme đang kích hoạt. Chọn mục Header trong thanh điều khiển bên trái. Sau đó chọn đúng menu bạn vừa thiết lập. Tên cài đặt khác nhau tùy theme, nên hãy tìm tùy chọn menu trong mục đó.
Trên màn hình máy tính rộng, hãy đảm bảo theme của bạn hiển thị đầy đủ các liên kết theo hàng ngang thay vì thu gọn sau một biểu tượng. Báo cáo nghiên cứu khả năng sử dụng của Nielsen Norman Group về điều hướng desktop chỉ ra rằng việc hiển thị trực quan các mục menu trên màn hình lớn giúp tăng đáng kể khả năng tìm kiếm nội dung so với việc giấu chúng sau nút bấm. Đảm bảo thanh Desktop header menu của bạn thể hiện rõ ràng cả ba liên kết cho người dùng máy tính.
Giao diện menu trên điện thoại di động
Trong khi màn hình máy tính hiển thị các liên kết trải dài nằm ngang, điện thoại thông minh lại có không gian bề ngang rất hạn chế.
Hình 2: Minh hoạ khái niệm (Concept illustration) — Giao diện menu trên điện thoại di động
Đa phần các giao diện Shopify sẽ tự động thu gọn phần header trên điện thoại và chuyển các liên kết vào ngăn kéo trượt Menu drawer mở ra qua biểu tượng ba dấu gạch ngang (hamburger). Nghiên cứu của NN/g về điều hướng di động khẳng định rằng việc ẩn liên kết sau nút bấm sẽ làm giảm mức độ nhận biết của người dùng. Với một menu chỉ vỏn vẹn ba liên kết, việc cho phép khách hàng nhìn thấy và chạm ngay vào mục mong muốn mà không phải tốn thêm thao tác mở menu là một cải tiến lớn về trải nghiệm.
Nếu bạn muốn cấu trúc điều hướng trên điện thoại khác biệt hoàn toàn với máy tính, bạn có thể tham khảo hướng dẫn hiển thị menu khác nhau trên desktop và mobile.
| Mô hình điều hướng | Luôn nhìn thấy? | Cần thao tác mở? | Trường hợp tối ưu |
|---|---|---|---|
| Desktop header menu | Có (trên máy tính) | Không | Màn hình máy tính rộng rãi. |
| Mobile Menu drawer | Không (ẩn sau icon) | Có (chạm nút hamburger) | Danh sách nhiều liên kết phụ. |
| Mobile tab bar | Có (ghim cố định ở đáy) | Không (chạm trực tiếp 1 lần) | Một vài liên kết đích quan trọng nhất. |
Bước 4: Thêm thanh tab bar ở đáy màn hình điện thoại
Nếu nhiều khách mua hàng bằng điện thoại, nút hamburger sẽ giấu các liên kết của bạn cho đến khi họ chạm vào.
Một thanh Bottom tab bar ghim các liên kết quan trọng nhất ở cạnh đáy màn hình. Tài liệu nghiên cứu di động của NN/g lưu ý rằng thanh tab bar luôn hiển thị, dù người dùng có cuộn trang hay không.
Đa số theme Shopify tiêu chuẩn không tích hợp sẵn thanh tab bar cố định ở đáy màn hình, nên bạn thường cần cài ứng dụng hoặc tự viết code. Khi thiết lập thanh tab bar, hãy dùng lại đúng ba liên kết (Trang chủ, Danh mục, Giới thiệu) với cùng URL đích như trên máy tính. Sự đồng nhất này giúp người mua không bị bỡ ngỡ khi chuyển đổi giữa các thiết bị.
Thêm biểu tượng và kiểm thử trên mọi kích thước màn hình
Bổ sung biểu tượng trực quan giúp khách hàng nhận biết các mục điều hướng nhanh hơn, tuy nhiên việc thiết kế biểu tượng đòi hỏi sự thận trọng.
Mặc dù tên liên kết trong Shopify hỗ trợ emoji dạng văn bản, các biểu tượng đồ họa SVG chuyên nghiệp thường cần tới tính năng của theme hoặc ứng dụng điều hướng. Nghiên cứu từ Nielsen Norman Group đặc biệt lưu ý việc dùng Icon with label (biểu tượng đi kèm nhãn chữ rõ ràng) thay vì chỉ để biểu tượng đơn độc, bởi hình ảnh trừu tượng rất dễ gây hiểu lầm. Nếu bạn sử dụng ứng dụng chuyên dụng, hãy làm theo hướng dẫn cách cài đặt biểu tượng cho từng mục menu.
Đồng thời, vùng chạm của các nút bấm phải đáp ứng tiêu chuẩn tiếp cận web. Tiêu chí thành công 2.5.8 trong WCAG 2.2 của W3C quy định kích thước mục tiêu tối thiểu là 24×24 CSS pixel (có một số ngoại lệ).
Hãy tiến hành kiểm thử kỹ lưỡng trước khi công bố:
- Màn hình máy tính: Đảm bảo các liên kết nằm thẳng hàng trên header và không bị tràn dòng.
- Màn hình máy tính bảng: Kiểm tra điểm ngắt (breakpoint) chuyển đổi giữa hàng link ngang và biểu tượng hamburger.
- Màn hình điện thoại dọc: Xác nhận ngăn kéo mở mượt mà và hiển thị đủ ba liên kết.
- Màn hình điện thoại ngang: Đảm bảo menu không chiếm dụng toàn bộ chiều cao hiển thị.
- Kiểm tra tương tác: Bấm thử từng liên kết để chắc chắn chuyển trang chính xác và không lỗi.
Các lỗi thường gặp và cách xử lý
Nếu thanh menu của bạn hoạt động không đúng như kỳ vọng, hãy rà soát các trường hợp phổ biến dưới đây kết hợp với bài viết hướng dẫn khắc phục liên kết hỏng trong menu điều hướng:
Liên kết dẫn đến trang báo lỗi 404
Nếu bấm vào Danh mục hoặc Giới thiệu mà xuất hiện trang 404, nguyên nhân thường do bạn dán URL thủ công bị sai ký tự. Hãy vào lại Content > Menus và chọn liên kết trực tiếp từ danh mục hệ thống của Shopify.
Trang Giới thiệu không xuất hiện trong menu
Bạn đã viết xong nội dung nhưng header không có nút bấm. Hãy nhớ rằng các trang tạo trong Online Store > Pages không tự động vào menu. Bạn cần thêm liên kết trong Content > Menus và đảm bảo trạng thái trang là Visible.
Liên kết Danh mục hiển thị sai thứ tự sản phẩm
Trang catalog mở ra nhưng sản phẩm không theo ý muốn. Đường dẫn /collections/all của Shopify mặc định sắp xếp theo chữ cái A-Z. Để đổi thứ tự, hãy tạo một bộ sưu tập có định danh là all.
Header không cập nhật thay đổi menu mới
Bạn đã lưu các chỉnh sửa trong admin nhưng trang web vẫn hiển thị menu cũ. Vào Online Store > Themes > Customize, mở phần Header và kiểm tra xem theme đã trỏ vào đúng menu bạn vừa cập nhật chưa.
Bấm vào mục cha nhưng không chuyển trang
Nếu bạn tạo menu thả xuống dưới mục Danh mục và bấm vào Danh mục không chuyển hướng, đó là do thiết kế của giao diện. Hầu hết các theme hiện đại xử lý mục cha là nút bấm bật/tắt menu con thay vì một liên kết chuyển trang.
Đánh đổi: khi menu ba liên kết không còn đủ
Menu ba liên kết là nền tảng khởi đầu lý tưởng, nhưng khi quy mô cửa hàng mở rộng, bạn sẽ gặp phải những giới hạn nhất định.
Mở rộng khi danh mục phát triển
Khi danh mục hàng hóa tăng lên nhiều chủng loại, chỉ một liên kết Danh mục duy nhất sẽ khiến khách hàng khó tìm sản phẩm. Khi đó, bạn nên thêm menu phụ nhiều cấp dưới Danh mục. Menu Shopify hỗ trợ tối đa 2 cấp lồng nhau cho menu thả xuống. Với các cửa hàng có số lượng mặt hàng lớn trên máy tính, bạn có thể biến Danh mục thành mega menu để trình bày danh mục theo nhiều cột kèm hình ảnh quảng bá bắt mắt.
Xem video hướng dẫn chính thức từ Shopify Academy dưới đây để nắm rõ cách tạo cấu trúc menu thả xuống theo từng cấp độ:
Giới hạn của thanh tab bar đáy trên di động
Dù tab bar mang lại sự tiện lợi vượt trội, nghiên cứu của NN/g chỉ ra rằng nó chỉ phù hợp với các ứng dụng hoặc website có số lượng lựa chọn ít. Nếu bạn cố nhồi nhét quá 4 đến 5 mục, thanh tab sẽ trở nên chật chội. Ngoài ra, thanh tab bar sẽ chiếm một phần diện tích hiển thị cố định ở cạnh đáy. Nếu tệp khách hàng của bạn chủ yếu mua sắm trên máy tính, việc cài đặt tab bar di động có thể là không cần thiết.
Vai trò của Navi+
Việc thiết lập các liên kết Trang chủ, Danh mục và Giới thiệu trong Shopify admin khá đơn giản, nhưng các cài đặt theme mặc định thường thiếu khả năng tinh chỉnh hiển thị chuyên sâu trên di động.
Nếu bạn muốn ghim cố định Trang chủ, Danh mục và Giới thiệu ở cạnh đáy màn hình điện thoại với biểu tượng và nhãn chữ trực quan trên từng tab, Navi+ Tab Bar sẽ giúp bạn thiết lập ngay mà không cần can thiệp vào code theme. Bạn vẫn giữ nguyên menu Shopify cho header máy tính và đồng bộ ba liên kết này lên thanh tab bar.
Khi quy mô kinh doanh ngày càng lớn mạnh, hệ sinh thái Navi+ sẽ đồng hành cùng bạn:
- Navi+ Mobile Menu: Tạo ngăn kéo điều hướng di động tách biệt với phong cách riêng của thương hiệu, đồng bộ danh mục từ Shopify chỉ với một nút bấm.
- Navi+ Desktop Mega Menu: Tổ chức danh mục sản phẩm lớn thành bố cục mega menu nhiều cột kèm hình ảnh thu hút (hỗ trợ độ sâu lên tới 3 cấp logic).
Để tìm kiếm giải pháp điều hướng phù hợp nhất với mô hình cửa hàng của bạn, hãy đọc cẩm nang cách chọn loại menu phù hợp cho cửa hàng Shopify.
Danh sách kiểm tra hành động
Sử dụng bảng kiểm tra dưới đây để rà soát toàn diện thanh điều hướng ba liên kết của bạn:
- Xuất bản trang Giới thiệu: Đảm bảo trang Giới thiệu đã tạo và ở trạng thái Visible trong Online Store > Pages.
- Xác định đích đến Danh mục: Chọn giữa trang mặc định
/collections/allhoặc bộ sưu tập có handleall. - Mở trình chỉnh sửa menu: Vào Content > Menus và nhấp chọn menu chính của cửa hàng.
- Thêm Trang chủ: Chọn kiểu liên kết Home page để hệ thống tự động gán đường dẫn chuẩn.
- Thêm Danh mục: Chọn đích đến bộ sưu tập trực tiếp từ danh sách thả xuống của hệ thống.
- Thêm Giới thiệu: Chọn trang Giới thiệu đã xuất bản từ danh mục Pages nội bộ.
- Sắp xếp và lưu menu: Kéo thả đúng thứ tự mong muốn và nhấn Save menu.
- Gắn menu vào theme: Trong Online Store > Themes > Customize, đảm bảo Header trỏ đúng vào menu vừa tạo.
- Kiểm tra ngăn kéo di động: Mở xem trước trên điện thoại để kiểm tra cách hiển thị trong drawer.
- (Tùy chọn) Cấu hình tab bar đáy: Ghim 3 tab có đủ biểu tượng và nhãn chữ ở cạnh đáy điện thoại.
- Kiểm tra liên kết thực tế: Bấm thử toàn bộ liên kết trên cả máy tính và điện thoại để đảm bảo không có lỗi phát sinh.
Câu hỏi thường gặp
Liên kết Danh mục nên trỏ về đâu?
Mọi cửa hàng Shopify đều có sẵn trang /collections/all liệt kê sản phẩm theo thứ tự bảng chữ cái. Nếu muốn tùy biến thứ tự, bạn hãy tạo một bộ sưu tập có handle là all hoặc trỏ thẳng vào một bộ sưu tập cụ thể.
Tại sao trang Giới thiệu không xuất hiện trong menu?
Tạo trang trong Online Store > Pages không đồng nghĩa với việc trang đó tự vào menu. Bạn bắt buộc phải vào Content > Menus, mở menu chính và thêm trang đã xuất bản từ danh mục Pages.
Cùng một menu có tự hiển thị trên điện thoại không?
Có, đa số các theme Shopify sẽ tái sử dụng menu header máy tính bên trong ngăn kéo menu di động mở ra qua biểu tượng hamburger. Do phong cách hiển thị tùy thuộc vào theme, bạn hãy kiểm tra trực tiếp trên điện thoại.
Có cần cài ứng dụng để tạo thanh tab bar ở đáy không?
Hầu hết các theme tiêu chuẩn chỉ cung cấp header và ngăn kéo menu chứ không có thanh tab bar cố định ở đáy. Để bổ sung tính năng này, bạn cần cài đặt một ứng dụng điều hướng hoặc tự viết code, và thanh tab phù hợp với một số ít liên kết cốt lõi.
Có thể thêm biểu tượng vào các mục menu không?
Bạn có thể chèn emoji trực tiếp vào trường nhập tên liên kết trong admin. Nếu muốn dùng biểu tượng đồ họa SVG chuyên nghiệp, bạn cần cài đặt theme hỗ trợ hoặc dùng ứng dụng menu, và luôn nên kèm theo nhãn chữ bên cạnh biểu tượng.
Vì sao bấm vào liên kết menu lại bị lỗi 404?
Việc tự gõ đường dẫn URL thủ công thay vì chọn từ danh mục có sẵn của Shopify dễ làm đứt gãy kết nối khi đường dẫn sản phẩm hoặc trang thay đổi. Luôn chọn đích đến trực tiếp từ danh sách thả xuống sẽ giúp liên kết hoạt động ổn định.
Nguồn tham khảo
- Shopify Help Center: Editing menus
- Shopify Help Center: Menus and links
- Shopify Help Center: Drop-down menus
- Shopify Help Center: Add and edit pages
- Shopify Help Center: Change catalog page
- Shopify Help Center: About us page
- Nielsen Norman Group: Mobile navigation patterns
- Nielsen Norman Group: Visible navigation on mobile
- Nielsen Norman Group: Desktop navigation not hamburger
- Nielsen Norman Group: Hamburger menus and discoverability
- Nielsen Norman Group: Icon usability
- W3C: WCAG 2.2 Target Size (Minimum)
Khám phá các chủ đề
Bài này dẫn tới các bài chuyên sâu hơn — đào sâu từng phần.