How to Add a Menu Built in a Menu App to Your Shopify Store (Theme Embed, Placement & Troubleshooting)

Bạn đã tạo menu điều hướng trong một ứng dụng menu, nhưng menu lại không hiển thị trên storefront. Để thêm menu từ ứng dụng vào Shopify, cần nắm rõ một nguyên tắc cốt lõi: dữ liệu menu nằm trong ứng dụng chứ không nằm trong theme. Menu chỉ xuất hiện sau khi bạn bật app embed của theme, xuất bản (publish) trong ứng dụng và thiết lập vị trí hiển thị.

Quick answer: how to add a menu from a menu app to your Shopify store

Menu ứng dụng nằm trong app chứ không phải trong Shopify Content > Menus, chỉ hiển thị khi được liên kết với theme. Hãy bật app embed, lưu lại, xuất bản menu trong app, chọn vị trí hiển thị, ẩn menu mặc định của theme và kiểm tra storefront thực tế.

Thực hiện theo 5 bước sau:

1. Trong quản trị Shopify, vào Online Store > Themes > Customize, mở Theme settings > App embeds, bật ứng dụng của bạn và nhấn Save.
2. Trong trang quản trị ứng dụng menu, nhấn xuất bản để phát hành menu.
3. Chọn vị trí hiển thị: floating overlay, bộ chọn CSS selector (insert/replace), hoặc app block.
4. Ẩn hoặc hủy gán menu header mặc định của theme để tránh bị trùng lặp navigation.
5. Xem trước giao diện desktop và mobile, sau đó kiểm tra storefront thực tế trong cửa sổ ẩn danh.

Nếu bạn chưa thiết lập cấu trúc navigation, hãy bắt đầu với bài hướng dẫn cho người mới bắt đầu về ứng dụng tạo menu.

Why a menu built in an app doesn’t appear on its own

Trong Shopify, bạn quản lý liên kết từ Content > Menus, và theme sẽ tự động hiển thị chúng qua cài đặt phần Header.

Các ứng dụng menu giữ menu của bạn bên trong ứng dụng. Theo tài liệu lập trình viên của Shopify, các khối app embed bị vô hiệu hóa theo mặc định sau khi cài đặt, và theme không tự động đưa app block vào giao diện. Việc cài đặt ứng dụng không thể tự đưa menu lên storefront. Các menu của bạn trong Content > Menus vẫn nằm nguyên ở đó.

Trình chỉnh sửa có sẵn của Shopify cho phép mỗi mục cấp cao nhất có tối đa hai cấp menu thả xuống dạng lồng nhau. Để có bố cục vượt ngoài tính năng có sẵn, các nhà bán lẻ tự xây dựng menu trong một ứng dụng menu điều hướng.

Video chính thức này từ Shopify minh họa trình chỉnh sửa menu có sẵn, vốn hoàn toàn tách biệt với ứng dụng menu của bạn.

Step 1: Turn on the app embed in the theme editor

Bước đầu tiên là kích hoạt app embed của theme. Theo Shopify, app embed là các thành phần do ứng dụng cung cấp, hiển thị dạng nổi hoặc lớp phủ (overlay) trong theme của bạn.

Để kích hoạt app embed:

1. Trong trang quản trị Shopify, vào Online Store > Themes.
2. Nhấn Customize trên theme bạn muốn chỉnh sửa.
3. Ở thanh bên cạnh, mở Theme settings > App embeds.
4. Tìm ứng dụng menu của bạn trong danh sách.
5. Bên cạnh app embed, nhấn nút bật để kích hoạt.
6. Nhấn Save.

Trước khi chỉnh sửa, hãy nhân bản theme. Trung tâm trợ giúp Shopify ghi nhận rằng việc nhân bản theme cho phép bạn hủy bỏ thay đổi nếu cần, và Helium cũng khuyên bạn nên nhân bản theme đang kích hoạt trước.

App embed hoạt động trên cả theme cổ điển (vintage) và Online Store 2.0. Kích hoạt embed chỉ áp dụng cho theme đang sửa; theme bản nháp sẽ không cập nhật ra ngoài cửa hàng thực tế cho tới khi được xuất bản.

Step 2: Publish the menu inside the app

