Vì sao thay đổi menu Shopify không hiển thị trên storefront (và cách xử lý)

Bạn vừa bấm Save menu trong admin Shopify, mở storefront lên kiểm tra và thấy các đường link cũ vẫn nằm nguyên ở đó. Bạn tải lại tab trình duyệt nhưng không có gì thay đổi.

Khi thay đổi menu đã lưu nhưng không hiển thị trên storefront, hầu như không bao giờ là do Shopify phớt lờ bạn. Hệ thống điều hướng cửa hàng hoạt động qua năm tầng tách biệt: bộ nhớ đệm trình duyệt, theme đang được publish, danh sách menu gán trong header, ứng dụng vẽ menu hoặc xung đột theme. Rà soát từng tầng theo thứ tự sẽ giúp bạn tìm ra nguyên nhân chỉ trong vài phút.

Quick answer: why your menu changes don’t show

Hầu hết các trường hợp, thay đổi đã được lưu nhưng bạn đang xem trang lưu trong cache, tùy biến nhầm theme nháp chưa publish, hoặc header của theme đang trỏ sang menu khác. Nếu menu do ứng dụng vẽ, bạn phải chỉnh sửa trực tiếp trong ứng dụng đó chứ không phải ở Content > Menus.

Đối chiếu triệu chứng trên màn hình của bạn với bảng chẩn đoán sau:

Native Shopify menu vs a menu drawn by an app

Trước khi tìm cách khắc phục, bạn cần xác định menu hiển thị trên trang thuộc hệ thống nào. Cửa hàng Shopify hiển thị điều hướng qua hai cơ chế hoàn toàn khác nhau.

Menu native của Shopify được quản lý tại Content > Menus trong admin. Template Liquid của theme sẽ đọc danh sách này và quyết định cách hiển thị. Menu chính (main menu) thường xuất hiện trên mọi trang của cửa hàng, nhưng bố cục, dạng dropdown hay giao diện mobile phụ thuộc vào từng theme cụ thể.

Menu do app vẽ được kết xuất bởi ứng dụng bên ngoài tích hợp vào theme, ví dụ như thanh tab bar cố định đáy màn hình, drawer trượt tùy biến trên mobile, hay mega menu nhiều cột. Các ứng dụng này lấy dữ liệu trực tiếp từ bảng điều khiển của app. Việc sửa thiết lập Navigation mặc định của Shopify sẽ không làm thay đổi nội dung menu của ứng dụng.

Nếu cửa hàng của bạn sử dụng header mặc định trên desktop kết hợp với drawer của ứng dụng trên di động, bạn đang vận hành separate desktop and mobile menus. Việc sửa menu desktop trong admin sẽ không tác động đến menu trên điện thoại.

Start here: hard refresh, private window, another device

Hãy loại trừ máy tính của bạn trong hai phút đầu tiên. Bộ nhớ đệm trình duyệt (browser cache) là bản sao lưu của trang web trên máy bạn để tải nhanh hơn ở lần truy cập sau. Khi bạn sửa menu, trình duyệt có thể vẫn tiếp tục hiển thị bản sao cũ này.

Trước hết, thực hiện thao tác xóa cache nhanh bằng tổ hợp phím hard refresh:

• Windows / Chrome / Edge: Nhấn Ctrl + Shift + R hoặc Ctrl + F5.
• Mac / Safari / Chrome: Nhấn Cmd + Shift + R.

Nếu storefront vẫn hiện menu cũ, hãy mở một cửa sổ ẩn danh (incognito / private window) và truy cập store. Cửa sổ ẩn danh hoạt động độc lập, không tải dữ liệu đệm hay cookie cũ.

Tiếp theo, mở cửa hàng trên một thiết bị thứ hai, chẳng hạn điện thoại dùng dữ liệu di động (4G/5G) hoặc ứng dụng Shopify. Thiết bị thứ hai giúp loại trừ lỗi chỉ nằm ở máy tính của bạn.

Theo tài liệu hướng dẫn troubleshooting theme chính thức của Shopify, việc thử cửa sổ ẩn danh, thiết bị khác hoặc ứng dụng di động sẽ giúp cô lập ngay các lỗi cục bộ. Nếu bản mới xuất hiện trên cửa sổ ẩn danh hoặc điện thoại, menu của bạn đã cập nhật thành công trên Shopify; bạn chỉ cần xóa cache và cookies trên trình duyệt máy tính.

