Cách thêm một mục mới vào menu điều hướng Shopify (Mọi loại liên kết, mọi menu, cả mobile)
Thêm một mục menu trong Shopify chỉ mất khoảng một phút; nhiệm vụ quan trọng thực sự là chọn đúng loại liên kết, đặt mục vào đúng vị trí và kiểm tra kỹ lưỡng xem nó có hiển thị trên mọi bề mặt mà người mua điều hướng hay không (từ header máy tính, drawer di động, footer cho đến các menu do ứng dụng vẽ).
Dù thao tác thêm trong trang quản trị chỉ mất vài giây, các liên kết cần được đặt đúng vị trí để hiển thị rõ ràng trên mọi thiết bị.
Bài viết này sẽ hướng dẫn bạn cách thêm bất kỳ loại liên kết nào vào menu Shopify, bố trí vị trí chuẩn xác và kiểm tra hiển thị mượt mà trên mọi thiết bị.
Quick answer: add a new item to your navigation menu
Để thêm một mục mới vào menu điều hướng Shopify, bạn vào Content > Menus trong trang quản trị Shopify, mở menu mà theme đang sử dụng, nhấp Add menu item, nhập tên nhãn, chọn liên kết từ danh sách có sẵn, sau đó nhấp Add và lưu menu lại.
Thực hiện theo 6 bước cụ thể sau trong trang quản trị Shopify:
- Trong trang quản trị Shopify, truy cập vào Content > Menus (Shopify Help Center).
- Nhấp vào menu mà theme đang hiển thị, thường có tên mặc định là Main menu (Shopify Help Center).
- Nhấp vào nút Add menu item (Shopify Help Center).
- Tại ô Name, nhập nhãn hiển thị mà bạn muốn khách mua hàng nhìn thấy trên giao diện cửa hàng.
- Tại ô Link, chọn trực tiếp trang đích từ danh sách thả xuống thay vì dán địa chỉ URL thủ công (Shopify Help Center).
- Nhấp Add, sau đó nhấp Save menu ở thanh điều khiển để lưu lại toàn bộ thay đổi (Shopify Help Center; Fudge.ai).
Các hướng dẫn cũ có thể ghi đường dẫn là “Online Store > Navigation”, nhưng Content > Menus mới là vị trí chuẩn xác trong hệ thống Shopify hiện nay.
Before you add the item: create the destination first
Trước khi thêm một mục mới vào menu, hãy luôn tạo và xuất bản trang đích trước. Cho dù liên kết trỏ tới trang nội dung, bộ sưu tập, sản phẩm, bài blog hay chính sách, tài nguyên đó bắt buộc phải tồn tại trong trang quản trị trước khi tạo liên kết.
Hãy chọn trang đích trực tiếp từ danh sách của Shopify thay vì gõ URL bằng tay: Shopify cảnh báo rằng đổi URL của mục menu, hoặc liên kết tới một URL thay vì chọn trang trực tiếp, có thể làm đứt kết nối và dẫn tới lỗi 404 (Shopify Help Center).
Hãy giữ cho tên mục (Name) ngắn gọn, quen thuộc với khách hàng. Những nhãn rõ ràng như “Giày chạy bộ” hay “Tra cứu đơn hàng” giúp người mua định hình nhanh lộ trình duyệt hàng.
Pick the link type for your new item
Khi bạn nhấp vào ô Link, Shopify sẽ hiển thị một danh sách các loại liên kết cố định (Shopify Help Center). Việc lựa chọn đúng loại liên kết đảm bảo khách truy cập sẽ được chuyển hướng chính xác mà không gặp lỗi.
| Loại liên kết | Dùng cho mục đích | Ví dụ minh họa |
|---|---|---|
| Home page | Điều hướng khách hàng quay trở lại trang chủ của cửa hàng | Nút “Trang chủ” hoặc phương án thay thế cho logo cửa hàng |
| Search | Mở thẳng giao diện tìm kiếm sản phẩm trên storefront | Liên kết văn bản “Tìm kiếm sản phẩm” trong menu tiện ích |
| Collections | Nhóm sản phẩm phân loại, danh mục mùa vụ hoặc ngành hàng chính | “Đồ jean nữ”, “Xả kho mùa hè” hoặc “Hàng mới về” |
| Products | Dẫn thẳng tới trang chi tiết của một sản phẩm duy nhất | Giới thiệu một sản phẩm chủ lực vừa ra mắt hoặc phiên bản giới hạn |
| Pages | Các trang nội dung thông tin độc lập và hỗ trợ khách hàng | “Về chúng tôi”, “Bảng quy đổi kích cỡ”, “FAQ” |
| Blogs | Trang tổng hợp danh sách các bài viết thuộc một kênh blog | “Cẩm nang phong cách” hoặc “Nhật ký thương hiệu” |
| Blog posts | Một bài viết cụ thể đã xuất bản trên blog | Nêu bật một cẩm nang chọn đồ hữu ích hoặc hướng dẫn mua sắm |
| Policies | Các điều khoản pháp lý và quy định bán hàng của cửa hàng | “Chính sách đổi trả” hoặc “Chính sách bảo mật” |
| Customer accounts | Lối tắt dẫn thẳng tới khu vực đăng nhập hoặc lịch sử đơn hàng | “Tài khoản của tôi” hoặc “Đăng nhập” |
| External page | Bất kỳ trang web nào nằm ngoài tên miền cửa hàng Shopify của bạn | Cổng bán sỉ đối tác, thương hiệu đối tác hoặc hệ thống đặt lịch |
| Email link | Liên kết mailto tới địa chỉ hỗ trợ hoặc bán hàng của bạn | Liên kết hỗ trợ khách hàng trực tiếp dạng “Email hỗ trợ” |
Link to an external site or an email address
Nếu bạn muốn mục menu trỏ tới một trang web bên ngoài, hãy dán toàn bộ địa chỉ URL vào ô Link, chờ danh sách hiển thị đích đến tương ứng rồi nhấp chọn (Shopify Help Center).
Để tạo liên kết email trực tiếp, hãy nhập cú pháp mailto:[email protected] vào ô Link (Shopify Help Center).
Lưu ý rằng việc dán trực tiếp một URL nội bộ thay vì chọn trang từ danh sách có thể làm gián đoạn liên kết và dẫn tới lỗi 404 (Shopify Help Center). Hãy dùng URL dán tay cho các tên miền bên ngoài.
Concept illustration: chọn loại liên kết cho một mục menu mới và thấy mục đó xuất hiện trong menu cửa hàng.
Decide where the item goes: top level, inside a dropdown or the footer
Sau khi chọn loại liên kết, bạn cần xác định vị trí của mục đó trong cây phân cấp của cửa hàng. Các mục menu hiển thị trên storefront theo đúng thứ tự mà chúng được liệt kê trong trang quản trị (Shopify Help Center).
Move the item and change its order
Để thay đổi thứ tự hiển thị của các mục:
- Nhấp và giữ biểu tượng tay cầm (
⠿) nằm bên cạnh tên mục menu (Shopify Help Center). - Kéo mục theo chiều dọc lên hoặc xuống vị trí bạn mong muốn.
- Thả biểu tượng tay cầm ra, sau đó nhấp Save menu.
Put the item inside a dropdown
Để đưa một mục mới vào dropdown, hãy kéo mục xuống ngay dưới mục cha rồi trượt nhẹ sang phải cho đến khi dòng thụt lề.
Trong Shopify, mục cấp cao nhất có thể chứa tối đa hai cấp dropdown lồng bên dưới (Shopify Help Center). Nếu không muốn mục cha dẫn đi đâu khi bấm, hãy nhập # vào ô Link của mục cha.
Đa số các theme coi mục cha của dropdown là nút bấm mở menu thay vì liên kết có thể nhấp (Shopify Help Center). Khi danh mục mở rộng nhanh, bạn nên sớm lập kế hoạch cấu trúc menu nhiều cấp để nhánh phân loại luôn rõ ràng.
Add the item to the footer menu
Các liên kết tiện ích phụ nên đặt ở footer menu thay vì làm chật chội thanh header chính.
Tại Content > Menus, chọn Footer menu, nhấp Add menu item và chọn liên kết. Footer menu chỉ có thể hiển thị các mục cấp cao nhất (Shopify Help Center); không hỗ trợ dropdown lồng cấp.
Shopify khuyên bạn nên duy trì từ bảy mục cấp cao nhất trở xuống trên menu chính để tránh làm header bị quá tải (Shopify Help Center).
One item, every surface: where your new item shows up
Lưu một mục menu không đồng nghĩa với việc nó sẽ hiển thị giống hệt nhau trên mọi thiết bị. Vị trí hiển thị phụ thuộc vào bố cục storefront và cấu hình của theme.
Cửa hàng có 2 menu mặc định hiển thị trên mọi trang: main menu và footer menu (Shopify Help Center). Tuy nhiên vị trí menu và dropdown lại khác nhau tùy theme (Shopify Help Center).
Trên di động, nhiều theme thu gọn menu chính vào drawer trượt sau nút hamburger; vị trí chính xác tùy theme của bạn.
Nghiên cứu từ Nielsen Norman Group chỉ ra rằng biểu tượng hamburger không phổ quát, và ẩn giấu điều hướng toàn cục làm suy giảm trải nghiệm người dùng cả trên desktop lẫn mobile (NN/g). Với mục quan trọng, hãy cân nhắc điều hướng di động vượt ra ngoài biểu tượng hamburger hoặc icon menu hình ảnh trực quan.
Các app điều hướng bên thứ ba tạo menu bên trong app thay vì dùng cài đặt admin (Shopify Help Center). Nếu dùng app vẽ menu, bạn phải thêm mục ngay bên trong app.
| Bề mặt giao diện | Mục mới có tự xuất hiện không? | Hành động cần thực hiện |
|---|---|---|
| Header máy tính | Thường có (tùy thuộc vào theme) | Kiểm tra phần Header của theme có trỏ đúng menu không; kiểm tra căn dòng chữ. |
| Drawer di động | Tùy thuộc vào theme | Mở store trên điện thoại thật; kiểm tra vùng chạm và độ thụt lề trong drawer. |
| Footer menu | Chỉ hiển thị các mục cấp cao nhất | Thêm trực tiếp vào Footer menu; footer không hỗ trợ menu thả xuống lồng cấp. |
| Menu do ứng dụng vẽ | Không | Ứng dụng quản lý cây menu riêng; hãy thêm mục bên trong trang quản trị của ứng dụng. |
Concept illustration: nơi một mục menu mới có thể xuất hiện trên header máy tính và trong ngăn kéo trên di động.
New item not showing? Five quick checks
Nếu bạn đã thêm mục mới trong trang quản trị nhưng không thấy xuất hiện trên cửa hàng, hãy kiểm tra 5 điểm sau:
- Bạn đã nhấp Save menu chưa? Thay đổi sẽ không áp dụng lên storefront cho đến khi bạn lưu menu rõ ràng (Shopify Help Center; Fudge.ai).
- Theme có chọn đúng menu không? Trong trình chỉnh sửa theme (theme editor), kiểm tra phần Header và Footer để chắc chắn menu được gán khớp với menu bạn đang sửa (Shopify Help Center).
- Mục con đã được kéo thụt lề chưa? Đảm bảo các mục dropdown đã được kéo trọn vẹn xuống dưới mục cha và thụt lề trong Menus (Shopify Help Center).
- Theme của bạn có phải bản cũ không? Một số theme cũ không hỗ trợ menu thả xuống nhiều cấp (từ ba cấp trở lên) (Shopify Help Center).
- Menu có do ứng dụng vẽ không? Các app điều hướng tạo menu trong app thay vì đọc cài đặt admin (Shopify Help Center).
Nếu mục menu báo lỗi 404, hãy chắc chắn bạn đã chọn trang đích từ danh sách thay vì dán URL thủ công (Shopify Help Center).
Trade-offs: when not to add another item
Mỗi liên kết thêm vào menu đều làm tăng tải xử lý thị giác của khách hàng. Thêm mục vô tội vạ khiến thanh điều hướng khó quét thông tin hơn.
Shopify khuyên bạn duy trì từ 7 mục cấp cao nhất trở xuống để tránh làm quá tải cửa hàng (Shopify Help Center). Hãy gom các mục liên quan vào một dropdown hợp lý thay vì mở thêm tab.
Tuy nhiên dropdown cũng có đánh đổi: đa số theme biến tiêu đề dropdown thành nút bấm thay vì liên kết có thể nhấp (Shopify Help Center), khiến người mua không thể bấm thẳng vào trang cha.
Trên di động, việc ẩn điều hướng toàn cục làm suy giảm trải nghiệm người dùng (NN/g), khiến các mục lồng sâu dễ bị bỏ qua.
Trước khi thêm mục vào header, hãy cân nhắc xem nó có nên đặt ở nơi khác không. Các liên kết tiện ích phụ rất hợp với footer menu vì footer chỉ hiện mục top-level (Shopify Help Center). Thuộc tính sản phẩm có thể phù hợp hơn khi làm bộ lọc. Xem thêm giới hạn của menu theme mặc định khi cần giải pháp nâng cao.
Adding the same item to a Navi+ menu
Shopify lưu ý rằng các app điều hướng tạo menu bên trong app thay vì dùng cài đặt menu trong admin (Shopify Help Center). Navi+ Tab Bar, Mobile Menu và Mega Menu hoạt động theo cách này, nên thêm mục trong Content > Menus sẽ không cập nhật cây menu Navi+.
Để thêm mục bên trong Navi+:
- Mở trang quản trị Navi+ trong Shopify và chọn menu bạn cần chỉnh sửa.
- Nhấp + Add item; các mục mới luôn nằm ở dưới cùng cây menu (Navi+ Documentation).
- Kéo mục theo chiều dọc lên trên để đổi thứ tự.
- Kéo nhẹ sang phải để mục trở thành con của mục ngay phía trên (Navi+ Documentation).
- Nhấp Save; khách hàng chỉ thấy thay đổi sau khi bạn bấm Save (Navi+ Documentation).
- Với Tab Bar, hãy xuất bản (publish) đúng menu đã chọn để hiển thị ra website (Navi+ Documentation).
Giới hạn số cấp phụ thuộc loại menu chứ không phụ thuộc gói (Navi+ Documentation); Tab Bar hỗ trợ 3 cấp (Navi+ Documentation). Xem cách xây dựng menu desktop trong ứng dụng menu.
If you want the same new item to sit in a bottom tab bar or a mega menu on top of your theme menu, Navi+ Tab Bar & Mega Menu lets you add it in the app’s menu tree, drag it into place, save and publish.
Action checklist
Rà soát kỹ 8 điểm kiểm tra sau trước khi coi mục menu mới của bạn đã hoàn toàn sẵn sàng:
- Đích đến đã tồn tại: Trang nội dung, bộ sưu tập, sản phẩm hoặc bài viết đã xuất bản trong admin.
- Đã chọn từ danh sách: Đích đến được chọn trực tiếp từ danh sách thả xuống thay vì dán URL.
- Đúng loại liên kết: Loại liên kết được chọn chuẩn xác theo tài nguyên đích.
- Vị trí chuẩn xác: Bố trí hợp lý: giữ từ 7 mục cấp cao nhất trở xuống, thụt lề trong dropdown hoặc footer.
- Đã lưu menu: Đã nhấp Save menu trong trình biên tập Content > Menus của Shopify.
- Cài đặt theme chính xác: Phần Header và Footer trong theme đang trỏ đúng tới menu vừa chỉnh sửa.
- Kiểm tra trên điện thoại: Đã mở store trên smartphone thật để kiểm tra hiển thị và thao tác chạm trong drawer.
- Cập nhật menu ứng dụng: Nếu dùng app vẽ menu, đã thêm cùng mục đó vào trang quản trị của ứng dụng.
FAQ
Tôi có thể thêm một mục menu mới ở đâu trong Shopify?
Trong trang quản trị Shopify, bạn vào Content > Menus, mở menu đang dùng (thường là Main menu), rồi nhấp Add menu item (Shopify Help Center).
Mục menu mới có thể trỏ tới một trang web bên ngoài hoặc email không?
Có. Để trỏ ra ngoài, hãy dán URL đầy đủ vào ô Link, đợi đích đến hiển thị rồi chọn (Shopify Help Center). Với email, nhập mailto:[email protected] vào ô Link.
Tôi có thể lồng một mục mới tối đa bao nhiêu cấp?
Mục cấp cao nhất có tối đa 2 cấp dropdown lồng bên dưới, tạo thành 3 tầng điều hướng (Shopify Help Center). Một số theme cũ không hỗ trợ dropdown từ 3 cấp trở lên (Shopify Help Center).
Tại sao mục menu mới của tôi không hiển thị trên cửa hàng?
Thường do bạn chưa lưu menu, Header/Footer của theme gán nhầm menu khác, hoặc menu do app bên thứ ba quản lý (Shopify Help Center; Fudge.ai). Đồng thời kiểm tra mục con đã thụt lề dưới mục cha chưa (Shopify Help Center).
Tôi có thể thêm một mục mới vào footer có chứa menu thả xuống không?
Không. Menu footer của Shopify chỉ hiển thị các mục cấp cao nhất và không hỗ trợ menu thả xuống lồng cấp (Shopify Help Center).
Mục mới có tự động xuất hiện trên giao diện di động không?
Menu chính vẫn hiện trên mobile nhưng vị trí tùy theme, thông thường sẽ gom vào drawer sau nút hamburger (Shopify Help Center). Nếu dùng app điều hướng, bạn phải thêm mục bên trong app (Shopify Help Center).
Sources
- Shopify Help Center: Add, remove, or edit menu items in your online store
- Shopify Help Center: Set up drop-down menus in your online store
- Shopify Help Center: Understanding navigation
- Nielsen Norman Group: Mobile Navigation: Hamburger or Not?
- Navi+ Documentation: Item Create & Manage
- Navi+ Documentation: Tab Bar & Bottom Navigation
- Navi+ Documentation: Multi-level Structure
- Fudge.ai: How to Add a New Menu Item in Shopify
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.