Model-Viewer on mobile becomes image with popup window on click. How can I stop this?

I’m using the dawn theme and 3d models with model-viewer for my store. When the template switches from desktop to mobile (at a certain width of the page, so this can be reproduced on a desktop browser.), the model viewer component disappears and shows an image instead. The model viewer will become visible when this image is clicked, like a pseudo-popup.

I’m using javascript to modify the material of the displayed 3d model when certain variants are picked. I know that model viewer can be displayed without problems on mobile, so how can I stop my theme from chagning the model-viewer component display to this popup style? live site at atelier.romantic.technology passw. raypia

Hello @romtech ,

We have checked the issue based on your query. And it’s working on our end. Please check the screen recording below.

https://nimb.ws/ApRoiB

Let us know if you need any further help.

Regards.

CedCommerce

Hello CedCommerce, thank you for your reply.

The issue is not that the model viewer doesn’t load - it works fine.

The issue is: The model should not be in a separate window (notice how you cannot interact with the 3d model before clicking and opening it) on narrow screens.

This must be due to the Dawn Theme somehow treating the model viewer differently if on mobile/narrow screen. Please see my screenshots to see the difference in display:

If you know anything about this, how to enable the model-viewer loading instantly also on mobile, or why the dawn theme does this, your help would be really appreciated!

Hello @romtech ,

Yes, it can be done by adding a custom code to your theme.

We suggest you connect with a Shopify expert or developer who can surely help you to debug the issue and enable this functionality.

Do let us know if you need any further help.

Regards,

CedCommerce