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.
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
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!!
…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?
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).
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.
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.
Now my app’s sidemenu has disappeared… All of my imports are either @remix-run/react or @shopify/polaris. Removing the vitals scripts fixes the issue. Did you ever get to the bottom of this?
That being said @KyleG-Shopify, I’ve now been waiting over 2 days for the Embedded app checks. I’ve scoured the forums and have tried everything but nothing seems to help. Any ideas?