Việc lưu app embed trong theme chỉ tải mã script; bạn vẫn cần phải phát hành menu trong trang quản trị ứng dụng.

Các ứng dụng menu tách biệt việc bật embed với thao tác xuất bản. Ví dụ, tài liệu Navi+ nhấn mạnh rằng sau khi bật embed Store Connector, “quy trình vẫn chưa hoàn tất”. Bạn phải mở ứng dụng và nhấn Publish to website (hoặc nút xuất bản của app).

Trước khi xuất bản, hãy kiểm tra các quy tắc hiển thị mà ứng dụng của bạn cung cấp (ví dụ trong Navi+):

• Device targeting: Chọn hiển thị trên mobile, desktop, hay cả hai loại màn hình.
• Page group rules: Hiển thị menu trên mọi trang hoặc chỉ trên một số nhóm trang cụ thể.
• URL keyword filtering: Khớp hoặc loại trừ các từ khóa nhất định trên thanh địa chỉ.

Nếu một quy tắc loại trừ trang nào đó, menu sẽ không xuất hiện tại trang đó dù app embed đang bật.

Step 3: Choose where the menu appears (embed, CSS selector or app block)

Concept illustration: inserting an app menu below the header versus replacing the theme menu with a CSS selector.

Sau khi embed đã bật và menu đã xuất bản, hãy chọn phương thức liên kết menu với bố cục theme.

Floating menus (tab bar, floating button, drawer)

App embed hiển thị dạng nổi hoặc lớp phủ trong theme. Đối với tab bar trên mobile, nút nổi hoặc thanh menu trượt drawer, bạn chỉ cần bật embed và xuất bản trong app. Vì các phần tử nổi phủ lên trang, bạn không cần chọn phần tử neo trong header.

Insert before, insert after or replace

Đối với header desktop hoặc mega menu, ứng dụng gắn vào theme bằng bộ chọn CSS selector xác định phần tử theme.

Một số ứng dụng, như Navi+, cung cấp ba chế độ:

• Insert Before: Đặt menu ngay phía trên phần tử được chọn.
• Insert After: Hiển thị menu ngay bên dưới phần tử được chọn.
• Replace: Thay thế hoàn toàn phần tử được chọn bằng menu của ứng dụng.

Navi+ cho phép gắn thêm hậu tố suffix để bộ chọn nhắm riêng mục tiêu mobile, desktop hoặc cả hai.

App block inside a theme section

Phương thức thứ ba là thêm app block vào một section trong theme. App block đòi hỏi theme tương thích, và tài liệu Shopify nêu rõ app block áp dụng cho các section thuộc template JSON. Trong Navi+, khối “Menu in Section” chỉ hỗ trợ Mega Menu và Grid Menu, không dùng cho Tab Bar hay Floating Button.

Step 4: Hide the theme’s default menu so you don’t see two

Thêm menu từ ứng dụng có thể tạo ra tình trạng trùng lặp hai thanh điều hướng nếu liên kết gốc của theme vẫn hiển thị. Do việc cài đặt ứng dụng không tự ẩn mã theme, bạn cần ẩn hoặc thay thế menu gốc.

Bạn có thể xử lý việc trùng lặp menu theo hai cách:

1. Use Replace mode: Khi được hỗ trợ, chế độ Replace sẽ tự động hoán đổi phần tử theme đã chọn.
2. Change theme settings: Trong trình chỉnh sửa theme, mở mục Header. Shopify lưu ý bạn có thể đổi menu chính mặc định ở hầu hết các theme bằng cách sửa cài đặt trong Header section, do đó hãy hủy gán menu tại đây.

Tuyệt đối không xóa liên kết trong Content > Menus; việc giữ lại giúp bảo toàn menu footer và làm phương án dự phòng.

Khi sử dụng chế độ Replace, có thể xuất hiện hiện tượng nhấp nháy ngắn của menu cũ trong lúc mã script khởi tạo. Trên mobile, hãy ẩn nút hamburger của theme nếu ứng dụng đã có drawer riêng.

Step 5: Preview on desktop and mobile, then check the live store

Chỉ xem trước bên trong trình tùy biến theme của Shopify là chưa đủ. Tài liệu từ các nhà phát triển như Helium chỉ ra rằng menu không phải lúc nào cũng tải chính xác trong trình tùy biến, đòi hỏi phải kiểm tra trực tiếp ngoài storefront.

