I’m facing an issue with my Shopify embedded app where action buttons work correctly in the staging environment, but do not work in the live (production) app

App Bridge
1

I’m facing an issue with my Shopify embedded app where action buttons work correctly in the staging environment, but do not work in the live (production) app.

<s-page
  heading={t("NavigationMenu.settings")}
  inlineSize="base"
>
  <s-button
    accessibilityLabel="change plan button"
    slot="secondary-actions"
    onclick={(e) => handleConditionalNavigate(e, "/settings/viewplans")}
  >
    {t("Dashboard.Changeplan")}
  </s-button>

  <s-button
    accessibilityLabel="integration button"
    slot="secondary-actions"
    onclick={(e) => handleConditionalNavigate(e, "/settings/integrations")}
  >
    {t("NavigationMenu.integrations")}
  </s-button>

  <s-query-container>
    <s-stack padding="@container (inline-size < 505px) 'large', 'large none large none'">
      <SettingsComponent
        setNavigateUse={setNavigateUse}
        navigateUse={navigateUse}
      />
    </s-stack>
  </s-query-container>
</s-page>

Issue details

  • Buttons navigate correctly in staging

  • In live app, clicking the buttons does nothing

  • No visible console errors in production

  • Same build and codebase used for both environments

    Has anyone experienced a similar issue where navigation or button actions stop working only in the live Shopify app?
    Could this be related to App Bridge, CSP, routing, or environment configuration differences?

    Any help or guidance would be appreciated.
    Thanks in advance!