3D Product Configurator – Simplio3D Takes Ecommerce to Another Level

How to Build a 3D Product Configurator with Simplio3D – Step-by-Step Guide

How to

how to build a configurator

Creating an interactive product configurator no longer requires weeks of development or a team of developers. With Simplio3D, you can make your own 3D configurator using a user-friendly, no-code interface. In this tutorial, we’ll walk you through a quick step-by-step process, from uploading your 3D model to embedding the configurator on your website.

Step 1: Upload Your 3D Model

Start by preparing your 3D model. Simplio3D supports formats like .glb, .gltf and .obj which is commonly used for web applications. If your model is in another format, you can convert it using free tools like Blender.

Don’t have a 3D model and not sure where to find one? Check out this article that covers exactly that.

Once ready:

  1. Navigate to the Upload section in Simplio3D.

  2. Upload your 3D model (e.g., a chair, shoe, sofa, table, wedding ring, jersey, sock, etc.).

  3. After uploading, mark the model as Ready and click Save.

NOTE: Once it is uploaded, you’ll see the parts of the model listed, these will be used to assign materials and define configurator options.

Upload 3D model

Step 2: Create Materials and Textures

Go to the Materials section. You’ll need to:

  1. Create Categories to organize your materials ( e.g. “Wood”, “Leather”, etc.).

  2. In the Textures tab, upload your texture files (downloaded from free or paid sources).

  3. Click the ‘Edit’ button on the uploaded texture to assign it to its appropriate category.

  4. Next, create the materials, go to Materials and click Add Material and:

  5. Name your material.

  6. Choose its category.

  7. Change the status to ‘Ready’.

  8. Set the Type (Flat, Fabric, Metal, etc.) and Surface (Texture or Color).

  9. In ‘Surface’ setting apply the appropriate texture or color.

  10. Use the horizontal sliders to make changes for Specular, Reflection or Opacity to produce the wanted material.

Repeat the process for all your materials. You can preview them in real time as you tweak the parameters.

edit material in Simplio3D

Step 3: Add Your Product

Go to the Products section:

  1. Click Add Product, give it a name, and select Configurator mode.

  2. Click Save and then Edit to begin building the configurator.

add product in Simplio3D

As you build your configurator, you will follow 6 steps, guided by the top tabs within the interface:

Select Layout 

  • Select Layout: Choose where the options panel will appear (right, left, top, or bottom).

Add 3D Models

  • Add 3D Models: Pick the 3D model(s) you uploaded earlier.

Create Options

Here’s where you make the configurator interactive. Click the dropdown found in the upper right side of the screen and select the type of block you want to use for your configurator.

Please refer to the documentation for more details about each type of option block.

You can drag and drop  option blocks and variants to change their order.

create options in Simplio3D

Pricing

Enable pricing by turning on the Pricing option.

  • Add a Base Price block to set a fixed cost.

  • Advanced users can use price formulas, variables, and pricing tables for dynamic pricing models.

For a simple setup, just enter a base price and preview how it appears.

For more details on creating advanced pricing structures, please refer to the documentation.

Add Form

To collect user information:

  1. Go to the Add Form tab.

  2. Add fields using blocks, for example:

    • Name block for adding First Name and Last Name

    • Email block to allow users to type their email address

    • Text block for Message

    • Acceptance block for consent checkbox for GDPR/DSA compliance

All form elements can be rearranged via drag-and-drop.

Enable the contact form and configure Email Settings to receive submissions. All data will be stored in the Orders section.

To learn more about the different types of form blocks, please refer to the documentation.

Share 

Share your configurator from the Share tab:

  • Copy the unique HTML embed code.

  • Paste it into your website (e.g., in a WordPress HTML block).

  • Adjust iframe size as needed.

You can also:

  • Enable Augmented Reality.

  • Integrate with eCommerce platforms.

  • Connect via API to third-party services.

The below video provides a general set of practical guidelines to help you quickly get started with building your own configurator.