Nếu tất cả thiết bị và cửa sổ ẩn danh vẫn hiện menu cũ, hãy dừng việc xóa cache và chuyển sang kiểm tra tầng tiếp theo.

Are you editing the live theme?

Khi cửa sổ ẩn danh vẫn hiển thị menu cũ, nguyên nhân phổ biến nhất là bạn đang tùy biến một theme nháp thay vì theme đang hoạt động.

Hình 1: Minh hoạ khái niệm (Concept illustration) — Are you editing the live theme?

Preview vs published theme

Shopify cho phép lưu trữ nhiều theme trong thư viện, nhưng theo tài liệu của Shopify về publishing themes, chỉ theme đã publish mới là theme khách hàng nhìn thấy khi truy cập, và tại một thời điểm chỉ có duy nhất một theme được publish.

Nếu bạn bấm Customize trên một theme trong Theme library, bạn chỉ đang chỉnh sửa bản nháp. Trình xem trước (preview) trong admin sẽ hiện menu mới vì nó đọc dữ liệu từ theme nháp đó. Nhưng địa chỉ storefront thực tế của bạn vẫn phục vụ theme đang publish.

Để xác nhận theme đang hoạt động:

1. Vào Online Store > Themes.
2. Quan sát khung trên cùng có nhãn Current theme.
3. Bấm Customize trên đúng khung này, không bấm vào các theme ở danh sách bên dưới.

App embeds after switching themes

Nếu bạn vừa xuất bản một theme mới hoặc nâng cấp phiên bản theme, ứng dụng điều hướng có thể ngưng hoạt động.

Nhiều ứng dụng điều hướng vẽ menu thông qua app embed. Theo tài liệu của Shopify về cấu trúc theme và app embed, app embed có thể được bật, tắt và tùy chỉnh trong trình chỉnh sửa theme. Tuy nhiên, app embed gắn với từng theme riêng. Khi đổi theme, bạn phải bật lại các ứng dụng đó trên theme mới.

Nếu thanh tab bar hoặc drawer di động biến mất sau khi đổi theme, hãy mở theme editor của theme đang live, nhấp vào biểu tượng App embeds ở thanh công cụ bên trái và gạt công tắc bật ứng dụng menu lên.

Is the right menu selected in the Header?

Bạn có thể đã lưu chỉnh sửa vào một danh sách menu trong admin, nhưng header của theme live lại đang trỏ vào một danh sách khác.

Trong Content > Menus, một cửa hàng có thể có nhiều menu, ví dụ “Main menu” và “Footer menu”. Sửa “Main menu” trong trang quản trị sẽ không thay đổi cửa hàng nếu header của theme đang trỏ tới một menu khác.

Để kiểm tra gán menu trong Header:

1. Vào Online Store > Themes và chọn Customize trên Current theme.
2. Ở danh sách cây bên trái, nhấp vào phần Header.
3. Ở khung cài đặt bên phải, tìm mục Menu.
4. Nếu đang chọn menu khác, hãy chọn menu bạn vừa sửa và bấm Save.

Desktop header vs mobile drawer

Do menu hiển thị khác nhau tùy theo từng theme, các nhà phát triển theme xây dựng giao diện responsive theo nhiều cách. Một số theme dùng chung một danh sách menu cho cả desktop và mobile, trong khi các theme khác cung cấp cài đặt riêng cho thanh điều hướng desktop và drawer trên điện thoại.

Nếu menu đã đổi trên máy tính nhưng trên điện thoại vẫn hiện bản cũ, hãy kiểm tra cài đặt Header xem có trường Mobile menu hoặc Drawer menu riêng biệt không. Hãy gán đúng danh sách tại đó, hoặc xem thêm hướng dẫn make the menu open on mobile nếu drawer không thể mở ra.

Check each menu item’s link

Nếu một mục menu không hoạt động trên cửa hàng, hãy kiểm tra liên kết của nó. Mục trỏ tới sản phẩm, bộ sưu tập hoặc trang đã bị xóa hay chuyển về bản nháp có thể đưa khách tới một trang không tồn tại. Hãy kiểm tra liên kết trong trang quản trị hoặc đọc cách fix broken links in a navigation menu để chắc chắn mỗi đích đến đều hợp lệ.

Did the edit actually save?

Hệ thống menu của Shopify yêu cầu quy trình lưu hai bước:

1. Trong admin Shopify, vào Content > Menus (nơi xem và thay đổi menu cửa hàng trực tuyến).
2. Nhấp vào tiêu đề menu để mở danh sách mục.
3. Khi chỉnh sửa hoặc thêm một mục trong bảng trượt, bạn phải bấm Apply changes.
4. Sau đó, bạn bắt buộc phải bấm nút Save hoặc Save menu ở góc trên bên phải trang.

Nếu bạn đóng tab hoặc rời khỏi trang sau khi bấm “Apply changes” mà chưa bấm “Save menu”, các thay đổi sẽ không được lưu.

Hãy tải lại trang admin khi đang ở Content > Menus. Nếu các mục mới vẫn nằm trong danh sách, dữ liệu đã được lưu thành công vào cơ sở dữ liệu của Shopify. Nếu mục biến mất, hãy theo dõi video hướng dẫn chính thức dưới đây và xem thêm bài viết set up menu links in your Shopify store:

Server and CDN cache: how long should you wait?

Shopify không công bố một con số chính thức về thời gian làm mới cache của CDN hay máy chủ. Các bài viết từ các blog bên thứ ba đưa ra nhiều ước tính mâu thuẫn, từ vài phút cho tới vài giờ. Vì đây chỉ là phán đoán của các bên thứ ba chứ không phải quy chuẩn của Shopify, bạn không nên dựa vào đó làm thước đo.

Nếu cửa sổ riêng tư và thiết bị thứ hai vẫn hiện menu cũ sau khi bạn đã kiểm tra theme đang chạy và cài đặt header, hãy chuyển sang lớp ứng dụng bên dưới thay vì chờ đợi.

Đôi khi bạn sẽ thấy mẹo truyền miệng trên diễn đàn khuyên đổi handle menu rồi đổi lại, hoặc thêm comment mốc thời gian vào file theme.liquid. Đây là những mẹo chưa được kiểm chứng và tiềm ẩn rủi ro hỏng cấu trúc theme live. Thay vì can thiệp mã nguồn, hãy chuyển sang kiểm tra menu ứng dụng.

When an app draws the menu (tab bar, drawer, mega menu)

Nếu toàn bộ thiết lập mặc định của Shopify đều chính xác mà menu storefront vẫn không đổi, rất có thể cửa hàng đang sử dụng menu do ứng dụng bên ngoài vẽ.

Hình 2: Minh hoạ khái niệm (Concept illustration) — When an app draws the menu (tab bar, drawer, mega menu)

Điều hướng do ứng dụng vẽ, chẳng hạn thanh tab dưới cùng, ngăn kéo trượt và mega menu, thường được vẽ bằng script riêng của ứng dụng. Tài liệu của Helium cho ứng dụng menu Meteor nêu rằng thay đổi trong phần Navigation của Shopify sẽ không được phản ánh trong ứng dụng và menu phải được sửa ngay trong ứng dụng. Hãy xem tài liệu của ứng dụng bạn dùng, vì ứng dụng khác có thể hoạt động khác.

Khi quản lý menu do ứng dụng vẽ, hãy ghi nhớ ba nguyên tắc:

• Chỉnh sửa trực tiếp trong ứng dụng: Thêm, sửa, đổi tên mục menu bên trong giao diện dashboard của chính app đó.
• Duy trì app embed bật trên theme live: Menu ứng dụng không thể hiển thị nếu công tắc embed bị tắt trong theme editor của theme đang kích hoạt.
• Nút đồng bộ thủ công: Nếu app nhúng hoặc sao chép menu có sẵn của Shopify, nó có thể không tự động cập nhật liên tục. Ví dụ, Navi+ Mobile Menu cho phép tích hợp menu Shopify nhưng bản sao này chỉ cập nhật khi bạn bấm nút Sync now trong app. Các chỉnh sửa tại Content > Menus sẽ không hiển thị trên app drawer cho tới khi bạn thực hiện đồng bộ này.

Isolate the cause: disable the app, test a free theme

Khi không rõ sự cố xuất phát từ mã nguồn theme hay xung đột ứng dụng, quy trình cô lập nguyên nhân trên theme nhân bản sẽ mang lại câu trả lời chính xác:

1. Nhân bản theme: Trong Online Store > Themes, nhấp vào dấu ... cạnh Current theme và chọn Duplicate.
2. Tắt app embed: Mở theme editor trên bản duplicate, vào App embeds, tắt ứng dụng menu và xem trước (Preview). Nếu menu native hiển thị đúng các thay đổi mới, độ trễ bắt nguồn từ cấu hình ứng dụng. Shopify cũng lưu ý rằng bạn có thể tạm gỡ cài đặt app để kiểm tra xem app có can thiệp vào storefront hay không.
3. Xem thử một theme miễn phí sạch: Nếu bản sao theme vẫn lỗi khi đã tắt ứng dụng, hãy thêm một theme miễn phí của Shopify vào thư viện và bấm Preview. Nếu menu hiển thị đúng ở đó, nhiều khả năng nguyên nhân nằm ở theme chính của bạn chứ không phải ở Shopify.

Trade-offs and when not to use these fixes

Quá trình gỡ lỗi điều hướng đòi hỏi sự cẩn trọng đối với các tác động phụ:

• Xóa cache và cookie trình duyệt: Xóa cookie có thể khiến bạn bị đăng xuất khỏi các trang đang dùng. Hãy thử trong cửa sổ riêng tư trước để tránh đăng xuất không cần thiết.
• Tạm gỡ cài đặt ứng dụng: Mặc dù Shopify đề xuất gỡ app tạm thời như một bước thử nghiệm, thao tác này có thể làm mất cấu hình, mã màu tùy biến hoặc dữ liệu liên kết tùy thuộc vào kiến trúc của app. Hãy ưu tiên tắt app embed trên theme duplicate.
• Không chỉnh sửa mã trên theme live: Tuyệt đối không thêm đoạn mã Liquid tùy tiện vào theme.liquid chỉ để “ép xóa cache”. Một lỗi cú pháp nhỏ có thể làm sập toàn bộ giao diện cửa hàng.
• Không publish theme thử nghiệm: Khi kiểm tra bằng theme miễn phí, luôn sử dụng tính năng Preview trong thư viện theme. Không publish theme chưa cấu hình lên storefront đang bán hàng.

Where Navi+ fits

Nếu việc giữ menu gốc, menu của ứng dụng và cài đặt theme đồng bộ với nhau là việc lặp đi lặp lại, Navi+ là một lựa chọn để quản lý điều hướng cửa hàng.

Navi+ vẽ Tab Bar, Mobile Menu (ngăn kéo) và Desktop Mega Menu thông qua app embed của theme. Bạn sửa nhãn, biểu tượng, huy hiệu và liên kết trong ứng dụng Navi+, rồi script phía cửa hàng của ứng dụng vẽ menu đã lưu trong trình duyệt. Sau khi lưu, hãy kiểm tra kết quả trong cửa sổ riêng tư.

Nếu muốn tiếp tục dùng điều hướng gốc của Shopify, Navi+ Mobile Menu có thể nhúng menu Shopify hiện có của bạn. Bản sao này chỉ được làm mới khi bạn bấm Sync now trong ứng dụng, nên bạn quyết định khi nào cập nhật có hiệu lực; chỉnh sửa trong Content > Menus sẽ không tự chuyển sang cho đến lúc đó. Để hiểu rộng hơn, xem Shopify menu guide.

Nếu bạn muốn quản lý tab bar, ngăn kéo và mega menu ở một nơi, Navi+ cho phép bạn chỉnh sửa chúng trong ứng dụng và giữ menu Shopify hiện có bằng Sync now. Bạn có thể thử trước trên một bản sao theme.

Action checklist

Thực hiện tám bước kiểm tra sau để xử lý dứt điểm tình trạng menu không cập nhật:

• Kiểm tra ở cửa sổ ẩn danh: Xác định xem menu cũ có phải chỉ tồn tại trong cache trình duyệt máy bạn hay không.
• Thử nghiệm trên thiết bị khác: Mở cửa hàng trên điện thoại kết nối mạng di động 4G/5G thay vì Wi-Fi nội bộ.
• Kiểm tra theme đang publish: Đảm bảo bạn bấm Customize đúng vào khung Current theme trong Online Store > Themes.
• Kiểm tra menu được gán trong Header: Xác nhận phần Header của theme live trỏ đúng danh sách bạn vừa chỉnh sửa.
• Xác nhận thao tác lưu: Vào Content > Menus để kiểm tra bạn đã bấm cả Apply changes và Save menu.
• Kiểm tra link đích: Đảm bảo các mục menu mới trỏ vào trang, sản phẩm hoặc danh mục đang hoạt động và không bị ẩn.
• Kiểm tra app embed trên theme live: Xác nhận app embed của ứng dụng menu đang được bật trong theme editor đang kích hoạt.
• Chỉnh sửa hoặc đồng bộ trong app: Nếu dùng menu của ứng dụng, hãy cập nhật trong app hoặc bấm Sync now.

