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

ten uses of augmented reality

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
  2. 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.

  3. Create a new project and upload a 3D model
  4. 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.

  5. Preview the file
  6. On the Manage Projects page, click the eye icon next to the project to preview the model.

  7. Change the placeholder loading background
  8. 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.

  9. Embed the viewer on your Wix site
  10. For this guide, I've created a simple site from a jewelry store template.

    1. Click on the Add Section Buttonten uses of augmented reality
    2. With the section selected, click the add button on the command bar. In the Add Elements window choose a blank white Strip.ten uses of augmented reality
    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.ten uses of augmented realityAn HTML Embed element will be added to the page.ten uses of augmented reality
    4. Go to the Integrate Viewer page on Ezyvue and in the HTML Code section and select a project.ten uses of augmented realityClick the copy button below the Html Code window, paste it into the HTML Settings dialog and click the Update button.ten uses of augmented realityThe viewer should load with the project image displayed.

  11. Save and preview your site
  12. 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!ten uses of augmented reality

Related blogs

Enhancing your online store with a 3D viewer
Display products in 3D and AR on your website