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
Let our robotic rig scan and create 3D images of your products
Automatic optimization of your 3D product images on our XR commerce platform
Copy paste the URL or custom code of your products wherever you want your 3D enabled product image to appear
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:
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
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?
→ 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.
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.
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:
<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″>
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:
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.
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!
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.
i) Go to your Theme Editor → Pages.
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!
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.
Schedule a quick demo here and take your sales and shopping experience to the next level.