How to create and embed 3D images Adding 3D images to your site is easy with our solution. It just takes 3 simple steps:

Shoot a video of your product with any digital camera

Use Easy 3D Scan® software to create a 3D image in 3 minutes

Upload 3D View to your account on the Cappasity platform and embed it into web, mobile, VR and AR

Shoot a high-quality video of your product

First, decide if you want to shoot imagery yourself, or entrust it to a professional. You’ll need to record a video of 1.5 spins of your object. For high-quality results, we recommend shooting with a 4K digital camera, studio lighting, and a motorized turntable for a smooth 360 spin. If you don’t have the equipment or experience, you can reach out to our global network of product imaging experts.

Find a 3D photographer near you

Ready to try it yourself? For the best results, first check out our tips for how to shoot high-quality videos using the best equipment and set-up.

How to shoot high-quality videos

Use Easy 3D Scan® software to create a 3D image

First things first: Do you have a Cappasity account? If not – sign up. Once you have an account, download and install the Easy 3D Scan software, and launch with your username and password. You’re all set! Now you can easily create, edit and upload 3D Views to your account on the Cappasity platform.

Embed your 3D view into your website

Embed your 3D View into your website

Tips for embedding into popular online stores, websites and apps

PrestaShop

Install a free module from Cappasity.
PrestaShop Instructions

Shopify

Install a free module from Cappasity.
Cappasity Shopify Extension Installer

SAP Commerce Cloud

A free plugin from Cappasity will be available soon. Visit the Cappasity profile at the SAP App Center.

In the meantime, you can auto-embed 3D images through Cappasity SDK. Contact us for more details.

WordPress

Use RAW Html widget (Visual Composer) to add the iframe code. Or you can switch to Text and paste the iframe code.

Twitter

Copy the link to the 3D View or 3D Model and share it.

Medium

Copy the link to the 3D View or 3D Model and past it into the text.

Magento

• Select Products, Catalog, and click Add product

• Select Content, Description

• If you don’t see the edit panel, click Show / Hide Editor. Now click HTML button

• Paste your iframe code in the window which appears

• Click Update and Save

• If you have done everything correctly, you will see the 3D View in the product description

BigCommerce

• Select a product from the catalog or add a new one

• Click HTML button

• Copy the iframe code from the Cappasity platform to the clipboard

• Paste the iframe code in the text

• Click Update. If you have done everything correctly, you will see a yellow rectangle signifying the iframe

• Click Save. Select View store from the menu on the left

• Select the edited product, and you should see your 3D View in the Description field

Try it out now

Curious to try an embedded 3D view in your site first? We’ve made it simple with our sample 3D views. Grab one of the code snippets below and embed it into your site, pasting into the HTML or plain text editor just as you would embed a YouTube video. It’s that easy!

3D Product View

<iframe width="100%" height="330px" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" style="border:0;" src="https://api.cappasity.com/api/player/376c8e87-c56c-4274-92fc-0f9e654c8f41/embedded?autorun=0&closebutton=1&logo=1&autorotate=0&autorotatetime=10&autorotatedelay=2&autorotatedir=1&hidefullscreen=1&hideautorotateopt=1&hidesettingsbtn=0&enableimagezoom=1&zoomquality=1&hidezoomopt=0" ></iframe>

3D Apparel View

<iframe width="100%" height="330px" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" style="border:0;" src="https://api.cappasity.com/api/player/0e1af04a-2b51-4c35-9c52-b1e7219c0981/embedded?autorun=0&closebutton=1&logo=1&autorotate=0&autorotatetime=10&autorotatedelay=2&autorotatedir=1&hidefullscreen=1&hideautorotateopt=1&hidesettingsbtn=0&enableimagezoom=1&zoomquality=1&hidezoomopt=0" ></iframe>