Modal in Shopify App renders buttons weirdly

Polaris
1

I have Shopify App Home (iframe) app with simple modal like this.

          <s-modal
            ref={resetModalRef}
            id="reset-data-modal"
            heading={t('settings.resetData.heading')}
            accessibilityLabel={t('settings.resetData.heading')}
          >
            <s-text>
              {t('settings.resetData.confirm')}
            </s-text>
            <s-button
              slot="primary-action"
              variant="primary"
              tone="critical"
              onClick={handleReset}
            >
              {t('settings.resetData.confirmCta')}
            </s-button>
            <s-button
              slot="secondary-actions"
              commandFor="reset-data-modal"
              command="--hide"
            >
              {t('settings.resetData.cancel')}
            </s-button>
          </s-modal>

It renders correctly in browser:

image
image725Ă—203 18.7 KB

But in Shopify app, it looks like this:

image
image1206Ă—2622 109 KB

Is there a way to display buttons as in browser or at least replace plus button with something else? There is “+” button even though I tried to specify delete/undo button here.

2

Hey @Bedrich_Schindler

Thanks for sharing the screenshots and snippet here. I took a look, and the markup you’re using for s-modal looks generally correct for the primary-action and secondary-actions slots from what I can see here.

I don’t think there’s currently a way to force the desktop footer-button layout inside that mobile app modal view or override the generated header action icon, but one small adjustment I’d make is setting the cancel button explicitly as secondary:

<s-button
  slot="secondary-actions"
  variant="secondary"
  commandFor="reset-data-modal"
  command="--hide"
>
  {t('settings.resetData.cancel')}
</s-button>

That said, I’d still expect the app to control the mobile modal presentation, so I’ll flag this behaviour on our end, and loop back with you once I have more info on this.

Let me know if I can clarify anything on our end here in the meantime!

3

We’re also getting intermittent reports of this from our app users using the Shopify mobile app. Haven’t identified any pattern in device/OS or anything, but seems to be intermittent even for the reporters and our team hasn’t been able to replicate at all.

There’s another open thread with some reports that seems related: Bug: Modal actions hidden on some Shopify Mobile Android devices

4

Hey @Brett - thanks for adding that context here.

Just confirming, this does sound related to the other Shopify Mobile modal action behaviour you linked, especially since it’s intermittent and seems tied to the mobile app presentation rather than a specific app-side change.

I’m going to connect this with the issue I’m flagging on our end. If you’re able to share a bit more detail, that would be super helpful for repro:

  • Device model and OS version
  • Shopify Mobile app version
  • Whether closing/reopening the Shopify app, clearing cache, or reinstalling temporarily changes the behaviour
  • Whether Sidekick/the mobile toolbar is visible when the modal actions render incorrectly

For now, the safest workaround I’ve seen is avoiding footer-slotted modal actions on small Shopify Mobile views and rendering a mobile-specific fullscreen/page-style confirmation with actions in the content area, while keeping the normal modal flow for desktop.

I’ll keep you in the loop once I have more info on our end here as well though, appreciate you flagging this.

5

@Alan_G unfortunately I don’t have great details since our team hasn’t been able to replicate so we’re relying on information we can gather from merchants reporting the problem.

I know one merchant reported this problem on their iPhone 14 Pro Max.

From a couple of screenshots we received, Sidekick/the mobile toolbar do not seem to be shown, however this could also be due to how the screenshot was taken or cropped so I an’t say definitively.

We’ve been recommending clearing the app cache as a possible solution as it was mentioned in the other thread, but have yet to hear any specific reports of whether or not this as worked.

If we’re able to obtain any further details from our reporters, I’ll be sure to update here.

6

@Alan_G I had the same problem and after unistalling/reinstalling the app the problem is still there just a bit different.

Here my details:

  • Device model and OS version
    OnePlus Nord 3
    Android 16

  • Shopify Mobile app version
    10.2622.0

  • Whether closing/reopening the Shopify app, clearing cache, or reinstalling temporarily changes the behaviour
    After reinstaling, partially changed the issue. Before I had the modal with that weird plus button a no buttons on the footer. After reinstalling, there is no plus button in the header but the expected buttons are still not visible. In the footer there is only a Close button but not the buttons I expect.