Solved

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

jessehamad
Shopify Partner
5 2 1

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>

Accepted Solutions (2)

jessehamad
Shopify Partner
5 2 1

This is an 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.

 

View solution in original post

jessehamad
Shopify Partner
5 2 1

This is an 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

View solution in original post

Replies 4 (4)

jessehamad
Shopify Partner
5 2 1

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

jessehamad
Shopify Partner
5 2 1

This is an 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
Shopify Partner
5 2 1

This is an 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
Not applicable
1 0 0

Thanks for this Jesse!