Checkout Ui Extension - Render 2 Different Targets On Mobile & Desktop

[hoannguyen02]

Please list the package(s) involved in the issue, and include the version you are using

"@shopify/ui-extensions": "2024.1.x",
@shopify/ui-extensions-react": "2024.1.x

Describe the bug

Seems there is no way to render 1 app extension in different target for desktop & mobile

Steps to reproduce the behavior:

1. Generate extension
2. Detect desktop or mobile
3. Render target based detection

Expected behavior

Possible to render multiple different targets based on device view (desktop, mobile)

Screenshots

Additional context

Our needs: We have a discount promo text need to display in different targets

• Desktop: purchase.checkout.reductions.render-after
• Mobile: Bellow order summary section
  

[nrthbound]

Are there any updates on this? Seems really strange to omit this.

[edhgoose]

We would also benefit from this.

It would make a significant difference to us on the post purchase page. Clients would prefer we rendered the experience on the sidebar when on a desktop (where there is plenty of space and the UI can still be visible), but they'd prefer it was not on the sidebar when on mobile as the sidebar is hidden.

Instead, having it top of the list would be beneficial.

[edhgoose]

As requested in #2521, I have re-raised this issue as: https://community.shopify.dev/t/feature-request-render-2-different-targets-on-mobile-desktop/6411