Quick guide: Embed 3D models on your WIX website

No coding skill necessary, get everything done in the WIX editor

Create 3D models in Vectary
vectary-3D-modeling-design-embed-wix-website-header-3.jpg

When you want to feature a 3D model or scene created with Vectary on your WIX website, you have two options

  • upload it as a 2D image - as a static background or a banner
  • embed it as a 3D object - visitors can zoom in and rotate

3D scenes look really great as website backgrounds and are super simple to upload in WIX . If you want to have a 3D scene as a part of your design, rendering the 3D scene in Vectary and featuring it as a 2D image background is the easiest way. 

When you want to let website visitors interact with the 3D model - for example to rotate a shoe model, handbag or jewellery piece you are selling and inspect the details, it is best to embed the 3D object

vectary-3D-modeling-tool-wix-website-background
Let shoppers view your product from every angle

Option 1: Create a 3D background for your WIX website

vectary-3D-modeling-create-scene
Step one: Drag and drop 3D models from library to create your scene

1. Create your 3D scene in Vectary . You can drag and drop 3D models, materials or lights from the free library or upload your own 3D models. You can also model from scratch using the 3D mesh modeling toolkit. Learn more about Vectary's advanced modeling tools. 

render2D-vectary-3D-modeling
Step 2: Rendering

2. Find the right angle and render your scene. Vectary has a built-in rendering tool in the upper right corner. We recommend using the High or Ultra rendering setting. The rendering takes only a couple of minutes. 

export2D-vectary-3D-modeling
Step 3: Export the png

3. Export the png and upload to your WIX page as a background. 

wix-webiste-3D-background-created-with-vectary.jpg
WIX website with a rendered 3D scene as a background

Now you have a background with a 3D model on your WIX site. You can add more text and buttons on top of the background using the WIX editor.

Adding an image with a 3D model as the backround is the easier way on how to feature 3D in your web design. Read on to learn how to embed the 3D model and make it interactive. 

Option 2: Embed 3D model on your WIX website

Embedding a 3D model will let your website visitors interact with the model, zoom it and spin in around to see the details of the product.  

Step-by-step

1. Click on the Embed tab in Vectary editor.

Screenshot 2019-03-04 15.34.32

2. Copy the embed code.

3. Add a custom HTML iframe block to your WIX website. 

4. Paste the code and voila! You should see your creation on your page! 

How to embed AR content to my WIX website?

To do this, just export or convert your 3D models as .usdz files and use the step-by-step method described in our blogpost: "How to embed AR usdz files to any e-commerce website."

FAQ

How do I download Vectary?

You don't have to download Vectary, it is a 3D modeling tool that works in the browser. 

I am using a WIX template page, can I still add my 3D designs to it?

Of course, each WIX template is editable, just add the HTML iframe and adjust the design. 

Updated, February 25th 2019: We updated our subscription plans and some features might not be a part of Free plan anymore. For more information check out pricing page.