3D Product Images: How To Easily Create and Publish Them on Any Website or App?

Here’s the thing: offering interactive 3D product images on your ecommerce site, is much easier than you think. Whether you want to provide an online shopping experience that customers enjoy, increase your ecommerce conversions or just stand out from the competition- you’re in the right place!

So without boring you to tears with a ton of technical jargon, here’s what we’re going to cover:

→ 3 simple steps to create and share incredible 3D product images anywhere you want

→ Extra tips to help you embed 3D views on your WordPress, Shopify, Wix or SquareSpace site

How to create and publish 3D product images in 3 simple steps:

Step 1. Create

Let our robotic rig scan and create 3D images of your products

Step 2. Optimize

Automatic optimization of your 3D product images on our XR commerce platform

Step 3. Ready to embed or share anywhere

Copy paste the URL or custom code of your products wherever you want your 3D enabled product image to appear

Step 1. Creating 3d product images of physical inventory

First things first, you want to replace your static product photos with 3d product images that shoppers can interact with. There are two ways in which you can do this:

i) The Do-It-Yourself Method: Upload your own 3d models

If you’re a computer-design or 3D modelling expert, you are most likely comfortable using a software like AutoCAD to draw precise 3D views which replicate your actual products.

→ Simply share your 3D models with our team to view them in your account on our XR commerce platform. Currently we support all popular 3D file formats like: .jpg, .png, .obj, .svg, .dae, .stl, .glb, .gltf and more.

An example of 3D product view created automatically with Designhubz' robotic rig

ii) The Quick and Easy Method: Create 3D models with Our Free Robotic Rig

While the DIY methods might be a preferred choice for some, for most of us using a 3D modelling software is a tedious and time-consuming task. Especially, when you want to create 3D models for your entire inventory, fast and at scale.

We make this process of transforming your products into 3D images dead simple:

→ Once you create an account on our platform, we send you a portable robotic rig free of cost. Don’t have a Designhubz account yet?

Schedule a demo here

→ Our portable hardware scans your product across 360 degrees and creates their 3D versions. These 3D images then automatically get imported to your account on Designhubz for you to view and share.

Step 2. Automatically optimise your 3D visualisations with Designhubz

Typically, 3D product visualizations take hours to render and load, that’s where our behind-the-scenes optimisation comes in.

→ Once you upload your own 3D models or use our robotic rig which automatically scans, creates and uploads your 3D product images, Designhubz uses state-of-the-art image correction technology. Here, your 3D models are optimized for high quality rendering fast loading.

→ Login to your Designhubz account and go to the XR Commerce tab. Here you can view all your optimised 3D product images.

Don’t have a Designhubz account? Book a quick demo here and get access to a 3D and AR commerce account.

Step 3. Publish 3d product views on your website, app or anywhere else (no coding)

Now that your 3D product views are ready, you can easily embed them into any website or share them across any channel you want.

In your 3D product gallery, simply navigate to the product you want to embed and click on the ‘Share’ button. Here you will get:

i) a link or URL to share across any platform you like. This is especially handy for social media.

ii) a simple code snippet which can be embedded on any website or app.

Here’s what a sample code snippet for a 3D model looks like:

Go ahead, copy paste this into your site to see how it looks.

<div style=”width: 640px; height: 480px;”>

<iframe style=”width: 1px; min-width: 100%; width: 100%; height: 1px; min-height: 100%; height: 100%;” width=”100%” height=”100%” scrolling=”no” src=”https://3d-vr. designhubz. com/vr/?file=https://designhubz-3d-vr.s3.amazonaws.com/documents/ 08aec0dde45d45649097220091e747a6/Hurdy%20Gurdy%20-%20Steven%20Janes%20(CC).gltf.gltf&ar=true&logo_url=https://designhubz-com-files.s3.amazonaws.com/logos/ee89dd6374df48b8b9ec5290f31296c9/8e9eb86c99f44d3082a397b128440ab5/Logo_3.png&share_url=https://app.designhubz.com/drawings/direct/e1a907b686f24f569523ea9712cb6077″>

</iframe></div>

Extra tips to embed 3D product views on WordPress, Shopify, SquareSpace and Wix

We’ve put in a lot of effort to make sure that our 3D player can be shared and embedded on any channel of your choice. No matter what the device, the browser or even CMS platform your website is built on.

To make this even easier, here are a few tips to embed 3D views on popular ecommerce CMS platforms:

1. To embed on a WordPress Site +

Steps to Embed Custom Code for 3d Product Views on a WordPress Site:

i) Go to the page you want to add a 3D product view to and click on ‘Edit’ page. Then, simply add a ‘Raw HTML’ element or widget wherever you want your 3D view to appear as shown in the following image:

ii) Paste the iframe code generated into the ‘Raw HTML’ element.  

Update or Publish your webpage and voila, you will see the interactive 3D product image on your live website.

2. To embed on a Shopify Site +

Steps to Embed Custom Code for 3D product images on Shopify Website:

i) Go to your Shopify dashboard. Click on ‘Themes’ under ‘Online Store’ in the left sidebar.

ii) Click on the Customize button in your active theme. This will open up your homepage.

iii) Select the page you want to add the custom 3D code to, from the top drop-down.

iv) Choose ‘Add Section’ in the left sidebar and click on ‘Custom Content’. Choose ‘Add’.

iv) Click on ‘Add Content’ in the left sidebar and select ‘Custom HTML’ from the dropdown.

v) the ‘Edit Custom HTML’  button and simply paste the iframe code generated in the space provided.

iii) Click on ‘Save/Publish’ and you’re done!

‍

3. To embed on a Wix Site +

Steps to Embed Custom Code for 3D Product Views on a Wix Site:

i) Go to ‘Edit Site’ from your Wix dashboard.

ii) Click on the ‘+’ button on the left sidebar and select ‘More’.

iii) Select ‘HTML iframe’ under Embeds.

iv) Here, paste the iframe code generated on Designhubz and click on ‘Apply’.

Now, you will be able to see the 3D view on your website- it’s as simple as that.

‍

‍

4. To embed on a SquareSpace Site +

i) Go to your Theme Editor → Pages.

Steps to Embed Custom Code for 3D Product Views on a SquareSpace Site:

ii) Create a new section or click on the section you want to add the 3D view to.

iii) Click on ‘Edit’, you will see a ‘+’ icon on the upper right corner.

iv) Click on it and add a ‘code block’.

v) Delete the placeholder text and paste the code snippet generated on Designhubz here.

vi) ‘Publish’ your site and you’re done!

‍

Bottom Line

When it comes to ecommerce, there’s no doubt that 3D product views are here to stay. If you’re still in two minds because of the effort involved, we hope that this article sheds light on how easy it is to actually provide a 3D shopping experience.

Ready to start creating and embedding 3D product images on your ecommerce site?

Schedule a quick demo here and take your sales and shopping experience to the next level.

‍