Documentation

Learn to create products in 3D

DOCUMENTATION

1
Summary

3 Introduction
Getting Started
4 Create an account

5 Prepare 3D Models

Learning the App

7 Dashboard

7 My Account

9 Products

125 Materials

130 3D Assets

133 Orders

134 Integrations

2
Introduction
Welcome to the Simplio3D Documentation

Here you will find all the information you need to properly build your 3D product configurators.

The documentation covers 2 main sections: Getting Started and Learning the App. The
Getting Started section covers the registration process and some information on how to
prepare your 3D models for the web application. In the Learning the App section, we cover all
the information you need to create 3D product configurators and 3D product views.

Simplio3D is built to allow anyone to create and embed a 3D product configurator without
special skills. In the documentation, we cover all the features that the web application has to
offer such as: importing and managing 3D models, creating materials, creating product
configurators with options, restrictions, pricing structure, submission forms and finally
embedded in your website, you can also find information about integrations and the
Augmented Reality part of Simplio3D.

3
Getting Started
Key things to know before you start using the app

The platform also allows users to create 3D product views without options and prices. The
process is much simpler and is detailed in the 3D Product View chapter.

In the documentation we will cover the whole process and make it as clear as possible for the
user. Feel free to make suggestions and help us improve the platform.

Create an account

Simplio3D comes with 3 account types: Starter, Pro and Enterprise (the custom version). For a
new user, this might get a little difficult in terms of deciding which type of account is the best fit.
It really depends on the requirements, how many configurators you plan to build, how many 3D
assets you estimate to manage, what kind of options and prices your products have? These
might be difficult questions to answer, so if you don't know which option is best, you can
always select the Starter plan or contact us directly for a talk.

The Starter plan includes almost all the standard features that the platform can offer, the best
option to test the power of Simplio3D. The Pro plan allows you to work with more 3d assets,
configurators and have dedicated support. Please note that you can cancel, upgrade or
downgrade your account at any time without any obligation.

But Simplio3D doesn't end with the Starter & Pro plans, the platform can be much more than
that by expanding its capability through a custom version in the Enterprise plan. This option is a
great fit for users that want to scale their 3d configurators and want more flexibility from the
platform. Using the platform, we can easily customize the front-end, add inventory and bill of
materials and integrate with internal systems at an advantageous cost and fast delivery time.

Do not hesitate to contact us for any question you have and let us help you make the best
decision in choosing the right subscription plan.

4
Getting Started
Key things to know before you start using the app

Prepare 3D Models

The platform relies on 3D models to build product configurators and product views in real time.
Users before starting to build configurators need to procure their 3D models before anything
else.

Currently, Simplio3D allows users to import 3D models in: .GLB, .GLTF and .OBJ formats.
These are the most used 3D formats in the web environment and we recommend the first two
formats because they are the best optimized for the web.

Once imported, Simplio3D can read the 3D model and its structure and see what parts it is
made of, this will greatly influence how the configurator will work. We also recommend that all
3D models have UV mapping for a correct placement of materials, especially those with
textures. This will be discussed in more detail in the 3D Assets chapter.

3D Model Structure

The structure of a 3D model will greatly affect the overall logic of the configurator inside the
platform. Therefore, it is very important that the 3D model of the customizable product is
structured into the correct key parts that form the product as a whole. For example: If your
customized product is a kitchen knife, depending on the degree of customization we can make it
from 2 parts: blade and handle or from more than two parts and subparts. We can have a
product made from as many parts as needed. This will be discussed in more detail in the
following chapters.

UV Map

UV mapping is a critical requirement if you plan to use textures, before uploading a 3D model
inside the platform and using it in a product configurator or 3D viewer. UV coordinates applied to
an object allow the user to correctly apply materials when creating the product configurator or
3d viewer. Please refer to this link for more information.

5
Getting Started
Key things to know before you start using the app

3D Model Optimization

As these files will be rendered in real-time directly from an internet browser, it is very important
that prior to import, the LOD (Level-Of-Detail) is checked and possibly optimized if necessary.
3D models are made of polygons and this shows how detailed it is, therefore how complex the
structure is, as the more detailed it is the more it affects rendering performance.
Therefore, there are all kinds of techniques where the number of polygons can be reduced
without affecting the rendering quality.
All 3D models must be centered (0 - x,0 - y,0 - z) before being loaded onto the platform.

Where can I get my 3D models?

If your company has the CAD version of the products they sell, then half the way is already
done. Typically, these CAD files are most often found in SolidWorks .step, .stl format. These
CAD files will need to be converted to the appropriate format using specialized CAD software
such as: Blender, Sketchup, Rhino, etc.

If you have someone in your company who is skilled at working with CAD files and converting
them to different formats, it may be better to assign them this task.

For those unfamiliar with CAD files and 3D models in general, the best way to get the necessary
files is to outsource the work of a 3D artist who can help you reproduce and prepare the items
for the platform. You can also contact us and we can do this for you.

Another good source where you can get the necessary files are online 3D libraries and they can
be found both free and paid, such as TurboSquid and 3D Warehouse.

For more advanced product configurator

If you are trying to build a furniture configurator, such as for a table, cabinet, wardrobe, or a
construction configurator, such as for a shed, carport, garage, or roof, where you may need to
allow users to change the size. If this is the case, the 3D model may require additional
preparations, which are explained in more detail in the chapter Sizing: Keep the proportions.

6
Learning the App
User manual to create products in 3D

Dashboard
The dashboard is the first page users will see every time they log in. This is a passive page and
does not offer any key functionalities. From the Dashboard you can access the Quick Tour
video, highly recommended for new users, documentation, manage your profile and
subscription settings and be able to submit a ticket. Also, under these 4 widgets, you can have a
preview of your latest Orders, Products, 3D Assets and Materials.

My Account

Users can check and update their account details from the top left screen. The account profile is
organized into 2 tabs: Profile and Subscription Plan.

7
My Account
Profile, subscription and billing details

Profile

Users can update their Name, Email address and change their Password.

Subscription Plan

Users can check and update the subscription plan details such as billing and be able to Cancel,
Downgrade or Upgrade.

8
Products
Add and manage product

Products

The Products section is the "brain" of the app where the magic happens. From here users can
create product configurators and viewers using 3D assets and materials.

Currently, the standard Starter and Pro subscriptions allow users to create 2 types of products:
configurators or product viewers. This chapter will cover the 6 major steps in creating the
configurator: Select Template, Add 3D Models, Create Options, Pricing, Add Form and
Share.

9
Products
Add and manage products

In the Products listing page users can add new products, edit existing ones or remove them.

New Product

In the Products listing page we have the blue "Add Product" button in the top right corner from
where users can add new products.

Once clicking "Add Product", the user will be prompted to enter a name and select the type of
product they want to create. By default, the "Configurator" mode is selected, but the user can
also select the "Viewer" mode, which is covered in detail in the Product Viewer chapter.

Once clicking 'Save' it will create the new product and return back to the Products listing page.

Select Layout

The first step that determines the overall look of the configurator is "Select Layout", where users
can select from 8 different layouts.

10
Products
Add and manage products

Depending on your configurator, not all layouts may be suitable for what you need. For example,
if you have a lot of options for users to choose from, we recommend layouts with options on
either the right or left side of the screen. If you only have a few options you can use "Steps"
sections (discussed later in this chapter) with one option per step, for example, the horizontal
layout block (2 or 4 layout) can be a good option.

Select 3D Models

The second step is to allow users to select one or more 3D models they want to use in their
configurator. After selecting the 3d models, you can click the "Preview" button on the top right of
the screen to see them in your configurator.

11
Products
Add and manage products

NOTE: If you use more than one 3d model in your configurator, once you click "Preview" you will
notice that they all "overlap" each other. Don't worry, in the "Create Options" tab you will be able
to create options with restrictions (constraints) and hide the ones you want. This will be
discussed in more detail in Create Options > Restrictions.

12
Products
Add and manage product

Create Options

This is the key step in creating the configurator. Here you will be able to create the product
variants and its conditional logic options (constraints). In the standard subscription, Simplio3D
offers 11 block elements to choose from to build your configurator and are found in 3
categories:

Default

Default - the element helps set default materials for your 3D models, materials that cannot be
changed in the configurator

Layout Sections
Section - the element helps organize option sets within the layout configurator

Option Sets

Dropdown - select a variant from a drop-down button

Material - select a color variant from a material (color) category

Checkbox - select one or more variants from multiple checkboxes

Toggle - switch between 2 variants

Thumbnails - select a variant from a set of thumbnail buttons

Upload - allows users to upload images to the 3D model

Text - enter text into the 3D model, for example engraving

