Hey everyone,
I’m building a public app using the Shopify Remix template. Everything is mostly working fine, but I’ve run into an issue where the app doesn’t show up in the Shopify admin sidebar menu after installation.
Has anyone experienced this? What could be the possible causes for the admin menu not appearing, and how can I fix it?
Some context:
- It’s a public app using the latest Shopify Remix template.
- OAuth and billing flows are working correctly.
- App loads fine if I access it directly via the URL (e.g.
/apps/my-app), but there’s no link to it in the Shopify admin menu.
Any tips or solutions would be much appreciated!
1 Like
Hey @The_Sanjay
By default, apps aren’t pinned to the sidebar. The merchant using your app will need to manually pin it themselves. To pin an app, they need to open the app from their admin first, then click the pin icon to keep it in their list. They can also change its position by clicking and dragging the item, or pin it by dragging it directly to their preferred position in the sidebar after opening it. https://help.shopify.com/en/manual/shopify-admin/shopify-admin-overview?utf8=â#apps-and-channels
@KyleG-Shopify Thank you so much for your answer. However, my question is not about the Shopify admin side pin.
In our app, we have a submenu item created from the app side:
I’m really sorry—I forgot to include the screenshot in my initial question.
Sometimes, this menu doesn’t show up. I suspect it’s because I added Shopify’s debug script for web vital scores. I think that might be causing an issue with App Bridge, which in turn is affecting the menu display!!
Hey @The_Sanjay , thanks for clarifying that the issue is specifically with the submenu.
You mention sometimes it doesn’t show up. In the cases where it doesn’t show up, do you see any errors in the browser console at all?
Can you share a little bit about how you’ve implemented the ui-nav-menu and the debug script? That may help to see if we can replicate on our end.
Hi @KyleG-Shopify Than you so much lot for your guidance.
I’m building a Shopify public app using Remix. When I add the following to my app’s <head> to enable Web Vitals debugging:
Remix app root.jsx
`
`
App nav menu reference
…my Remix app’s nav menu disappears, and I get console errors related to App Bridge. Is this script required, or should I use the npm package only? What’s the best practice for initializing App Bridge in a Remix app without breaking layout?
Thanks!
Hey @The_Sanjay I tried to replicate your issue but couldn’t reproduce the exact error. However, based on my tests, this appears to be related to your navigation menu implementation rather than the Web Vitals debugging script. I noticed in your screenshots you are using NavMenu as opposed to ui-nav-menu that is expected with app bridge (mentioned here: ui-nav-menu).
1 Like
Hey @KyleG-Shopify Thank you so much for your help, and apologies for the delayed response.
We are currently referring to the Shopify Remix app template, which includes a NavMenu component.
Could you please suggest the best way to implement it? I noticed that the debug screen can’t be added to the production app, and it also seems to block click events.
Hey Sanjay!
Thanks for your patience while we looked in to this. We haven’t been able to reproduce this issue with the web vitals debug meta tag. The problem isn’t directly caused by the debug script, but could be related to how it’s interacting with other libraries in your app.
For next steps, try checking your Link imports. They should be coming from either @remix-run/react or @shopify/polaris. You might also want to temporarily disable any third-party libraries to see if that resolves the issue, as they could be interfering with how your navigation menu renders.
Let me know if this helps!
