Is there a way to embed Sketchup 3D Viewer at the homepage?

Technical Q&A
, , ,
1

www.btomyhome.com

Sketchup shared link to 3D viewer

https://app.sketchup.com/share/tc/northAmerica/j4s1wcXFYjA?stoken=3YczqFRsblxHy0by3dyl4ePvDuomialNdurJh5qrWDMm-2YkelmvQFMyQ-xoQt9y&source=web

Is there a way to embed this sketchup 3D viewer at the homepage?

I wish to replace my video presentation with this 3D viewer to let my customers experience playing with the model before making purchase.

2

Hi @Wholejinggang ,

We can embed 3d object on the website. For this you will have to export the object to gbl file and we can view that using model viewer. I did this on my test store https://mangit.myshopify.com/

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

3

Found the solution. For sketchup the easiest way is to upload my model to 3D warehouse, from there it will provide an embed code for me to copy.

Going back to the shopify theme customize, I added a custom liquid block at my desired position and included this liquid code and css code,

.centered-element { text-align: center; /* This centers the text within the div */ }

Try our 3D demo!

.centered-element {
display: block; /* Ensure it’s a block-level element /
margin-left: auto;
margin-right: auto;
width: 580px; / Or the specific width of your element /
max-width: 100%; / Ensures responsiveness */
}

Result on www.btomyhome.com