Numeral - the element allows setting sizes and quantities in a configurator

Arrows - select a variant from a left and right arrows button

13
Products
Add and manage products

Adding the option set is easy, select the required block element from the top right dropdown
button and click the blue "Add block" button. All the block elements are layered and found in an
order which will reflect in the configurator. You can change the order of the block elements by
drag and drop.

Default

There are situations, when configuring a product, not all parts can be customized, in other
words some parts of a 3D model may have a material that cannot be changed. Let's take a sofa
configurator, we might have some materials within the 3D sofa model that are permanent or by
default. For example, the sofa "legs" material is only one and will load by default.

Setting default materials it's easy, go to the upper right side of the screen and select 'Default'
from the drop-down button and click 'Add block'.

14
Products
Add and manage products

After clicking "Add block", the edit page for "Default" will open.

You will be able to name the block in the Title field and add variants from the "Add Variant"
button in the lower right screen. Once you click 'Add Variant' a popup window shows up:

15
Products
Add and manage products

In the popup window we select the 3D model, the parts (in our case the legs) and material
(wood) and click 'Save'. Once you click 'Save', it will create the first 'default' material and you
can repeat this process for other parts if necessary.

Click "Save" again and it will create your "default" block, from now on every time the sofa
configurator is loaded the legs will have wood material applied by default.

16
Products
Add and manage products

Now click on the blue "Preview" button at the top right of the screen and see how it looks:

Sections

Using sections is a great way to organize your configurator layout, especially when you have
many sets of options to work with. In other words, you can divide the configurator options into
sections. Simplio3D provides 2 styles (types) of sections:

Side - allows the options to be divided into sections in the layout

Steps - allows the options to be divided into section tabs that are visible in the configurator
header

NOTE: You can also combine Side with Steps to better enrich and structure the configurator
layout. Especially when creating more complex configurators.

Side

17
Products
Add and manage products

The side sections allow you to group your options into a configurator. These sections are best
suited for left and right vertical menus, but can be used for horizontal menus in a layout
configurator.

Steps

18
Products
Add and manage products

The Steps section is another way to group your options in a configurator by creating header
tabs. Like side sections, steps are a great way to keep the configurator looking clean.

Combining both Side and Steps sections in a configurator layout

Depending on the type of configurator you want to build, you can use both Side Sections and
Steps Sections in the same layout.

Adding sections

Sections can be added in the same way we add "Default" blocks or option sets. The section
block is found in the "Create Options" tab at the top right of the screen, in the drop-down button.
Select "Section" and click the blue "Add block" button.

19
Products
Add and manage products

Before adding the section to the configurator layout, the platform will prompt you to provide a
title and select the type of section you want to add (Side or Steps). The section title and type
can be changed at any time by clicking the edit icon found in each section block.

Once added, it will be visible at the bottom of the block list and you can drag and drop it in the
order you want.

NOTE: Any option set or section found below the newly added section will create a tree view to
better display the hierarchy of all the options in the configurator.

Dropdown

20
Products
Add and manage products

When you add blocks to a configurator, in standard subscriptions, the platform offers 9 types of
option sets. One of them is the "Dropdown" button, everyone knows how a dropdown button
works, when you click on the button a scrolling list of options (variants) is displayed and users
can select the desired one.

Add dropdown button

The way to add an option set is the same for all types, in other words, in the "Create Options"
tab you have a drop-down button on the top right of the screen where you can Add blocks. Find
and select "Dropdown" and click the "Add block" blue button to add to your configurator.

Before being added to your block list, the platform will prompt you to first define your new
dropdown button. We need to provide a Title and add Variants to create a 'Dropdown'.

21
Products
Add and manage products

When you click the blue "Add Variant" button in the bottom right of the screen, a pop-up window
will open where you can create the first variant in the drop-down set of options.

First screen:

22
Products
Add and manage products

There are 5 parameters where you can define a variant:

-​ Title - name your variant inside the dropdown button

-​ Variant Name - this name will not be visible in the configurator, it will be used only for
internal purposes

-​ Select 3D Model - choose one 3d model you want to use in this variant (for example a
3d bike)
-​

-​ Select 3D Parts - choose the 3d parts you want to be affected by this variant (for
example frame part of a bike)

23
Products
Add and manage products

-​ Select Material - choose a material that the configurator will apply once the variant is
selected (for example yellow color for frame)

24
Products
Add and manage products

NOTE: Please note that not all parameters are mandatory, for example depending on the
variant type you can skip the Material or not. In the example above we are creating a color
variant, so we need a material.

Once you click 'Save' the first variant will be visible inside the Dropdown option set:

Repeat the process and add as many variants as you need (for example add another variant
named ‘Red’). After clicking the 'Save' button it will create the dropdown button.

Once the new drop-down option set is added, it will be found last in the block list as shown in
the above image. You can drag and drop anywhere in the list and reflect in your configurator.
The dropdown button can be found anywhere along the options bar, including outside of a
section. Now click the ‘Preview’ button and see how it looks on your configurator.

25
Products
Add and manage products

Material

Material option set is a fast way to create color/material variants for your configurator. If your
product has color options the material type option set would be the correct way, however setting
the color options using the material block is not the only way to do it, but it is definitely the
fastest way to do it.

Add material option set

Adding a material block is done the same way we add other types of option sets. Go to the
"Create Options" tab and click the drop-down button on the top right of the screen and select
Material. After selecting the Material, click "Add block" to add it to the list of blocks in the
configurator.

26
Products
Add and manage products

Before adding Material to the blocklist, the platform will ask you to define it by writing a title and
add the first variant.

After clicking the blue "Add Variant" button in the bottom right of the screen, a pop-up window
will appear with the variant parameters. Also you can select the style of the button, hide/show
title and thumbnail size.

27
Products
Add and manage products

There are 5 parameters where you can define a variant:

-​ Title - name your variant inside the material option set

-​ Variant Name - this name will not be visible in the configurator, it will be used only for
internal purposes

-​ Select 3D Model - choose one 3d model you want to use in this variant (for example a
3d shoe)

28
Products
Add and manage products

-​ Select 3D Parts - choose the 3d parts you want to be affected by this variant (for
example parts from a shoe)

29
Products
Add and manage products

-​ Select Material - choose a material category (not an individual color) that the
configurator will apply, the app will automatically generate color variants found in that
category.

NOTE: Adding variants in Material block is slightly different from other types of option set.
Having this said, this means that Material option set does not allow users to select one color but
a category. All materials found in that category are becoming variants within the Material option
set.

In order to properly set a Material option set, you will need to create the material category and
its materials in the Materials section. For more details on this please see the Materials chapter.

30
Products
Add and manage products

Once you've chosen your material category, click "Save" and you'll see the first variant added to
the Material block. You can repeat this process to add more variants.

Now click "Save" again and click the "Preview" button on the top right screen to see what the
configurator looks like.

31
Products
Add and manage products

Checkbox

Each checkbox represents a variant, and the distinct feature of this type of option set is the
possibility to select more than one variant from the same option set.

To add an option set checkbox type, you need to click on the "Create Options" tab and at the top
right of the screen, select the option set 'Checkbox' type found in the drop-down button.

After selecting the checkbox, click the "Add block" button next to the drop-down to add it to the
block list. Before it is added to the block list, you must define the set of options for the check
box.

32
Products
Add and manage products

The app will prompt you to assign a title and add the first variant to the set of checkbox
options, also you can hide or show the title. After clicking "Add variant", a pop-up window will
appear.

Each variant in an option set allows selection of a 3D model, 3D part(s) and material. Please
note that they are not required to be selected (are not mandatory in order to create a variant).
You can create these checkboxes without an effect on the 3D object, so it is not necessary to
assign it a 3d model or material, only if needed. In the below example we will skip this by
directly clicking the 'Save' button.

33
Products
Add and manage products

Now click on “Save” again and you will find the newly added option set at the bottom of the
block list.

34
Products
Add and manage products

Your configurator is ready for a preview. You can repeat the process and add as many checkbox
variants as needed for your configurator. You can add restrictions and prices and it will be
detailed in the relevant chapter of this document.

Toggle

Toggle option set allows users to switch between 2 variants. There will be some cases where
you will need this type of option set, such as hiding or showing things in your configurable
product, but you can use this toggle for different non-visual options, which does not reflect a
change in the 3D view.

In the below example, we will create a 'toggle' button to show or hide the available colors for
chairs. Adding a Toggle block is done the same way we add other types of option sets. Go to
the "Create Options" tab and click the drop-down button on the top right of the screen and select
Toggle. After selection, click "Add block" to add it to the list of blocks in the configurator.

35
Products
Add and manage products