Để kiểm tra menu của bạn:

1. Mở liên kết cửa hàng trong cửa sổ ẩn danh riêng tư để xem trang đúng như khách mua hàng nhìn thấy.
2. Kiểm tra trên màn hình desktop, xem menu thả xuống, bảng mega menu và hiệu ứng rê chuột.
3. Kiểm tra trên điện thoại thông minh, rà soát vùng chạm, drawer di động và khoảng trống tab bar bên dưới.
4. Nhấn thử các liên kết điều hướng để đảm bảo chuyển đúng đến danh mục và sản phẩm.

Nếu bạn đã cấu hình các menu riêng cho desktop và mobile, hãy đảm bảo mỗi kích thước màn hình chỉ kích hoạt menu tương ứng. Nếu kiểm tra trên theme nhân bản, hãy xuất bản theme đó sau khi đã xác nhận hoàn tất.

App menu not showing? A diagnostic checklist

Concept illustration: a menu that is not showing (app embed off, wrong theme, two menus) versus one correct app menu live on the store.

Khi menu từ ứng dụng không hiển thị, hãy tra cứu bảng chẩn đoán sau:

Nếu menu vẫn không tải được, hãy liên hệ với bộ phận hỗ trợ của ứng dụng menu để kiểm tra sâu các vấn đề hiển thị đặc thù của app.

When you change or update your theme

Khi đổi theme hoặc nâng cấp phiên bản mới, menu ứng dụng sẽ không tự động chuyển sang. Như đã nêu trong hướng dẫn của Shopify Help Center về ứng dụng theme, các ứng dụng không tự động kích hoạt trên theme mới, đòi hỏi bạn phải kích hoạt lại.

Thực hiện theo trình tự này khi thay đổi hoặc nâng cấp theme:

1. Re-enable app embed: Trong trình chỉnh sửa theme mới, mở App embeds, bật ứng dụng menu và nhấn Save.
2. Re-add app blocks: Thêm lại các khối section block, vì theme mới không tự động bao gồm app block.
3. Audit CSS selectors: Tên class header có sự khác biệt giữa các theme; hãy cập nhật bộ chọn, hoặc xem menu Navi+ trên các theme Shopify phổ biến.
4. Hide default menu: Trong cài đặt Header, hủy gán menu mặc định để tránh hiển thị hai navigation.
5. Test on duplicate theme: Tinh chỉnh trên một theme nhân bản trước khi xuất bản ra trang chính thức.

Trade-offs: when the theme’s own menu is enough

Ứng dụng menu bên thứ ba mang lại tính linh hoạt cao về mặt thị giác, nhưng không phải mọi cửa hàng đều cần đến chúng. Nếu danh mục sản phẩm của bạn đơn giản, trình chỉnh sửa có sẵn của Shopify trong Content > Menus thường là lựa chọn thực tế nhất. Menu mặc định hỗ trợ tối đa hai cấp drop-down lồng nhau, có thể đủ dùng cho một danh mục tinh gọn. Menu mặc định cũng không phụ thuộc vào app embed, giúp bạn không phải bật lại mỗi khi cập nhật theme.

Việc sử dụng ứng dụng menu bên thứ ba đi kèm một số lưu ý cụ thể:

• Maintenance: Đổi theme đòi hỏi phải kích hoạt lại app embed và kiểm tra lại bộ chọn CSS selector.
• Initial page load: Chế độ thay thế bằng CSS selector đôi khi có thể tạo ra một thoáng nhấp nháy menu cũ trong lúc script đang khởi chạy.
• Platform limits: Các môi trường như Shopify Canvas hiện chưa hỗ trợ tiện ích mở rộng theme app extension.

Tham khảo cẩm nang của chúng tôi để chọn loại menu phù hợp nhằm quyết định xem cửa hàng của bạn cần bố cục từ ứng dụng hay chỉ cần navigation mặc định.

Example: putting a Navi+ menu live

Để hình dung rõ các bước thực tế, hãy xem cách xuất bản menu trong Navi+. Navi+ hỗ trợ Tab Bar di động, Mobile Menu dạng trượt, Floating Button và Mega Menu cho Desktop thông qua chuẩn theme app extension của Shopify.

