Liquid, JavaScript, themes, sales channels
Hey there, I've uploaded 2 different 3D models for a product to show the different variants but unfortunately the model viewer for the 2nd 3D model doesn't load correctly and the customer is unable to interact with it. What is interesting is that if you do attempt to interact with the model by rotating it (visually it won't move) and you then click the fullscreen button in the viewer controls, it re-renders the model in the position it should have rotated to when the fullscreen view appears. The model will not rotate in fullscreen either but if you attempt to do so and then exit fullscreen, it will render as having moved. Essentially, the model viewer is working to some degree but the 2nd model is not being rendered correctly. Let me know if a link is needed to see this behavior or if you can simply test this on your end. This occurs while using a brand new updated version of the "Debut" Theme so it should be very simple to reproduce.
Thanks in advance for any help you can offer!
Solved! Go to the solution
This is an accepted solution.
Ok, I will have a further look at this later, here are my thoughts so far:
I thought I came to the right place since it's an official Shopify Theme. Really hoping to get to the bottom of this... Is there anybody out there?
I have not seen this in my test shop -- care to share a link to your store?
Hey, so I'm working on a client's store and they aren't comfortable making any changes live if they aren't working correctly. I'm not sure how else to show you this issue but if you simply upload two models under the same product on the Debut Theme, you will be able to observe the second model viewer not working correctly. I am happy to capture and provide a video if it would help but seeing as this is a fresh download of the most released update, you should be able to reproduce it very easily. Please let me know if I'm talking crazy over here, I swear it's busted.
You can always share a preview link.
Here is my test shop preview link to a product with 3 models https://hc5bzt4p3z1ga4lf-11055070.shopifypreview.com/collections/all/products/a-free-test-product and it works fine for me.
Okay, so that actually helped me figure out the issue. Thank you for sharing! The difference between your store and mine is that I set the model viewer's "reveal" attribute to reveal: 'auto' instead of 'interaction' so that the model gets loaded immediately without the customer having to select it. I am in the process of giving the models an animated spin that will autoplay as well so this is an important feature of the model-viewer that the theme apparently isn't cooperating with. For now, I've disabled the 'auto' attribute and set it back to 'interaction' as a workaround but this is not the ideal scenario.
Please try adjusting the attributes for the model viewer your media.liquid code and set reveal to auto and let me know if you experience this same issue. It is my personal opinion that all features of the model viewer should be fully functional with the theme but I also understand this is relatively new tech that Shopify has integrated so there will certainly be bumps along the way. Hopefully we can get a fix for this soon though! : )
EDIT: The relevant attribute: https://modelviewer.dev/docs/index.html#entrydocs-loading-attributes-reveal
This is an accepted solution.
Ok, I will have a further look at this later, here are my thoughts so far:
What?! Ok... so I AM crazy? Cool. Cool cool cool.
Here's a preview link to the store:
https://8p6r5166yeleob26-21674385.shopifypreview.com
Also! This is my media.liquid code.
{{ media | model_viewer_tag: image_size: image_size, reveal: 'auto', data-model-id: media.id, alt: '3D Render View', loading: 'eager', background-color: 'unset' }}
I will look into injecting the poster dismiss method and see how that plays out.
Thank you for the suggestions! 🙂
Okay so I got to the bottom of it at last. I am crazy! I forgot that I set loading to 'eager' so I sabotaged myself because deleting the attribute fixed the bug. That said, I have no idea why because it seems like the right value to set it to if you want the models to load instantly. Well anyway, thank you a ton for your help! I am just happy everything is working as expected now. 🙂
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024