Before adding Toggle to the blocklist, the platform will ask you to define it by writing a title and
add the first variant. You can also hide or show the title in the front configurator.

After clicking "Add variant", a pop-up window will appear where you define your variant.

36
Products
Add and manage products

In this variant we will say that the colors for chairs are visible, therefore we call this variant
"Show" in both Title and Variant Name, then we click "Save" located at the bottom right of the
screen. We repeat this process by adding another variant within the Toggle option set, naming it
"Hide". No need to select a 3D model or material since it will have a restriction linked with
‘Materials’ option set already added.

37
Products
Add and manage products

Click the "Save" button and see both variants inside the Toggle button edit page.

NOTE: You can add only 2 variants in one Toggle button.

Now click "Save" in the bottom right screen and you can see the toggle button in the block list.

Click "Preview" to see how it looks in your configurator.

38
Products
Add and manage products

IMPORTANT: As you click on the 'Toggle' button in 'Preview' mode, you will find that it does not
hide the chair colors as you will need to add a restriction in the chair color options (Material)
linked with the new Toggle button, in this case the 'Show' variant. This will be discussed in more
detail in the Restrictions chapter.

Thumbnails

The "Thumbnails" option set creates, as the name makes clear, selection buttons using images.
In other words, for each variant in a set of "Thumbnails" options you can attach an image. This
is another way you can create buttons in the configurator, although in the 'Materials' option set
the thumbnails are generated automatically, here you can upload your own images.

39
Products
Add and manage products

To add a "Thumbnail" option set, go to the "Create Options" tab and select the "Thumbnail"
option type from the drop-down menu found in the upper right side and click "Add block" to add
it to the block list.

Before adding the set "Thumbnail" option to the block list, the platform will prompt you to define
it.

40
Products
Add and manage products

It is mandatory to add a "Title" and at least one variant in order to be able to click the blue
"Save" button in the lower right screen and add the new option set to the block list. Please note
that you can always return to this option set and edit the title, change the button style and
thumbnail size, and hide or show the title until you have the desired result.

Now, click the 'Add variant' blue button found in the lower right side screen and add your first
Thumbnail variant.

In Simplio3D, the variant is defined the same way for all option set types, with a few differences
for: Numeral, Upload, and Text option sets.

We need to give a Title and Variant Name (this must be unique), for the rest: Select 3D Model,
3D Parts and Material is not mandatory to create the variant unless you want this variant to be
reflected in the 3D view. In our case we will leave this variant with only Title and Variant Name
since we will use Restrictions to enable other options. Click ‘Save’ to create the first variant.

41
Products
Add and manage products

Now, repeat the process and add as many variants as needed.

42
Products
Add and manage products

The unique feature of the thumbnail option set is the "image" icon found in each variant. You
can click on each image icon and upload your own image to be used on the buttons.

In this case, we will use some ready-made images representing different areas for the boxing
gloves.

43
Products
Add and manage products

NOTE: The current standard subscriptions support 3 thumbnail sizes: 25x25, 35x35 and 60x60.
Your pictures must be square, in a 1:1 ratio so that the thumbnail image does not look
squeezed.

Now, let's click the "Save" blue button at the bottom to add the new thumbnail option set to the
block list.

At this stage we can click on the "Preview" button at the top right of the screen to see what the
configurator looks like.

44
Products
Add and manage products

Arrows

We covered in previous chapters how to create option sets using: Dropdown, Material,
Checkbox, Toggle and Thumbnails. The way to create option sets and add variants is pretty
much the same on all of them, as noted. "Arrows" is another way to add a set of options and the
only difference compared to the previously mentioned ones is again, how they work in front.
Instead of using a dropdown menu, thumbnail buttons, toggles or checkboxes here we have 2
arrows, one to the left and one to the right. By clicking the left or right arrows, you can swap
between the options.

Go to the "Create Options" tab and select "Arrows" from the dropdown button on the top right
screen. Click the "Add block" button to add the new option set to the block list.

Before adding the "Arrows" option set to the block list, the platform prompts you to define it.

45
Products
Add and manage products

You must have the Title option set for Arrows and add at least 2 variants. Once you've given a
title, click the blue "Add Variant" button on the bottom right of the screen. Add your first variant.

46
Products
Add and manage products

In this pop-up window you will define the variant in the same way as the other option set types.
We must have a Title and a Variant Name (which must be unique). In this case, this variant will
represent a color variant for my 3D bottle. So I need to select the assigned 3D model in "Select
3D Model" and then the 3D part I want to color is found in "Select 3D Parts".

The last parameter is the material found in "Select Material" where I can directly select a color
or filter by category and then select a color. In this case, I chose a pink glass material.

47
Products
Add and manage products

Click 'Save' and add your first variant.You must add at least 2 variants to be able to save the
"Arrows" option set to the block list.

48
Products
Add and manage products

You can repeat the above process to add more colors. Please note that colors/materials are
made in the Materials section.

NOTE: Each variant listed above has a check button where you can set the default selection. In
other words, the first option is selected once the configuration is loaded. This is found on most
option set types.
Now click the "Save" button at the bottom right of the screen to add the option set to the block
list.

49
Products
Add and manage products

Click the "Preview" button on the top right screen to see what it looks like in your configurator.

Upload

Before adding the "Upload" block to the list of blocks, it is mandatory that you have the correct
UV coordinates applied to your 3D model. The UV coordinates or UV map helps determine the
location (area) in the 3D model (the 3D part) where you want customers to upload their image.

The UV map is applied to 3D models to correctly apply materials, discussed in more detail in the
'Prepare 3D models' chapter, but it also helps determine the area where you want customers to
upload an image.

If you are not familiar with these concepts and do not have someone on your staff who can help
you, you will most likely need to hire an artist or 3D modeler to help you with this work.

50
Products
Add and manage products

For example, you have a 3D jersey shirt and you have some areas on the surface where you
allow customers to upload their images. In a 3D editor (i.e. Blender, 3D Studio Max, Rhino, etc.)
you can set this by creating a UV map for your 3D model as shown in the image below.

For the jersey, you can see a yellow square applied to the chest, this means that the UV
coordinates for applying the uploaded image are set to that area. But, you can set a UV map to
any location you want, it all depends on your configurator. The UV coordinates also represent
the size of the image that will fit best when the client uploads one. You may need to go back and
forth with the 3D model until you have the desired UV map and then proceed to complete the
product configurator. The UV map must be square (1:1 ratio) so that the loaded images do
not appear flattened.

Add ‘Upload’ block

51
Products
Add and manage products

Once you have your 3D model ready, go to the "Create Options" tab and select the "Upload"
block from the drop-down button on the top right screen and click the "Add Block" blue button.

Before adding to the block list, the platform prompts you to define the "Upload" block by giving a
title and adding the first variant.

52
Products
Add and manage products

Adding a variant to the "Upload" block is done almost the same as the other types of option sets
except for the "Upload Settings" step. Each variant needs a Title, Variant Name, Select the 3D
Model and 3D part.

After selecting the 3D model, as with the other types of option set, you can select the 3D part
where the image will be applied. If the 3D model has more than 1 part, you must select that part
where the UV map is created in the 3D editor. In our case, our UV map is located on the "front"
side, and the UV map is located around the chest.

53
Products
Add and manage products

In the 'Upload Settings' the platform allows you to enable/disable 3 features in the front
configurator:

●​ Move - add 4 arrow buttons in front to move the image on the surface
●​ Scale - add 2 (+/-) buttons in front for customers to scale the image
●​ Rotate - add 2 buttons in front (rotate left and right) for customers to rotate the image

NOTE: By default, these settings are disabled. Depending on your configurator, you can enable
or keep them disabled.

Click "Save" to add the variant to the "Upload" block.

54
Products
Add and manage products

Click "Save" to add the 'Upload" block to the block list.

Now, click the "Preview" button at the top right of the screen to see a preview of the
configurator.

55
Products
Add and manage products

Text

UV Mapping

The same as found for the 'Upload' option set, before adding a 'Text' block into your
configurator, requires an UV map(s) applied to the 3D model(s), so that the app knows where to
apply the text. The UV map can be applied in any 3D editor. The UV map must be square (1:1
ratio) so that the text is not squeezed. When text is applied, it starts to appear on the 3D model
in the center of the UV map (square).

NOTE: We recommend that the area where the text will appear is a separate part by detaching
the mesh from the main 3d model.

56
Products
Add and manage products

You may need to go back and forth until you find the best UV map for your 3D model. You can
import different versions, try them on the configurator.

Add 'Text' block

In our example we have an engagement ring to which we have already applied 2 sets of
options: Stone and Metal (materials). Now, we need an engraving option where customers can
put a custom text on the ring.

