Modal in Shopify App renders buttons weirdly

[Bedrich_Schindler]

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:

But in Shopify app, it looks like this:

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.

[Alan_G]

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!

[Brett]

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

[Alan_G]

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.

[Brett]

@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.

[ungarida]

@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.

[Alan_G]

Hey @ungarida - thanks for sharing those details and reaching out.

If you’re able to share a screenshot or short screen recording of the current state after reinstall, that would be useful for repro as well.

I can definitely take a closer look on our end here and dig into this internally.

[daryl]

I wanted to corroborate that the merchant is using an Android device and is also reporting that the modal buttons are not visible.

[ungarida]

These are screenshots of the same dialog on the mobile app ( Android ) and on the web version. Obviously on the same mobile phone:

[Alan_G]

Hey folks - quick update here.

This might be tied to some broader Shopify Mobile modal/footer behaviour we were tracking with the floating bottom toolbar. A fix for modal actions in the app iframe has now been deployed through App Bridge CDN, so no app-side update should be needed for the modal button/footer issue:

Polaris modal action buttons hidden behind the floating toolbar in Shopify Mobile

Hi, thanks! The modal issue is solved now and works great. However, we’re still unsure how to handle components that are fixed to the bottom of the screen. For example, a floating chat button. From what I’ve seen, this affects all apps. Another example is the bottom slide-up panel in Translate & Adapt. We can’t simply add extra bottom spacing because then the component would be positioned incorrectly when the floating toolbar isn’t present (for example, on mobile browsers). Is there any way t…

If you’re still seeing the issue, could you fully close and reopen the Shopify Mobile app, then retest the same modal? If you’re still seeing the actions missing after that, could you share an updated screenshot or short recording, along with the device model/OS, Shopify Mobile app version, and whether the modal is using s-modal, App Bridge modal, or Polaris React Modal?

For any custom fixed-bottom UI outside of the modal itself, the safest path is to position it using --shopify-safe-area-inset-bottom so it sits above the Shopify Mobile toolbar when that toolbar is present.

Let me know if you’re still seeing this after retesting and I can dig further on our end.

[gunner]

My experience in the Shopify app is that the primary button always becomes a + icon at the top of the screen and I’ve found no way to change it.

I was previously using the React App Bridge modal components and have now switched to the latest Polaris web components but I’ve still found no way to resolve this.

s-button supports an icon property, but this doesn’t seem to do anything within the Shopify app.

This is causing great confusion for customers - for example in the case of a Delete confirmation. No customer would think clicking a + icon would confirm the deletion.

Shopify mobile app (Android):

Desktop (Chrome):

Is the primary button locked to being a + icon within the Shopify app? Is the only way around this to include separate buttons within the modal content area?

[Alan_G]

Hey @gunner, hope all’s well - thanks for confirming this is still happening.

The fix I mentioned above addressed modal footer actions being obscured by Shopify Mobile’s floating toolbar. It looks like the separate behaviour where the primary action is converted to a generic + icon is still unresolved though.

I get where you’re coming from here, so I’m going to take this back on our end with your screenshot. Could you share your device model, Android version, and exact Shopify Mobile app version? Just want to make sure we’re getting the right diagnostics for this - thanks!

[gunner]

Sure thing @Alan_G

Samsung Galaxy S24
Android version 14
One UI version 6.1
Shopify Mobile App version 10.2628.0 - 298933

The customer who complained about it was an iPhone user (not sure of hardware/OS version). They sent through a screenshot which looked basically the same as on my Android.

[Alan_G]

Thanks @gunner - taking a look.

[TobiasDalhof]

@Alan_G Any updates on this issue?

[Kanbanify]

This is still a problem, we have the same on all our modals on Android phones.
To be clear the problem is not just how the button is rendered but overall it does not work at all.