How to Create Separate Views for Mobile and Desktop in a Shopify Checkout Extension App?

[elavarasan-m]

Hi everyone,

I’m currently developing a Shopify checkout extension app using react js and need to create two different views: one for mobile devices and another for desktop. I’m looking for guidance on the best practices to achieve this. Specifically, I would like to know:

1. How to detect the device type (mobile vs. desktop) within the Shopify checkout extension app?
2. Are there any specific Shopify APIs that can help with creating and managing these separate views?

Thanks in advance for your help!

[elavarasan-m]

Hi @ntnspotfundrAi , 
Is it possible to have 

• CSS Media Queries
• JavaScript Device Detection Libraries (e.g. Mobile-Detect.js, Device.js) 
  
  In checkout extension app

[elavarasan-m]

If possible, help me with libraries and sample code.

[elavarasan-m]

Checkout UI extensions (shopify.dev)
Here we are not allowed to access window object