Inside the configurator page we click on the "Create Options" tab and click on the drop-down
button on the right where we can select the type of option block. In this case, we select the
"Text" option block to add the engraving option for the ring. Now click the 'Add block' button.

57
Products
Add and manage products

Before adding to the block list, the app will prompt the user to enter a name for the "Text" block
and add a variant.

58
Products
Add and manage products

After clicking the "Add Variant" button, a pop-up window will start to define the "Text" variant. To
define the "Text" variant, you must type a Title and a Variant Name (the variant name must
always be unique & its not visible in the configurator) after which you must select the 3D model
where you want the text to appear in the front configurator. In this case we have only one 3D
model assigned for this configurator.

In "Select 3D Parts", as in the other types of option set, the user must select the 3D part where
the text will appear. In this case we have a separate mesh, part of the ring (with UV map
applied) called 'Engraving'. The 3D part and its name "Engraving" are made in the 3D editor
before uploading.

59
Products
Add and manage products

The last step in defining the "Text" variant before adding it to the options block is "Text
Settings".

60
Products
Add and manage products

In "Text Settings", users can set how the Text function will work in the configurator:

●​ Users can enter a default text (loaded by default when the configurator starts), in this
case we have "Happily Ever After" for the ring. Customers using the configurator will be
able to enter any other text they want.
●​ Font size, set the right font size for the configurator
●​ Users can select a default font color (loaded by default when the configurator starts), in
Materials users can create a special category for it. In this case, we have 6 colors pulled
from 'Logo (Boxing Gloves)' category and we selected Orange color as default font color.
Customers using the configurator will be able to choose a different color from the 6
available. As a creator you can add as many colors as you want in the Materials section.
●​ Select the font style. The app has over 200 different fonts to choose from and use by
default, but you can also let your customers choose the font style they want in the front
configurator.

Scrolling further down in "Text Settings" we find the following:

61
Products
Add and manage products

●​ Move - add 4 arrow buttons in front to move the text on the surface​
Comment
●​ Scale - add 2 (+/-) buttons in front for customers to scale the text
●​ Rotate - add 2 buttons in front (rotate left and right) for customers to rotate the text
●​ Custom color - when enabled, allows customers to select a color from the Color Picker

Now, click ‘Save’ to add the ‘Text’ variant in the option block.

Click "Save" again to create the new text block and click the blue "Preview" button at the top
right.

62
Products
Add and manage products

You can go back and edit the settings, save and then click "Preview" again until it suits your
needs.

Numeral

The Numeral option set is the most complex type of option and requires a bit more knowledge
and work to build one correctly. With Numeral you can build 3D configurators that support
quantitative values ​such as: size, temperature, pressure, quantity and more.

The option set is good when you want to resize an item, allow users to select a quantity, enter a
temperature or pressure for the item, and these parameters can be linked with other options
using constraints.

63
Products
Add and manage products

3D Model Preparations

For Numeral, depending on the configurator, it requires some specific 3D model preparations.
In general, we need to structure the 3D model into the correct parts so that we allow a numerical
parameter for the right part or parts. For example a table we allow to resize only the upper part
of the surface and not the legs. In general, it is good practice for all 3d parts that will be resized
to have the pivot at center.

In other cases, such as quantity, temperature, or pressure, it may not need to do anything to the
3D model. We have other situations where we resize a 3D part and the entire 3D model
will follow keeping the overall proportions. Examples: windows, doors, tables, cabinets, etc.
This will be discussed in a separate subchapter 'Sizing: Keep the proportions' where we learn
how to set them, starting from the 3d modeling stage to building the configurator.

Add ‘Numeral’ Block

64
Products
Add and manage products

Once you have the 3D model ready and uploaded into the platform, we can add the first
Numeral block. The Numeral option set block is added just like the other option blocks.

In this example, we have a table configurator with default materials applied and now we need to
add the option for users to set the size of their table top surface. But this could be applied to
other cases.

After selecting the Layout and 3D model, click the "Create Options" tab to add the Numeral
block. Click in the upper right screen on the drop-down button where we can select the block
type. After scrolling down and selecting the "Numeral" option, click the "Add Block" button.

After clicking the "Add block" button, the application will prompt the user to define the option set
and add the first variant. Enter a Title, select the Input Style and add the first variant from the
blue button on the bottom right of the screen "Add variant".

65
Products
Add and manage products

When you add a variant, a pop-up window will appear and the application will prompt the user to
enter the variant Title, the Variant Name (which must be unique), select the 3D Model, select
the 3D Parts (in my case the top table surface) and choose the Numerical settings that are
specific to this type of options block.

66
Products
Add and manage products

In this case, my first variant is "Width" (I put in the Title), this will allow the surface table to be
resized. Further, I select the 3D table and the 3D part I want to resize with this variant.

In this example, I have a table made from 9 parts but I want to resize only the 'surface'
component, therefore I select 'surface'.

Next we go through the last step, the "Numerical" settings, where we define exactly what the
"Width" variant will do.

67
Products
Add and manage products

List of Numerical settings available in the platform:

-​ Type of value - there are 2 options in the dropdown: 'Quantity' and 'Size'. In our case we
use 'Size'.
-​ Unit - For quantity we have pieces (pcs), pounds (lb) and kilograms (kg). For size we
have: mm, cm, m, inches, feet, degree and PSI. In our case we will select 'cm'.

-​ Default value - in this field we mark the default value, which means that the platform will
take the actual size of the 3D model when it was loaded on the platform. In our case, the
width of the 3D table is approximately 190cm therefore we type 190. Every time the
configurator will be loaded the width value will be at 190cm.
-​ Increment - allows configurator users to change the size in increments. In this case, we
will use a 10cm increment but you can use any number that fits your configurator
requirements.
-​ Minimum value - we set the minimum value for the 'width'. In this case we added
120cm.
-​ Maximum value - we set the maximum value for the 'width'. In this case we added
300cm.

68
Products
Add and manage products

-​ Position parts - this has to do with another subchapter explained in: Sizing: Keep the
proportions. This is for more advanced resizing features. In our case we don’t need to do
anything here.
-​ Scaling on - here we select from the dropdown the axis along which the 3d part(s) will
'stretch'. The platform allows you to set along the [x], [y], [z], [x, z] and all axis (full
scaling). In our case the component 'surface' will stretch along the 'x' axis for the width
variant.

69
Products
Add and manage products

After going through the steps, we are ready to click "Save" and add the first Numeral variant.

Click "Save" again to create the Numeral option block.

Now, the configurator is ready for a preview. Just click the blue "Preview" button on the top right
of the screen and test the configurator.

70
Products
Add and manage products

Now, the configurator is ready for a preview. Just click the blue "Preview" button on the top right
of the screen and test the configurator.

Sizing: Keep the proportions

Instruction for Positioning Mesh Centers and Models for Correct Scaling and Position
Adjustment

This is a more advanced subchapter that requires additional skills in 3D modeling to properly
prepare a 3D object for resizing using the Numeral option set block with Position Parts. In case,
if you are not familiar and do not want to delve deeper into learning how to properly prepare the
3D model, we always recommend that you turn to a professional, a friend or coworker, or hire a
3D artist/modeler for this job, using well-known freelance platforms where you can post the job
and wait for the offers.

Preparing 3D Models

If your configurator needs to allow sizing, for example setting width, length and height, you will
probably need to prepare your 3D model before you upload to the platform. Depending along
which axis the 3D model will stretch (resize), the platform needs to know which parts will stretch
and which don't. For example, for a table, we might need to set the table top surface to
stretch along the x-axis (e.g. width), but the table legs should not, they should keep the
same proportions, but at the same time keep their position in relation with the table top
as the size of the table top surface changes. Please find an example below:

71
Products
Add and manage products

As we can see in the image above, the edges for the table surface are cut because we don't
want to distort the shape of the top surface if it has a shape other than rectangular when we
resize. Basically, we separate the parts that stretch and the parts that don't stretch, in this case
the margins which might not have a rectangular shape (for example, edges could be rounded).
For the main top surface the pivot is found right in the middle of the 3D part (see pivot nr. 1 in
the above image). This usually is for the stretching, in this case the width and length.

Then, in the image above, we have 2, 3, 4, 5, 6 more numbers marked for the other table parts,
and we see where the pivots for the edges are in relation to the top of the table. If your table top
is rectangular, then, you don't need the 2, 3, 4, 6 edges, only for 5 the legs. As you can see,
their pivots/centers are added to the corners near the edge of the main table top. In this case,
the only parts that will stretch are the ones going along x-axis (table top and side edges),
the only parts which they will never stretch are the corners. The rest of the parts that
don’t stretch will only translate along the axis but not stretch. This is a key feature that will
assure we will keep the proportions and positions of the table intact when we resize.

