Adding 3D Content to Your E-Commerce Website

Patrick Abadi
Spectre3D
Published in
3 min readOct 21, 2022

The world is moving to 3D. Websites presenting 2D images or video are being updated to incorporate 3D content. In a recent study by Forbes, 3D marketing was shown to increase the conversion rate of luxury brands by 40%. Retailers looking to stand out in a competitive market are putting a focus on immersive experiences, 3D interactions, and augmented reality.

Running an e-commerce website without 3D content is now proving to be detrimental. Fortunately, there are several tools that can get you up and running in no time!

It has never been easier to create and publish 3D content for your audience. With a smartphone and a little know-how, you can add professional looking 3D elements to your site with which customers can interact.

3D Scanning

The act of 3D scanning a real-world item has historically been a cumbersome and highly technical endeavor best left to professionals. It used to involved expensive depth cameras or studio rigs, several unwieldy applications, and hours of processing time to produce a single 3D model. Nowadays, you can do it in just a couple of minutes straight from your phone!

Using the Spectre3D scanning app, you can scan an object to add to your site without any specialty equipment. There is both an Android & iPhone version which is user-friendly and produces high-quality 3D models.

3D scanning with Spectre3D App

Exporting

Once you’ve captured the scan, you can easily export the 3D model directly through the app.

In this example, I’ve exported this model to Sketchfab: a service for hosting your 3D models which comes with some useful sharing tools.

Exported model from Spectre3D to Sketchfab

Once you’ve exported and uploaded the model to Sketchfab, you then have the ability to embed your model into your own website! Simply click on
</> Embed and Sketchfab will provide you with an html block that you can inject into your website.

Your website

Using the embed code you received from Sketchfab, add it to your website and watch your site come alive! No need to worry about 3D model loading, display, or interactions. Sketchfab does all the heavy lifting for you.

Adding your 3D model to your website

Your Shopify website

If you’re using Shopify to host your e-commerce store, you can skip Sketchfab and simply add your export GLTF/GLB model directly as described here.

Conclusion

Adding 3D models to your website brings a new level of immersion for your customers. Interacting with your products in ways they couldn’t before, your customers will have a better connection to your offerings.

3D scanning your products is well worth your time and will propel your company into the future!

--

--