When to contact support and what to send

Nếu menu vẫn kẹt sau khi làm hết danh sách kiểm tra, hãy liên hệ hỗ trợ. Hướng dẫn xử lý sự cố theme của Shopify xếp việc liên hệ hỗ trợ ở bước cuối, sau các kiểm tra chung, nên bạn có thể mô tả những gì đã loại trừ.

Chuẩn bị sẵn các thông tin sau trong yêu cầu hỗ trợ đầu tiên:

• Tên theme đang publish: Tên chính xác hiển thị tại khung Current theme trong admin.
• Tên danh sách menu đã sửa: Tên danh sách tại Content > Menus và tên các liên kết chưa xuất hiện.
• Ảnh chụp màn hình từ cửa sổ ẩn danh: Ảnh chụp cấu hình admin đối chiếu cùng ảnh chụp storefront mở trên cửa sổ ẩn danh.
• Thiết bị và trình duyệt: Hệ điều hành và phiên bản trình duyệt bạn đang sử dụng.
• Ứng dụng điều hướng đang dùng: Tên các ứng dụng menu, tab bar hoặc mega menu cài trên store.
• Kết quả khi cô lập lỗi: Tình trạng hiển thị khi bạn tắt app embed trên theme duplicate hoặc xem trước theme miễn phí.

Nếu lỗi chỉ xuất phát từ menu do ứng dụng vẽ, hãy gửi yêu cầu trực tiếp cho nhà phát triển ứng dụng đó qua Shopify App Store.

FAQ

Do I need to clear my cache to see menu changes?

Hãy thử mở cửa sổ ẩn danh hoặc kiểm tra trên thiết bị khác trước. Shopify gợi ý xóa cache và cookies trình duyệt khi sự cố chỉ xuất hiện cục bộ trên máy tính của bạn.

How long does it take for menu changes to appear?

Shopify không công bố khung thời gian chính thức cho việc phân phối cache. Nếu thay đổi không xuất hiện trên cửa sổ ẩn danh và điện thoại sau khi đã kiểm tra theme live và cài đặt Header, bạn nên kiểm tra cấu hình theme và ứng dụng thay vì tiếp tục chờ đợi.

Why did my menu change in the preview but not on the live store?

Bạn có thể đang chỉnh sửa một theme nháp trong thư viện thay vì theme đang hoạt động. Khách hàng chỉ nhìn thấy theme đã publish, và Shopify chỉ cho phép xuất bản một theme duy nhất tại một thời điểm.

I edited Content > Menus but my app’s menu didn’t change. Why?

Menu do ứng dụng vẽ lấy dữ liệu trực tiếp trong ứng dụng. Việc thay đổi cài đặt Navigation mặc định của Shopify không làm thay đổi menu của app. Trong Navi+, menu Shopify nhúng chỉ cập nhật bản sao khi bạn bấm nút Sync now.

My menu disappeared after I switched themes.

App embed không tự động kích hoạt trên một theme mới xuất bản. Bạn cần mở theme editor của theme mới, vào mục App embeds và bật lại ứng dụng menu.

Sources

• Shopify Help Center: Add, remove, or edit menu items in your online store — hướng dẫn chính thức về xem, sửa menu trong Content > Menus và lưu thay đổi.
• Shopify Help Center: Understanding navigation — tài liệu về cách theme hiển thị menu và phạm vi xuất hiện của main menu.
• Shopify Help Center: Publishing themes — quy định về hiển thị theme đã publish và giới hạn theme hoạt động.
• Shopify Help Center: Troubleshooting your online store theme — nguyên tắc gỡ lỗi chung, xử lý cache trình duyệt, gỡ app thử nghiệm và kiểm tra bằng theme miễn phí.
• Shopify Help Center: App embeds and theme structure — hướng dẫn bật, tắt và kích hoạt lại app embed khi đổi theme.
• Helium Help Center: Common issues & fixes — tài liệu giải thích vì sao sửa Navigation mặc định không đổi menu của app và hiện tượng tải script.
• Shop Theme Detector: How to delete your cache on Shopify — phân tích bên thứ ba về sự chênh lệch lớn trong các ước tính thời gian xóa cache máy chủ.