How can I implement a 3D model viewer on my homepage?

[jessehamad]

Hi! I see that Shopify (at least, the Dawn theme) has Google's Model-Viewer available on the product page. I can upload a 3d model, and it allows for AR viewing.. which is cool. But I would like to implement this on the home page- or at least link to the model from the home page somehow.. I have used model-viewer on other websites (wordpress, etc), but for the life of me, I can't get it to work with shopify. Wherever I place the code, I just get a bunch of empty divs.

I also found the code in the shopify main-product.liquid that calls model viewer but don't know how I can call a specific model or even place the code somewhere else.. 

any ideas? i have seen one or two other posts here where people have successfully implemented model-viewer, but their explanations are "it works now!" which doesn't help anyone...

here's what I'm using so far: (of course the actual code has proper urls)

<script type="module" src="model-viewerminjs"></script>

<style>

default model viewer styling stuff

</style>

<model-viewer
src="mymodel.glb"
ios-src="mymodel.usdc"
ar
ar-modes="webxr scene-viewer quick-look"
camera-controls tone-mapping="commerce"
poster="myposter.png"
shadow-intensity="1">

<div class="progress-bar hide" s.l.o.t.="progress-bar">
<div class="update-bar"></div>
</div>
<button s.l.o.t.="ar-button" id="ar-button">
View in your space
</button>
<div id="ar-prompt">
<img src="ar_hand_prompt.png">
</div>

</model-viewer>

<script>
// Handles loading the events for <model-viewer>'s s.l.o.t.ted progress bar
const onProgress = (event) => {
const progressBar = event.target.querySelector('.progress-bar');
const updatingBar = event.target.querySelector('.update-bar');
updatingBar.style.width = `${event.detail.totalProgress * 100}%`;
if (event.detail.totalProgress === 1) {
progressBar.classList.add('hide');
event.target.removeEventListener('progress', onProgress);
} else {
progressBar.classList.remove('hide');
}
};
document.querySelector('model-viewer').addEventListener('progress', onProgress);
</script>

[jessehamad · Accepted solution]

well i'll be darned... it works now...

OK- for anyone wanting to do specifically this thing, here's what i was running into:

1. do not add the script link to model-viewer.min.js! it is already called by shopify

2. only add the relevant css from the model-viewer scene (should be obvious, but i wasn't paying attention)

3. wrap everything in a div with a defined height, otherwise it shows up as 0 height

I think those are the only things I changed.. if you want a step by step, drop a comment and i'll try to give a thorough explanation of exactly from beginning to end what i did.

[jessehamad]

fyi- i guess the word "s-l-o-t" is forbidden by shopify community, hence the periods... 

[jessehamad · Accepted solution]

well i'll be darned... it works now...

OK- for anyone wanting to do specifically this thing, here's what i was running into:

1. do not add the script link to model-viewer.min.js! it is already called by shopify

2. only add the relevant css from the model-viewer scene (should be obvious, but i wasn't paying attention)

3. wrap everything in a div with a defined height, otherwise it shows up as 0 height

I think those are the only things I changed.. if you want a step by step, drop a comment and i'll try to give a thorough explanation of exactly from beginning to end what i did.

[jessehamad · Accepted solution]

OK, a couple people have asked- so here is step by step what I did to get the 3D / AR viewer on the home page:

First: I am using the "Craft" theme by Shopify, it's one of the default themes available for free. I think this should work with Dawn as well.

Steps:

1:.. prepare your 3D model and save it as a GLB or GLTF file

2:.. go over to google's 3d model viewer website: https://modelviewer.dev/ 

3:.. under "getting started", click on "editor"

4:.. upload your 3d model

5:.. you can play with the settings here, or just leave it as it is

6:.. click "download scene"

7:.. extract the zip file that you just downloaded.. you will need the following files from the zip file:

- ar_hand_prompt.png

- ar_icon.png
- the glb file that google created (or you can use the glb file you uploaded, but i think google optimizes the file for deployment when you download the scene from modelviewer.dev)

- script.js

- index.html

- style.css

------- here's where everything gets a little silly, because... shopify..

8:.. upload the two png files and the glb file to shopify (under "content" and "files")

9:.. get the full URL's for the files you just uploaded and save them somewhere

10:.. in the Customizer, create a "custom liquid" section on your home page. here is where all your code is going to go

11:.. to begin, create a div with a defined height (check out www.w3schools.com if you need help with basic html coding)

12:.. open the index.html file that you downloaded from google

13:.. copy everything from "<model-viewer..." to "</model-viewer>" and paste this into your div from step 11

14:.. swap out the src URL's for your GLB and the two PNG's for the ones from step 9

15:.. above your div (step 11), add style tags  ("<style> </style>")

16:.. copy the contents of style.css (step 7) and paste it in between the style tags

17:.. underneath your div (step 11), create script tags ("<script> </script>")

18:.. copy the contents of the script.js file (step 7) and paste it in between your script tags

19:.. save!

that should be it. seems like a lot but it should only take 5 minutes to set up.

the mistakes that i made were: trying to load the model-viewer js code (at the bottom of the index.html file), when apparently this is already included in the Craft (and presumably, Dawn) theme, and not adding a defined height to the div in step 11. 

hope this helps you

[Vicisdope]

Thanks for this Jesse! 

[canmanski]

Hi,

Thanks for the solution.

The problem I am facing is that Shopify is using outdated model-viewer (1.2 I think), while I have been using the newest release on a different website (wordpress). Unfortunately, my *.glb file seem to behave differently in Shopify's model-viewer version (some alpha channels on textures are rendered as not transparent) which breaks the experience.

Do you think the default version of model-viewer could be overridden somehow?

Bart

[jessehamad]

You can definitely load your own scripts in Shopify.. add them as an asset
in the code editor or directly inline in the page customizer.. or just link
to the script if it’s available online.. all of that stuff is accessible in
the code editor.. for exact locations and steps, I’ve found ChatGPT to be a
great resource..

Ps.. I stopped using Shopify. It’s been getting steadily worse and worse
year after year.. can only suggest the same to everyone else

[canmanski]

After playing around with this, I think I managed to simplify placing 3D models anywhere you wish, reusing Shopify's <model-viewer>. 

In my case it is on product page, so I I use custom metadata to store model URL (copied from uploaded GLB file), ALT description and poster URL.

Here's my custom liquid code:

<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={{product.metafields.custom.ar_url}} camera-controls="true" ar ar-modes="webxr scene-viewer quick-look" data-shopify-feature="1.12" alt={{product.metafields.custom.ar_alt}} 
poster={{product.metafields.custom.ar_poster}}></model-viewer>
</div>