Showcase products in 3D and augmented reality on your Wix site

David Long
10th May 2023

With the Ezyvue platform your customers can view and interact with a 3D model of a product and see it in their home with augmented reality (AR). The following guide will take you through each step to add the Ezyvue 3D viewer to a Wix page and display a 3D model. Wix is a website builder with an easy-to-use drag-and-drop editor that lets you create a website or online store for free.

1. Create a free/trial Ezyvue account

Go to the pricing page and sign up. Click on the link in the email sent to you to activate your account and you're ready to log in.

2. Create a new project and upload a 3D model

From the Project menu select New Project. Fill in the name and description and select a single file or a directory if the 3D model has additional asset files such as textures. If your model file format isn't supported you can use an online file converter such as Aspose or export it as a glTF file from your modeling software. Hit the Submit button and a new project will be created which can be viewed on the Manage Projects page.

3. Preview the file

On the Manage Projects page, click the eye icon next to the project to preview the model.

4. Change the placeholder loading background

The default loading image for the viewer is a placeholder image. To change this, load the Ezyvue Studio by clicking the edit button (pencil icon) next to the project on the Manage Products page. When the model loads you'll notice the grid is visible, we don't want this in the image, so click the viewport tab (square icon) and untick the grid checkbox. Next, click the General Settings tab (the gear icon) and adjust the camera in the main viewport then click the Take Snapshot button.

5. Embed the viewer on your Wix site

For this guide, I've created a simple site from a jewelry store template.

1. Click on the Add Section Button
2. With the section selected, click the add button on the command bar. In the Add Elements window choose a blank white Strip.
3. Right mouse click on the strip and select Add column in the context menu. This will split the strip into two columns. Click on the left column and click the add button on the command bar. In the Add Elements window click Embed Code and then choose Embed HTML.An HTML Embed element will be added to the page.
4. Go to the Integrate Viewer page on Ezyvue and in the HTML Code section and select a project.Click the copy button below the Html Code window, paste it into the HTML Settings dialog and click the Update button.The viewer should load with the project image displayed.
6. Save and preview your site

Firstly save the site by clicking the Save button on the main menu bar. Click the Preview button next to the Save button and admire your work!

Related blogs