72
Products
Add and manage products

This can also be applied to fixed frame windows.

IMPORTANT: Remember to add the mesh/part/object position when using the Numeral option
set in the group position and not inside the groups/nodes because the platform doesn't work
with groups.

73
Products
Add and manage products

A few pivots found on a double-frame window with hinges.

74
Products
Add and manage products

But you can apply this to cabinets, wardrobes, sheds, garages, carports and other objects that
you can resize. Depending on the complexity of the configurator, this might be a back and
forward 3d editing until you have the right 3d model for the configurator.

IMPORTANT: It is essential to edit the pivots as explained above to correctly resize a multi-part
3D object in the configurator. Before uploading to the platform, you can check the pivots (central
meshes) in the three.js editor here.

Setting up the size input with Numeral option set

Once you have prepared the 3D model and its pivots, you are ready to upload and have your
first test. In the documentation, we continue with the table and set the input options for width,
length, and height. We create the configurator, select the layout, assign the 3D model and in the
'Create Options' tab we add the Numerals option set just like we added in the previous chapter.

After clicking "Add Block", the application will ask us to define the Numeral option set by adding
a "Title", select "Input Style" and create the first variant, in our case "Width".

75
Products
Add and manage products

When we click on "Add Variant" a pop-up window will appear where we need to define the first
variant, "Width". In the title I enter 'Width' and the same in the Variant Name field, I will select
the 3D model that we will use in this variant, in this case the 3D table.

76
Products
Add and manage products

Just like in the previous chapter, we click on the "Numerical" section and start selecting "Type of
value", here we select Size; Unit of measure, here we select cm; type "Default value" for the
width, in this case the table width is approximately 180 cm wide.

Additionally, we set the increment (type 1 cm or any other number), Minimum value (type 90
cm), Maximum value (210 cm) for this example.

77
Products
Add and manage products

Next in 'Position parts', we need to select the parts that will not stretch along the x-axis (the
width). In this case we will select the corners, the legs and the edges that are perpendicular with
x-axis in z direction (the length or depth of the table).

The last setting is where we assign which direction this variant will resize in. In this case we
select the x-axis for the width and if you want to create a length or depth variant it would be the
z-axis, and for the height the y-axis.

78
Products
Add and manage products

You can create 3 separate variants in the Numeral block that cover all 3 axes: width, length and
height. Now, click "Save" to add the first numerical variation.

Now, click the "Save" button located on the bottom right of the screen to create the Numeral
block. Click "Preview" to see the result.

79
Products
Add and manage products

You can repeat the same process, but only to select different position parts and axes for length
and height. Once this feature is mastered, you can apply it to virtually any type of object, for
example, sheds, carports, garages, roofs, windows, doors, cabinets and many other resizable
objects.

Restrictions

In previous chapters, we covered how users can add different types of option sets. Depending
on the configurator built, in each set of options we have a number of variants that we can add.
But all of these variants found in all of the option sets I added can be linked together depending
on the constraints that the product configurator I'm building will have. For example, if I choose to
select teacup model 1, then I may have one set of colors available, but if I choose teacup model
2, then I may have a different set of colors available for that model. I can achieve this by linking
the variants together.

In short, each variant can be linked to one or more variants to create a restriction.

80
Products
Add and manage products

To add a restriction, click the button with a "chain" icon located in the right bar in each variant.

NOTE: If the restriction icons have an asterisk *, it means that a restriction has been created for
that variant, as shown in the screenshot above.

Except for "Default" and "Section", all option types have a restriction button displayed on each
added variation. Clicking the restriction button will open a pop-up window with settings to define
the restriction for the variant.

81
Products
Add and manage products

In Simplio3D, all restrictions share the same general expression:

Option is: Hidden by default, becomes visible, When: All following rules are true; Type of
Restriction > Options set

For the example found in the image above, this means that the color variant "palm_back_plain"
will be hidden by default, becoming visible only when all of the following rules are true: when
users select the "plain" material type it will unhide the 'palm_back_plain' color. In other words, if I
select Plain material I will see the 'palm_back_plain' color option.

As a user, you just need to select the ‘Type of restriction’, ‘Option set’ and the variant(s) upon
which the variant will be linked.

The platform works with 2 types of restrictions:

●​ Has one or more variants selected from - an example explained above

●​ The variant value is between min and max - this type of restriction only works with
numeric variants, for example restriction within a range.

Please find below restriction examples:

Example using 'Has one or more variants selected from' type of restriction.
Example using 'The variant value is between min and max' type of restriction.

82
Products
Add and manage products

'Has one or more variants selected from' type of restriction.

Creating this type of restriction between 2 or more variants is the most commonly used method
and covers most of the requirements that a product configurator may have. You can hide or
unhide a material (color), 3D part or 3D model depending on the type of the option set and how
each variant is defined.

NOTE: A restriction will affect the variant depending on how the variant is defined, as indicated
in the image above.

Let's take the ring configurator example below:

83
Products
Add and manage products

We have a ring configurator made from 2 ‘Thumbnail’ blocks: Metal and Stone. We already
learned how you can add a Thumbnail option set in another chapter. For Metal we have 3
variants and for Stone we have 4 variants. I want to create a restriction when I select White
gold (the first metal variant) to have only 2 stone options: white and black diamond.

How will I proceed? First, we access the "Create Options" tab and see the 2 added Metal and
Stone option set blocks.

84
Products
Add and manage products

In this case, we have 2 sets of Thumbnail options and the constraint effect will be in terms of
which materials (color) will be visible and which will not. Since, I mentioned that my restriction
will be on Stone depending on which Metal I select, I will need to click on the Stone option block
and apply restrictions to the amethyst and sapphire variants or whatever variants you need to
restrict depending on the configurator.

We click on the "chain" button on each of the variants to apply the restriction regarding "white"
gold.

85
Products
Add and manage products

Or

The above conditions are the same. Once I have applied the restrictions for the 2 variants, I
should have each of the "chain" icon buttons marked with an asterisk, as shown below.

86
Products
Add and manage products

To save the newly added restriction, we first click "Save" and then "Preview" for a quick test.

87
Products
Add and manage products

If we select the "White" gold, there will only be 2 diamonds, White and Black. If we change the
gold to yellow, we will have all 4 diamonds available.

'The variant value is between min and max' type of restriction

The platform allows users to add constraints to a range using the "Numeral" option block. In
other words, you can restrict the ability to show or hide options in the configurator, depending on
the input number. For example, you can have 2 extra colors: red and yellow on a cabinet only
between 100 cm and 200 cm wide.

Once you understand how to create these constraints using numerical variants, you can apply
them in many situations.

Let's take the example below on a closet storage cabinet. I want to limit the color variants to a
range in the numeric Width variant.

We have a basic 3D closet configurator with the following option blocks: Size and Material
(Colors).

We want to allow color selection only between a minimum and maximum range found in the
Size numeric block. Since this restriction will impact the Material option block, we click on it and
apply the constraint to the color variant.

88
Products
Add and manage products

We take again the regular expression, except when it comes to selecting the type of restriction.

After selecting the constraint type, we select 'Size', i.e. the Numeral option set, and click on the
"width" option to display the range.

89
Products
Add and manage products

In "Has value between" we set the minimum and maximum range in which we want to show the
"colors". In this example, we set the minimum to 200 and leave the maximum at 280 and click
‘Save’.

After clicking "Save", at this point, we have an "asterisk" displayed next to the chain icon, which
means that this "colors" variant has an added restriction.

90
Products
Add and manage products

You must save the updated "Colors" options block before clicking "Preview" to see the effect.

Once you click on the "Preview" button, due to the added restriction, by default the colors will
not be enabled (visible). Only if you change the width of the cabinet and go above 200 cm will
the color option be enabled as shown below.

NOTE: Notice that no color/texture is applied to the front doors, the texture is only applied after
the "Colors" option set is displayed. You can modify this by using 2 or more restrictions in
combination, depending on the type of configurator you have.

91
Products
Add and manage products

Add Form

For each configurator the platform allows you to add a contact form to collect data from
customers and allows them to submit their design for a quote request. Having a contact form is
optional and in some cases, such as when integrating the configurator with an e-commerce
platform like Shopify, WooCommerce or BigCommerce, there is no need for a contact form other
than the "Submit" button, which will turn into an "Add to Cart" button to redirect the order to the
e-commerce checkout protocol.

The logic behind creating a contact form is similar to the logic found in creating option sets
already discussed in previous chapters. It uses block logic, each block shares an attribute like
(name, phone, email address, text, etc.). You can add as many blocks as you want to the
contact form depending on what kind of information you want to collect from the client using the
configurator.

