Can't access viewports in web components

Extensions
1

We have a critical gap in web components we’re hoping you might be able to help fill.

We are in the process of moving all of our extensions from react to preact.

However, we have this blocker around viewports.

See video here: https://youtu.be/CazhkZOyu4I

1 Like
2

Please do not tag Shopify staff members that have not previously engadged in a topic, this is outlined in the code of conduct:

3

Hey,

Thank you for flagging this.

You’re right that with web components you only have access to container queries, there’s no more viewport access.

Your best bet right now is probably sniffing the user agent to figure out if you’re on a mobile device. Not ideal, I know.

That said, I’d also want to flag something about the broader approach here. Hiding an entire extension based on viewport can be brittle regardless of whether you have viewport access or not. Due to future updates or rendering conditions, certain sections might not always be visible on desktop.

Thanks again for sharing this, it gives us food for thought.

4

Hey @Robin-Shopify thanks for this.

I just want to dig a little deeper into why this is so important for us.

As you’d be aware, the order summary is not open by default on mobile.

However, the order summary is a wonderful spot for extensions on desktop.

it’s really important that we place our upsell extensions in the highest converting positions for different screen sizes.

We’ve also got this set up in this way for the majority of our merchants so deprecating this experience would be a huge lift.

And the only reason we’re making the change is the requirement to migrate to preact. We can look at the user agent side of things but is there any world where you would bring viewports back? Or another solution to allow extensions to show in different places based on screen size.

We aren’t keen to force the order summary open as we’re not sure what kind of impact this might have on conv rates.

5

Hey,

noted and thanks so much for sharing!

I have also shared this with the team to look into this further. I don’t believe that there will be changes to this in the very short-term.

6

Hi @Robin-Shopify

I’d like to chime in here saying that this is a blocker for us to currently migrate from React to Preact - as our app allows merchants to create different layouts based on “device” (desktop, tablet, mobile).

Many of this merchants are relying on this feature to display relevant content depending on the context of the customer.

Can the team atleast expose it in the form of a hook for the UI extensions (customer account, checkout, etc). That way you don’t need to do any changes to the web components libraries, you just fill that gap in the Ui extensions environment via the hook.

I have requested this in the past:

7

@paulygoldston adding to what Robin suggested on the user agent side, this is roughly how we’ve handled it as a stopgap during the Preact migration:

const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

Not perfect but covers the majority of cases for hiding order summary extensions on mobile. Combined with muchisx’s point about a hook being the right long-term fix, it at least unblocks the migration without having to restructure the whole extension placement logic.

Hopefully the team picks up the feature request, the use case around upsell placement being conversion-sensitive on mobile vs desktop is a very real one.

2 Likes