Embed 3D Object on the homepage

[Labrinth]

Hello,

I'm trying to add a custom 3D model (viewer) on the homepage with the help of the Custom HTML section (block) in the Shopify Theme Builder (2.0), but nothing shows up after I press save.

The code I'm using is the following:

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer id="3dmodel" src="https://cdn.shopify.com/s/files/1/0333/3655/7704/files/infsd-3d-box1.glb?v=1640737610" alt="A 3D model" loading="eager" style="width: 100%; height: 100%;" auto-rotate="" camera-controls="" ar-status="not-presenting"></model-viewer>

I've tested the code in the W3Schools HTML Code Editor and it works fine (https://www.w3schools.com/).

I have also tried the Sketchfab embed option and this one is being displayed on the homepage. I'm not quite sure what I'm doing wrong with my code (I'm not a coding expert, so maybe I'm missing something obvious).

Thanks in advance!

[Angle3D]

Hi @Labrinth ,

Maël from Angle 3D here.

You should probably add the script tag to your header.liquid file.

Then you only add the model-viewer tag to your custom section on the home page.

Let me know if this solves anything.

Otherwise, I'll gladly help over a call if needed.

Best,

[Labrinth]

Hello,

I've added the following code in the theme.liquid file before the </head> tag and the model is still not visible on the homepage. Any other ideas?

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

Thanks!

[Labrinth · Accepted solution]

For some reason, it started working now (the model is visible on the homepage). I guess it was a bug from the new Shopify editor (2.0).

Note: I only re-pasted the same code and saved a bunch of times & then it randomly showed up (hopefully it won't disappear).

[GreganDunn]

Would you be willing to share how this turned out for you? I'm thinking of investing the time and money in this and would like to take a peak at what you've accomplished. 

[Labrinth]

Hi @GreganDunn,

The solution I went with is the 3D viewer from Google (https://modelviewer.dev/), there are a lot of things you can customize, so it covers everything you need & it's free. The 3D models were created by me, but I'm sure that you can find cheap services on Fiverr that could create 3D models for you (20-100$ depending on what you need).

I can't link my theme because it's a work in progress at the moment, but I'm going to explain how I used this. In Shopify Theme editor, I added a html section and then added the code there. You can also add the code where the text fields are, only if you already have custom sections in your theme. So, basically instead of having a image + text section, I went for 3D model + text section. Now, the users can interact with model (mobile & desktop) if I want them too (even in AR on iOS). 

You can use the editor to customize the look & feel of the 3D model (https://modelviewer.dev/editor/) and then copy the code from there (make sure that you replace the links with your actual links for the model).

You have to think how you want to integrate them in your homepage/other pages, but don't use too many of them on the same page, because the file size can add up & then your page will load slow.

I hope this helps you out!

[Jackblox]

Hi Labrinth,

I'm looking to pretty much execute the exact same integration you described. My theme (Motion) offers custom HTML blocks, which I would like to turn into a "3D model + text" section as you did. 

I have my own 3D models already created, and I uploaded one of them to the modelviewer.dev site you listed. I am having trouble figuring out where/what the "link" for my 3D model would be, as it sounds like that would be required for me to replace in the code that you posted. Are you referring to the actual webpage link? Is the 3D model uploaded to Shopify somewhere too (judging by the second link in your initial code)?

Thanks!