Users can select from the drop-down menu in the top right, where they can select the field type
and then click “Add Field” to add the block to the contact form block list.

Please find below the field blocks available in standard subscriptions:

Name - The "Name" field allows customers to fill in their name. For example, you can add 2
blocks, one for "First Name" and another one for "Last Name".

92
Products
Add and manage products

Text - The "Text" field is used for any type of field where customers need to enter their physical
address, comments, message, or anything else that may be required before submission. It can
be added multiple times with different roles to collect more information, for example one text
field for 'physical address' and another one for 'comments'.

Email - field for entering an email address.

Telephone - field for entering phone number. It can be added multiple times with different roles
to collect more information, for example one field for 'Office Number' and another one for 'Mobile
Phone'.

Dropdown - the drop-down form block is good for allowing users to select the country, city, or
answer generic questions to gather more data about the customer's requirements.

Acceptance - This block generates a checkbox with a popup text document and customers can
submit their configuration only after agreeing to terms like GDPR, DSA or any other privacy act.

Submit - Add and name the Submit button. If your configurator is integrated with an
e-commerce platform, you can simply add the Submit button and name it "Add to Cart."

Header Title - Write a custom header for your contact form, the default is "Submit Your
Information".

Confirmation - Users can customize the confirmation message when customers submit.

Please find below, how to:

Add Field - Add a field and create a contact form for the configurator.

Email Settings - Trigger emails by applying SMTP settings

Add Field

Before you start adding fields and customizing your contact form, you must first enable the
contact form in your configurator.

93
Products
Add and manage products

The Enable Form drop-down menu is located at the top left of the screen and select "Yes" to
enable the form.

Let's add the first field, usually the first time we ask for the name and in this case I will create the
'First Name' field using the Name field block.

Click the drop-down menu in the top right and select Name block, then click the blue "Add field"
button next to the drop-down menu to add the name field.

94
Products
Add and manage products

Enter your title, in this case I'll name it "First Name" and make this field required (otherwise
users can't submit a configuration) from the Mandatory Field drop-down menu. Click 'Save' and
create your first contact field.

You can repeat this process with the “Last Name” field, the same process is found for the
“Email”, “Phone” and “Message” field blocks. Your contact form could look like the one below:

95
Products
Add and manage products

Like any other contact form, we need to add a consent checkbox, and you can do this by adding
an "Acceptance" block located in the same drop-down menu on the top right.

Select the "Acceptance" block and then click the blue "Add field" button next to the drop-down
button. Once you click "Add field" before creating the block, you need to define it.

96
Products
Add and manage products

You will need to enter the consent title as shown in the image above. In the description field
enter the terms/conditions of the consent, for example GDPR/DSA policy. You will also need to
select “Required” from the Mandatory Field drop-down, which means users will have to consent
before submitting. Click “Save” to add the form block.

97
Products
Add and manage products

Finally, we need to add the “Submit” button. Go back to the drop-down menu and select the
“Submit” form block.
NOTE: The "Submit" button can only be added once.

For the "Submit" form block, you just need to type the name of the button, in this case we typed:
Request a quote. If you plan to integrate the configurator with an e-commerce platform, you will
most likely need to type "Add to Cart" or something similar that suggests that once submitted, it
will add the configured item to the cart. More information about e-commerce integration in
another chapter.
Click "Save" and add the button to your contact form.

98
Products
Add and manage products

Now, let's click the "Preview" button to see what our contact form looks like.

You can add another type of form block to customize the header title of your contact form. From
the default title: "Submit Your Information", you can enter any other title in any language using
the Header Title form block. The Header Title form block is added like the other form blocks.

The platform allows you to trigger emails once your customers submit a configuration. To do
this, you need to go into the email settings and authenticate with your email details, the detailed
steps will be discussed in the next chapter.

Email Settings

Having a configurator contact form allows you to not only submit and store data in the Orders
section, and be able to send data via API, but also trigger an email once the form has been
completed and submitted. In other words, each submission triggers an email with all the order
information: customer information, configuration summary, and price.

99
Products
Add and manage products

By default, the configurator will not trigger emails, however, you can add your own email
settings and send from your custom domain email address.

You can use the standard cPanel SMTP email settings found at most hosting providers, or
Gmail, Sendgrid, Amazon SES, Mailgun, etc.

100
Products
Add and manage products

To successfully set up your custom email address, you need the following settings:

-​ Mail Driver - Here you select the email service you want to use. SMTP is the standard
setting found with most hosting providers, including if you use Gmail.

101
Products
Add and manage products

●​ SMTP Host - here we usually enter the domain of the email address we will use. (i.e.
mycompany.com). For Gmail you need to use: smtp.gmail.com. For Sendgrid the mail
host is: smtp.sendgrid.net.
●​ SMTP Port - we need the SMTP outgoing port number that will allow the app to send
emails. This depends on the encryption type. For example for Gmail we have: Port: 587
(for TLS) or 465 (for SSL)
●​ Encryption - select the encryption type: SSL, TLS, or None. The most commonly used
is TLS. For Gmail we match the port with the encryption type: TLS (for 587) or SSL (for
465)
●​ SMTP Username - we usually enter the entire email address. (i.e.
[email protected]). For Sendgrid we type 'apikey'.
●​ SMTP Password - for the standard SMTP service we enter the password with which we
access the email inbox except for Gmail and Sendgrid.

Gmail Passwords - for Gmail service, personal account password does not work. Therefore, in
Gmail (Workspace) you need to generate an Application Password for it to work.
How to generate App Password with Google:
https://support.google.com/accounts/answer/185833

Sendgrid Passwords - if you are using Sendgrid to trigger emails from your configurators, then
the password is the API key generated in the Sendgrid account.
How to generate a Sengrid API key:
https://sendgrid.com/en-us/blog/introducing-api-key-permissions

●​ From Address - enter the email address you want to send from.
●​ From Name - enter the company name attached to the email address.
●​ Reply-to Address - enter the email address that you want customers to use when they
reply.
●​ Test Email - enter an email address to take a test.
●​ Enable DKIM - it is mandatory to confirm that you have DKIM authentication to have a
successful email test.

If you are not familiar with DKIM email authentication, please see learn more at this link:
https://www.valimail.com/blog/dmarc-dkim-spf-explained/

102
Products
Add and manage products

Pricing

The platform allows configurator builders to set the price of options. For example, if we have a
configurator that allows customers to choose the color, for each color you can set a specific
price. As customers switch between colors, the price is updated in real time. This would be a
basic example, but in the platform you can add more complex pricing, such as price groups,
price tables, variables, and use them in a pricing formula.

There are 3 key sections in the Pricing tab, discussed in more detail separately in each chapter:
Pricing Formula, Variables and Add price.

103
Products
Add and manage products

Price Formula - In the price formula we have a field that supports basic mathematical
calculation, such as: addition, subtraction, multiplication, division, and the use of parentheses.
The price formula field also supports variables that can be added anywhere in a price formula
by clicking on them in the Variables section.

Variables - there are 5 types of variables inside the platform: @total_pricing, @base_price,
@price_options, @price_table and @price_variable. All these variables can be used inside
the price formula.

Add price - From this section you will price your options using different pricing variables. The
logic in adding a price, tax or any other cost is similar to adding option sets or when creating a
contact form.

Pricing Formula

The platform has a versatile way of pricing for configurators and one of its key features is the
ability to enter a pricing formula that uses basic mathematical calculation and variables.

104
Products
Add and manage products

Example:

Teacup Configurator

Let's say we have a Teacup configurator coming in 4 colors: White, Gray, Red and Blue. Each
color will come with a different price.

In this situation we can start with a basic price, let's say for the White one the @base_price is
20$.

Base Price = 20$.

Price the options by using the @price_options variable. For each variant we have a price.
White = 0$
Gray = 2$
Red = 4$
Blue = 6$

All of the above can go in the @total_price built in variable by default.

For a red teacup the Total is $24 (base price 20 + red color 4). We don’t have Variables here
and the formula is basic.

Table Configurator

This time we have a table coming in 2 colors and able to change size Width and Depth.
@base_price = 120$

But this time, I want to create a more complex price formula therefore, I will use variables here
for both colors and size.

Add Variables

@colors (@price_variables) - ‘from options’ variable type

White - $40
Green - $48

105
Products
Add and manage products

@size - (@price_variable) ‘for options’ variable type

Width - $2 (size_number*$2) i.e. 200cm x $2
Length - $2 (size_number*$2) i.e. 160cm x $2

@sales_tax - (@price_variable) ‘custom’ type of variable

Price - 0.01 (10%)

Now, I build my price formula from variables. First, I remove the default variable @total_price.