Đối với Tab Bar, Mobile Menu, hoặc Floating Button trên di động:

1. Trong quản trị Shopify, mở Online Store > Themes > Customize.
2. Ở thanh bên cạnh, mở App embeds, bật Store Connector, và nhấn Save.
3. Trong Navi+, mở menu của bạn và nhấn Publish to website.
4. Cấu hình quy tắc hiển thị theo thiết bị, nhóm trang hoặc từ khóa URL.

Đối với Desktop Mega Menu:

1. Trong Navi+, chọn Insert Before, Insert After, hoặc Replace.
2. Nhập bộ chọn CSS selector của header, kèm hậu tố suffix mobile hoặc desktop nếu cần.
3. Trên các theme Online Store 2.0 có template JSON, bạn cũng có thể sử dụng app block Menu in Section (áp dụng cho Mega Menu và Grid Menu).

Nếu cửa hàng đang có lượt truy cập, hãy thử nghiệm trên một theme nhân bản trước để xác minh bố cục một cách an toàn.

Tài liệu xuất bản của Navi+ cho từng loại menu cung cấp đầy đủ các bước kèm ảnh chụp màn hình minh họa. Khám phá tài liệu xuất bản Tab Bar của Navi+ hoặc hướng dẫn xuất bản Mega Menu của Navi+ để tự tin đưa bố cục menu lên website của bạn.

Action checklist

Sử dụng bảng kiểm nhanh này để đảm bảo menu ứng dụng hoạt động trơn tru:

• Duplicate your active theme for safe testing.
• In Theme settings > App embeds, toggle your app on and click Save.
• Return to your menu app dashboard and click publish.
• Verify device targeting and page group rules.
• Select placement: floating overlay, CSS selector (insert/replace), or app block.
• Hide or unassign the default menu in Header settings.
• Preview navigation across desktop and mobile screens.
• Test your live storefront in an incognito window.
• Click category and product links to verify destinations.
• Document CSS selectors to re-apply after theme updates.

FAQ

Do I need to enable an app embed?

Có, trong hầu hết trường hợp. Shopify quy định các khối app embed bị vô hiệu hóa mặc định sau khi cài ứng dụng, nên bạn phải kích hoạt trong Theme Settings > App embeds và nhấn Save.

Why is my app menu not showing after I created it?

Lý do phổ biến nhất là app embed chưa được bật và lưu trên theme chính, hoặc menu chưa được xuất bản trong trang quản trị ứng dụng; hãy kiểm tra bảng chẩn đoán để xác minh quy tắc hiển thị và bộ chọn.

Does a menu app delete my Shopify navigation menu?

Không. Các liên kết mặc định của bạn vẫn nguyên vẹn trong Content > Menus trong quản trị Shopify, và phần Header của theme chỉ đóng vai trò chọn danh sách menu nào để hiển thị.

Will my app menu still work if I change themes?

Bạn cần bật lại app embed trên theme mới vì ứng dụng không tự động kích hoạt trên theme mới xuất bản, đồng thời có thể cần cập nhật lại bộ chọn CSS nếu theme mới có cấu trúc header khác biệt.

Can I use a menu app on a vintage theme?

Có, app embed được hỗ trợ trên cả theme cổ điển vintage và Online Store 2.0, tuy nhiên app block chỉ có thể dùng trên các theme tương thích có template JSON.

Why can’t I find the app embed in my theme?

Nếu theme của bạn được tạo hoặc nhân bản trong Shopify Canvas, các tiện ích mở rộng theme app extension—bao gồm app embed và app block—hiện chưa được hỗ trợ.

Sources

• Shopify Help Center: Apps and theme architecture
• Shopify Developer Documentation: Theme app extension configuration
• Shopify Help Center: Menus and links
• Shopify Help Center: Drop-down menus
• Shopify Help Center: Duplicating themes
• Shopify Developer Documentation: App blocks
• Shopify Developer Community: Meet Canvas and theme app extensions
• Shopify Community: Qikify Mega Menu for Prestige theme thread
• Helium Dev Help Center: Installing Meteor on your storefront
• Navi+ Help Center: Tab Bar publishing on Shopify
• Navi+ Help Center: Mega Menu desktop publishing on Shopify
• Navi+ Help Center: Why does Navi+ not display FAQ