If a customer is on their phone, it’s going to be an awkward experience asking them to “Scan the barcode” to open a link or be redirected to a third part-url. An experience like this makes sense on desktop but not mobile users.
However, with the recent release of Polaris there is no way to contain a container to only be displayed at certain window sizes. The Preact versions only ship an s-query container that looks at the component’s rendered width and not the page width.
Will Shopify be allowing developers to target desktop or mobile users?
1 Like
You are right, asking a mobile user to scan a QR code on their own screen is definitely a UX dead end.
I believe the reason Shopify is leaning into s-query (Container Queries) rather than window-based media queries is because components now live in so many different surfaces like sidebars or modals. I suspect the goal is to move away from device-sniffing and toward components that adapt to the actual pixels they are given.
It is a shift in workflow, but using s-query to toggle between a ‘Scan’ vs ‘Tap’ experience is likely the intended path forward. You can probably solve this by using s-query to show a simple on small widths for a direct tap, and only showing the when the container is large enough for a desktop view.