I add:
(@basic_price + @colors +@size) + ((@basic_price + @colors +@size)*@sales_tax)

Based on the above formula, the configurator will calculate the total price.

Variables

Variables are used to set the price for options, to add taxes, shipping, labor, discounts, or other
costs that would help accurately calculate the total price. All of these variables can go into the
built-in @total_cost variable that is added by default or can be used in the price formula. To add
a variable to the price formula, click the block.

106
Products
Add and manage products

There are 5 types of variables:

@total_cost - Total cost is a built-in variable added to the price formula field by default, but
depending on how you want to build the formula, it can be removed. Total cost is calculated
from all variables added in the Variable section, except the @price_variable. There are no
settings for this type of variable.

@base_price - This variable allows you to set a base price for your customizable item. This
variable is added by default and cannot be deleted. If there is no base price, simply leave the
field blank or enter 0.

@price_options - Price your options, price your variants. This variable allows users to set the
price of each option set and its variants, regardless of type. You can set the price for each color,
checkboxes, uploads, text, etc. In a price_options variable, you can set the price for each color
(except when using Material block set), this will be called a price group, in other words when
each variant in the option set has a price.

@price_table - Pricing tables, as the variable name suggests, create tables between 2 option
sets. For example, the platform allows you to set the price between 2 option sets: Width and
Height, but you can use almost any type of option set with more than one variant.

@price_variable - Price variables are a different way to price option variants, and the difference
from other types of variables is that this allows you to create individual variables for taxes,
shipping, labor and have them in the price formula. These variables work only when added in
the pricing formula, and don't fall in the built in @total_cost. You can also add a Numeral price,
entering a unit price that will be multiplied by the Numeral parameter that is selected. Also,
most of the time using price variables will be the fastest way to set the price of the
configurator.

Add price

We will set the price of the configurator using the available variables detailed in the previous
chapter. In this example, we will use a basic table configurator with size and color parameters.

107
Products
Add and manage products

We will first add a base price, an amount from which the total price will be calculated. For this,
we will use the @base_price variable which is added by default and cannot be removed. The
base price can be zero or any other positive number. In this example, my price for the table will
start from $300.

108
Products
Add and manage products

Type "300" in the "Base Price" field and click "Save" on the bottom right screen.

After we've added the base price, we can click the "Preview" button to see that the total price is
$300.

Each color has an additional price, so I need to add another variable to help me calculate the
additional price on top of the base price we already have. We can do this with both
@price_options and @price_variable. In this example, we will use @price_options.

109
Products
Add and manage products

Select "Price Options" and click "Add Price" to define the variable. Enter the name of the price
variable and click the blue "Add Price" button located in the bottom screen and set the price of
the first option variant.

110
Products
Add and manage products

When setting the price of a variant in a price group, such as the @price_options variable, the
logic is almost the same as when creating restrictions explained in a previous chapter. Enter the
name and price ($50) and click the light blue "Add" button to add the price rule. The price rule
will follow a basic expression:

“The price is added only when all the following rules are true: [Type of option] [Has one or
more options selected]”

Select type of option, in this case we select the 'Wood' material option set (wood colors) and
check 'wood' as option variant selected. For each color selected, $50 will be added to the
base price.

NOTE: In the example above, we used an option set of type "Material" and it doesn't show
multiple variants to choose from. If you want to apply different prices to different colors, you will
need to use a different option set type, such as thumbnails, dropdown, etc.

111
Products
Add and manage products

Once we click "Save", we add the first price to the price group.

Click ‘Save’ again to create the price group.

112
Products
Add and manage products

By clicking "Preview", we will now see the total of $350 ($300 base price + $50 wood color). The
total price is calculated in the built-in variable @total_price added by default to the Price
Formula field.

Let's price the table based on size, and for this we need to add another price variable to the total
price calculation. For this, we will add a @price_variable. Please note that this type of variable
is not taken in the @total_price, therefore we need to use the price formula.

Select 'Price Variable' from the dropdown and click 'Add price' to define it. Enter the name and
select the variable type "for options." Select the "Size" numeral option set from the drop-down
menu below to load all three dimension parameters: Width, Length, and Height. If you want to
price the table by width, just type the cost per centimeter, in this case we have $12.

Click "Save" and add the new variable in the price block list.

113
Products
Add and manage products

Note that you can remove @total_pricing from the pricing formula and use the variables you
created.

Click "Preview" and see if @total_pricing shows the exact price of the table. It should calculate
the following: $300 (base price) + $50 (wood color) + ($12 * 138cm) = $350 + $1656 =
$2006.00. If you change the width of the table, the price will update in real-time.

114
Products
Add and manage products

Using the price formula unlocks more complex pricing systems, which may be necessary for
complex product configurators. Below, I'll give a simpler example of how you can use the price
formula field and @price_variable to add a sales tax in the configurator.

Select "Price Variable" from the drop-down menu and click "Add Price" to define the sales tax
variable.

Products
Add and manage products

115
Products
Add and manage products

Enter the name, keep the variable type "custom" and apply the percentage, in this case 0.12
(12%).

Click 'Save' to add the new variable and starting making your price formula so the configurator
would calculate the sales tax, here's an example below:

116
Products
Add and manage products

Share

Each configurator built into the platform generates a unique source link (src) from where
anyone can access the configurator, in other words from the unique source link anyone can see
what you see in the 'Preview' mode. The source link is a long, secure URL and can be used to
embed the configurator into a website.

117
Products
Add and manage products

The easiest way to embed the configurator wherever you want is to use HTML code with
the source link (src) in it:

<iframe src="[src link]"

style="border: none; margin: 0; width: 100%; height: 900px"
id="3d-configurator-iframe"
scrolling="no"
frameborder="1"
allowfullscreen >
</iframe>

In addition to using the HTML iFrame code, you can also use JavaScript alongside it to better
define your embedding with more settings.

Example:

<script>
const iframe = document.getElementById("3d-configurator-iframe");
const widthIframe = 1200;
const heightIframe = 800;
const paddingWidth = 0;
const paddingHeight = 0;
let iframeOrigin = "";
let mobileWidth = 0;
let full = false;
iframe.style.width = `${widthIframe}px`;
iframe.style.height = `${heightIframe}px`;
const handleResize = () => {
if (!full) {
if (iframe.parentNode.clientWidth - paddingWidth <= widthIframe) {
iframe.style.width = `${iframe.parentNode.clientWidth -
paddingWidth}px`;
} else {
iframe.style.width = `${widthIframe}px`;
}
if (iframe.parentNode.clientHeight - paddingHeight <= heightIframe)

118
Products
Add and manage products

{
iframe.style.height = `${iframe.parentNode.clientHeight -
paddingHeight}px`;
} else {
if (iframe.parentNode.clientWidth - paddingWidth <= mobileWidth)
iframe.style.height = `${heightIframe}px`;
}
}
if (iframeOrigin) {
iframe.contentWindow.postMessage(
{
type: "DIMENSIONS",
windowW: iframe.parentNode.clientWidth - paddingWidth,
windowH: iframe.parentNode.clientHeight - paddingHeight,
iframeW: iframe.clientWidth,
iframeH: iframe.clientHeight,
},
iframeOrigin
);
};
};
window.addEventListener("resize", handleResize);
handleResize();
window.addEventListener("message", (event) => {
if (event.data?.type === "GET_DIMENSIONS") {
mobileWidth = event.data?.mobileWidth;
iframeOrigin = event.origin;
handleResize();
}
if (event.data?.type === "FULLPAGE") {
if (event.data?.value === true) {
full = true;
iframe.style.width = "100%";
iframe.style.height = "100%";
iframe.style.position = "fixed";
iframe.style.top = "0";
iframe.style.left = "0";

119
Products
Add and manage products

} else {
full = false;
iframe.style.width = `${widthIframe}px`;
iframe.style.height = `${heightIframe}px`;
iframe.style.position = "";
}
}
});
</script>

Product Viewer

On all subscription plans, the platform allows users to generate 3D visualizations without
including a configurator. The viewer is for presentation purposes only and can be embedded
anywhere that supports HTML code. You can embed a 3D viewer in a web page or slider, in a
powerpoint presentation or using the API in a third party application.

A 3D viewer is created in the Products section by clicking the blue "Add Product" button located
in the top right of the screen.

120
Products
Add and manage products

This time, after clicking "Add Product", we no longer keep the "Configurator" product type
selected, but switch to the "Viewer" product type, as shown in the screenshot below.

Once we clicked "Save", we created the 3d viewer and we can edit it as we need. All views are
defined in 4 steps: selecting the layout, adding a 3D model, applying materials to the 3D model
and the share section where we copy the HTML code or source link.

