3D Model Viewer on Any Page

[mOONbOOTS]

Hello,

We are using the Dawn theme, and we have a 3D model for our product which appears fine on the product page. However, the Dawn theme was coded, works well for displaying 3D models, and we just want to use the same method, but add it to our home page. Currently, we're using Google's model-viewer and unfortunately that just adds extra js calls and prevents backwards-forwards cache because of webxr.

Anyone know how to use the 3D model code from the product page on any other page?

Thanks in advance.

[Made4uo-Ribe]

Hi @mOONbOOTS 

Have you tried using the Featured product section? Is this 3D is the main image? If not, you will need to add custom code unfortunately. We can do this for you with a competitive price. Send me a message if interested

[canmanski]

This liquid code seems to work for me, both on home and product pages, using Dawn theme

<style>
:not(:defined) > * {
  display: none;
}

model-viewer {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
</style>

<div class="page-width" style="height: 50vh;"> 
<model-viewer  src="Model-url" camera-controls="true" ar ar-modes="webxr scene-viewer quick-look" data-shopify-feature="1.12" alt="3D model alt description" 
poster="Poster/Loader image URL"></model-viewer>
</div>

[felixmpaulus]

Hey @mOONbOOTS ,

even though you seem to already have the 3D models, I want to to shoutout Fira. 

With Fira you can create the 3D models only using your smartphone (record a 1min video of the product and upload to the app). 

You can then display those models anywhere in your store. They are optimized for performance and customers have been pretty impressed with the effect on their conversion. 

If you want, you can just recreate the 3D models using Fira. Then you would be free to display them anywhere, either with drag&drop in your theme editor or with a code snippet (individual snippets for each model, so you have full control).

Hope this isn't too late. 

All the best

Felix

https://apps.shopify.com/fira-ai-video-to-3d-model

PS: I am the developer of Fira. I thought I should mention that! 🙂