[Feature request] Render Different Targets On Mobile & Desktop

As requested in [IMPORTANT] Stop creating issues here, use the Shopify Community forum instead · Issue #2521 · Shopify/ui-extensions · GitHub, I am re-raising this issue.

Please find below the details of Checkout Ui Extension - Render 2 Different Targets On Mobile & Desktop · Issue #1680 · Shopify/ui-extensions · GitHub

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

Two examples were expressed on the GitHub Issue:

  1. We have a discount promo text need to display in different targets
  • Desktop: purchase.checkout.reductions.render-after
  • Mobile: Below order summary section
  1. 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.