Select Layout - here we select the position of the toolbar and the viewport.

121
Products
Add and manage products

Add 3D Models - select the 3D model to be used in the viewer.

Create Options - here we can use the "Default" block to apply materials to a 3D model just like
when we apply materials for configurators. If your 3D model already has materials applied, you
can leave this step blank.

122
Products
Add and manage products

Share - each viewer generates a unique HTML code that you can copy/paste anywhere you
want on a web page.

In the Share tab, you can also enable/disable the following in the 3D viewer: dark theme,
sidebar, and AR mode.

123
Products
Add and manage products

124
Materials
Create and edit materials for 3D assets

Materials

Introduction

Materials are important because they allow users to simulate different materials on the surfaces
of 3D assets. For example, for a piece of furniture such as a table, users can apply a specific
mate
rial such as wood. To be able to create that wood feeling material or other specific materials
such as metal, fabric, stone, etc., the platform allows users to create from several parameters
when creating a New Material.

The Materials section is divided into 2 subsections: Materials and Textures. All materials and
textures can be organized into categories, just like 3D assets.

125
Materials
Create and edit materials for 3D assets

NOTE: Using categories will greatly help to better manage the process of building the product
configurator or 3D product viewer.

New Materials

The platform allows users to create a wide range of materials such as: wood, stone, metal,
plastic, rubber, glossy surfaces, etc. When creating the material, you must Name it, assign a
Category and a Status. Assigning a category will help better manage materials when building
the configurator, and having a status will help better keep track of what's draft and what's ready
to go.

When creating a New Material, there are a few parameters that help define the 'feel' of the
material.

TYPE: Flat, Fabric, Metal and Glossy.

Flat - it is a type of material suitable for wood, plastic or various composite materials that
would not normally reflect or shine.

Fabric - simulates textiles, this is a specially built shader for clothing and works great
with fabric textures.

Metal - it simulates metal-like surfaces and we recommend using it in combination with

metal textures to reproduce the required material as accurately as possible.

Glossy - if you need shiny materials, chrome or glass this is the type of material to use.

Inherit - If you want to use materials already applied to the 3D model imported from
third-party CAD software (Blender, Rhino, Studio Max, etc.) and just use them, select this
option. By selecting this preset, you will only need to apply color or texture and bump if
necessary.

SURFACE: Texture and Color.

126
Materials
Create and edit materials for 3D assets

Textures - Allows the use of textures in the material. Users can select a texture by
filtering by category.

Colors - Allows the use of colors in the material by using the standard HEX color picker.

SPECULAR: Users can set the intensity of specular highlights making the surface brighter or
darker.

REFLECTION: Users can set the level of reflection, suitable for chrome, glossy and metallic
materials.

BUMP: Yes or No.

Yes - selecting Yes will simulate wrinkles on the surface of an object. It should be used,
for example, for wood, stone materials where there is usually a bumpy surface.

No - selecting No will disable this material effect.

OPACITY: Adding material transparency will allow simulation of glass-based materials or other
related transparent materials required by changing its percentage.

127
Materials
Create and edit materials for 3D assets

3D PREVIEW

While creating the material, you can preview in real-time 3D to get an idea of how it will look on
the final surface of the object. The 3D preview allows you to make small corrections until the
material looks right. You can switch between "Plane", "Cube" and "Sphere" to test the material
on different surface types.

Textures

Users can select one or more texture files to upload into the system. By default, these textures
take the filename as the default title. Users must take each texture image, edit the title (if
needed) and assign a category to use in materials.

128
Materials
Create and edit materials for 3D assets

Categories

Having a lot of materials and textures might require proper management, the platform makes it
easy by using categories for both Materials and Textures. This will allow users to store different
material collections, texture galleries and more and easily use them when building configurators
or product views.

The Categories page is divided into 2 main tabs: Materials and Textures.

For example, you can organize your materials or textures by type by having the following
categories: metal, wood, fabric, plastic, painted, glass, etc. or using categories to organize them
into catalogs, for example: 'Tea cup cottage colors', 'Vintage colors', 'Traditional', 'Cottage style',
etc. At the end is up to the user how it's easy to organize both the Materials and Textures.

129
3D Assets
Managing 3d assets inside the platform

3D Assets

Introduction

Simplio3D provides an efficient way to manage 3d assets inside the platform, allowing users to
upload, assign status and save them in categories. This is very useful when you build many
product configurators and want to easily manage each 3d asset to which product goes.

130
3D Assets
Managing 3d assets inside the platform

Upload 3D files

The platform supports 3 formats: GLB, glTF and OBJ. These are the most widely used 3D data
formats for the web, suitable for web applications, virtual reality and augmented reality
applications. Users can upload one or a group of files at a time.

Uploading and having the 3D asset ready is important before creating the product configurator
in Products. If you are new to 3D modeling or don't know how to source your 3D files, please
see the Preparing 3D models section.

Edit 3D Assets

After you select the 3D file from the local source and click the Upload button, the platform will
create an asset for you with the status "Pending" and take the file name as the asset name by
default. You can further edit the newly uploaded 3d asset by changing the name, assigning a
category, changing the orientation and status.

131
3D Assets
Managing 3d assets inside the platform

Parts

Once uploaded, the platform shows you what parts the 3D file is made of. This is a critical step
where users can verify that the 3D model has the right parts that will later define its
customization degree. For example, if we have a tea cup with 2 parts: cup and saucer, then the
platform will allow the structure of the configurator to choose separately the options for cup
and saucer. We will have the color red for the cup and green for the plate.
NOTE: For more complex configurators, users will most likely need to upload and update the 3D
files multiple times until they get the right parts to fit the configurator's requirements. This will be
a back and forth job until you will have the right 3D file. We recommend that you document your
configurator well before building it in the platform.

Orientation

Once you load a 3D file, by default the platform takes the initial position (x,y,z) taken from the
original CAD source, which should usually be the correct one. For various reasons, this can be
changed, for example during export, and you can correct this from the platform. For example,
you might load a 3d table upside down with the legs up, so you may need to flip along the axis
until it looks right.

Categories

We strongly recommend using categories when organizing your 3D assets in the platform.
Especially when you have many, a good practice is to have for each product configurator or 3d
viewer at least one category where you keep all your assigned 3d assets. You can also create
separate categories for drafts, for unused ones, it's up to you how you organize them, but don't
avoid using them.

132
Orders
Manage submissions from configurators

Orders
Each configurator can generate orders and all of them are collected in the Orders section.

Each order generates a unique order number, lists which configurator the order came from, its
date and status. The user can click on the green "eye" icon found in the "Actions" column to
review the order and access more information about the order.

133
Integrations
Sync data with third-party applications

Integrations

API Documentation

Simplio3D has an API library ready to unlock integration with third-party systems such as ERPs,
CRMs and other web services and to increase the degree of customization in terms of
implementing a product configurator using the Simplio3D foundation.
The platform offers REST API access at 2 levels:

●​ Pro subscriptions: Partner API

●​ Enterprise subscription: Dashboard and Open API

Pro subscription: Partner REST API

If you are a Pro user, you have access to the Partner API and in your user account profile you
can generate a token to execute and generate a JSON response. The Partner API only handles
the execution of order data coming from the 3D configurators. Here is an example of a JSON
result below:
{
"id": 22,
"price": 250,
"status": "new",
"customer_details": {
"Phone": "000",
"Last Name": "John",
"First Name": "Smith",
"Email address": "[email protected]",
"GDPR/DSA": "yes"
},
"configurator_summary": {
"Width": "60inches",
"Colors": "Vintage Brown Wood",
"Height": "60inches",
"Profile Depth": "4inches",

134
Integrations
Sync data with third-party applications

"Opening System": "Tilt & turn (left)",

"Type of Window": "Tilt & Turn",
"Upright Fanlight": "No upper fanlight"
},
"invoice_url": 1,
"order_shopify": {
"id": 3,
"shopify_draft_order_id": "000",
"order_id": 22,
"currency": "INR",
"invoice_url": "[link]invoices/f1c6f192caa9e1570dc7be672437d3ec",
"return_url": "[link]configurator",
"total_price": 250,
"subtotal_price": 250,
"total_tax": 20.64,
"status": "open",
"created_at": "2025-01-21T15:15:22.000000Z",
"updated_at": "2025-01-21T15:15:22.000000Z"
},
"created_at": "2025-01-21 15:15:21",
"updated_at": "2025-01-21 15:15:21"
},

Enterprise subscription: Dashboard and Open API

Enterprise allows access to both the Dashboard and the Open API. This is for more advanced
customization solutions, useful for IT development teams that want to implement more complex
configurators based on the Simplio3D foundation.

135