Simplio3D Tutorials

Recommended Learning Path

Video Tutorials

Quick Links

Supported Formats

File Limits & Recommendations

How to Upload

1. 1Navigate to the Dashboard and click "Assets" in the sidebar.
2. 2Click the "Upload" button in the top-right corner of the Assets page.
3. 3Select one or more 3D model files from your computer. You can drag-and-drop files directly into the upload area.
4. 4Wait for the upload and processing to complete. A thumbnail preview will be generated automatically.
5. 5Once uploaded, you can rename the asset, add tags, and assign it to a category.

Organising with Categories

Categories help you organise large asset libraries. You can create categories like "Furniture", "Hardware", "Accessories", etc.

1. 1Go to the Assets page and click the "Categories" tab or the folder icon.
2. 2Click "New Category" and give it a descriptive name.
3. 3Drag assets into categories, or select an asset and choose its category from the details panel.
4. 4Use the category filter in the asset browser to quickly find models when building projects.

Upload Workflow

Optimisation Tips

Supported Formats

Texture Types in PBR Workflow

File Limits & Compression

How to Upload Textures

1. 1Navigate to Dashboard > Assets.
2. 2Switch to the "Textures" tab using the filter or tab selector.
3. 3Click "Upload" to open the texture upload dialog.
4. 4Drag and drop your texture files into the drop zone, or click to browse. You can upload multiple files at once.
5. 5Files are processed sequentially — watch the progress indicator for total/completed/failed counts.
6. 6After upload, each texture gets a thumbnail preview and is stored in your texture library.
7. 7Assign textures to a category for easy organisation and retrieval.

Texture Library (Free PBR & Non-PBR Textures)

Simplio3D includes a built-in texture library with 60+ free PBR texture sets and a non-PBR image search powered by Pixabay. Access the library from Dashboard > Assets > Textures > "Texture Library" button, or directly from the Material Editor.

PBR Textures Tab

Curated, high-quality PBR texture sets from CC0-licensed sources (ambientCG, Poly Haven, CGBookcase). Each set includes diffuse, normal, roughness, AO, and metallic maps where applicable.

Each PBR texture set can be imported at three resolutions: 1K (~2–4 MB), 2K (~6–12 MB), or 4K (~20–40 MB). You can mark favourites and view recently used textures for quick access.

Non-PBR Textures Tab

Search for any image on Pixabay (24 results per page). Non-PBR textures are single images (no PBR map sets) — useful for decals, patterns, or simple colour references. These are downloaded through a server proxy and imported as standard texture assets.

Importing from the Texture Library

1. 1Open the Texture Library dialog (from Assets or Material Editor).
2. 2Browse categories or search by name. Use the Favourites/Recent tabs for quick access.
3. 3Select one or more texture sets (PBR) or images (Non-PBR).
4. 4Choose the resolution (1K, 2K, or 4K) for PBR textures.
5. 5Click "Import". The textures are downloaded from their CDN source and added to your asset library.
6. 6If importing from the Material Editor, PBR maps are automatically assigned to the correct slots (diffuse, normal, roughness, AO, metallic).

Categories & Organisation

Textures can be organised into custom categories (e.g., "Wood Textures", "Metal Textures", "Fabric Textures"). Categories are shared across the Assets page and can be filtered when assigning textures to materials. Use a consistent naming pattern like [material]_[maptype] (e.g., walnut_diffuse.jpg, walnut_normal.png) for easy identification.

Supported Formats

File Limits

How to Upload

1. 1Navigate to Dashboard > Assets.
2. 2Switch to the "Graphics" tab.
3. 3Click "Upload" and select your image or SVG files.
4. 4After upload, assign a name and category to each graphic.
5. 5Graphics will become available in the Pattern Designer and Design Canvas option blocks.

Uploading SVG Files

SVG files are especially powerful in Simplio3D because the platform can read individual colour channels from the SVG, allowing end users to recolour specific parts of the design.

1. 1Prepare your SVG in a vector editor (Illustrator, Figma, Inkscape). Use distinct fill colours for parts you want to be independently recolourable.
2. 2Upload the SVG file via the Assets > Graphics tab.
3. 3When the SVG is used in a Pattern Designer or Design Canvas option block, Simplio3D automatically detects the colour channels (distinct fill colours in the SVG).
4. 4Each detected colour channel becomes a configurable option — users can change individual colours at runtime.

Using Graphics in Option Blocks

Categories

Organise graphics into categories such as "Logos", "Patterns", "Decals", "Icons", etc. When creating option blocks, you can filter by category to quickly find the right graphic.

How Automatic Versioning Works

When you upload a 3D model file that has the same base name (ignoring case and extension) as an existing asset, Simplio3D automatically creates a version chain:

1. 1Upload your first model file (e.g. "custom_shoe.glb"). It is stored normally — no version tag yet.
2. 2Later, upload an updated model with the same name ("custom_shoe.glb"). Simplio3D detects the name match.
3. 3The original model is retroactively tagged as "v1". The new upload is tagged as "v2".
4. 4Each subsequent upload with the same name increments the version: v3, v4, and so on.
5. 5Version tags appear as badges on the asset thumbnail in both grid and list views.

Managing Version Tags

Version tags (e.g. "v1", "v2") are informational labels that help you identify which iteration of a model you're looking at. You can remove a version tag if you prefer a cleaner view.

1. 1Navigate to Dashboard > Assets and locate the versioned model.
2. 2In grid view, hover over the version badge on the thumbnail to reveal the × (remove) button.
3. 3In list view, the version badge appears next to the asset name with the same × button.
4. 4Click × to remove the version tag. The tag is removed from the UI, but the version history is preserved internally.

Replacing a Model Version in a Project

When you've iterated on a 3D model and uploaded a new version, you can replace the older version in any project that uses it. The replacement preserves all option block references, materials, and configurations.

1. 1Open your project in the Project Editor.
2. 2Click the "Asset Browser" button to open the asset library dialog.
3. 3Browse or search for the updated model. Versioned assets show their version badge (e.g. "v2").
4. 4Select the new version and click "Load". The system detects that a model with the same base name is already in the scene.
5. 5A confirmation dialog appears explaining that the existing model will be replaced. Click "Yes, replace" to continue.
6. 6The new model data replaces the old one while keeping the same internal model ID. All option blocks, material assignments, and transform references are preserved.
7. 7After loading, the system compares 3D part names between the old and new model. You'll see a success or warning toast.

Part Name Matching

When a model is replaced, Simplio3D checks whether the 3D part names (mesh names) in the new model match those referenced by your option blocks. This ensures your configurator options continue to work correctly.

What Gets Preserved During Replacement

Best Practices

Example Workflow

Step-by-Step: Create a New Material

1. 1Navigate to Dashboard > Materials.
2. 2Click the "New Material" button.
3. 3Enter a name for your material (e.g., "Brushed Aluminium", "Oak Wood").
4. 4Optionally choose a base preset (Flat, Fabric, Metal, or Glossy) to pre-fill sensible property values.
5. 5Configure the Surface tab: choose between a flat colour or a texture. For textures, click the texture slot to browse your uploaded textures or open the Texture Library directly.
6. 6Configure the Properties tab: adjust Metallic, Roughness, Specular, and Reflectivity sliders.
7. 7Configure the Advanced tab if needed: set double sided rendering, transparency mode, IOR (for glass), or emissive glow.
8. 8Check the live 3D preview sphere — it updates in real time as you change settings.
9. 9Click "Save" to create the material. It appears in your material library immediately.

Material Editor — Surface Tab

The Surface tab controls the base appearance. Switch between Colour mode (flat colour via the colour picker) and Texture mode (image-based via texture maps).

Material Editor — Properties Tab

The Properties tab controls the physical characteristics of the material.

Material Editor — Advanced Tab

PBR Texture Map Slots

When in Texture mode, four PBR map slots are available. Assign textures to each slot for realistic surface detail.

Material Presets

Four built-in presets pre-fill property values as a starting point:

Organising into Categories

1. 1In the Materials page, click the "Categories" tab.
2. 2Create categories like "Metals", "Woods", "Fabrics", "Glass", "Plastics" — pick a colour swatch for each so they're easy to spot.
3. 3Assign a category from either the per-card Select on the Materials grid OR the category chip in the Material Editor header (next to the status badge). Both routes write to the same field.
4. 4Need a new category while editing? Open the category chip in the Material Editor and click "Manage categories…" at the bottom — the management dialog opens inline; new categories are available immediately without leaving the editor.
5. 5Use category filters to quickly find materials when assigning them in project option blocks.

Using Library Materials

1. 1Navigate to Dashboard > Materials.
2. 2Click the "Material Library" button.
3. 3Browse by category or search by name.
4. 4Click on a preset to see a live 3D sphere preview showing how the material looks under scene lighting.
5. 5Click "Use Material" to copy the preset into your personal material library.
6. 6The imported material is now fully editable — adjust colours, roughness, metallic, swap textures, or tweak advanced settings as needed.

Available Categories (90 Presets)

Step-by-Step: Apply Textures to a Material

1. 1Navigate to Dashboard > Materials and select the material you want to edit (or create a new one).
2. 2In the Material Editor, switch the Surface tab to "Texture" mode.
3. 3Click the diffuse texture slot to open the texture browser.
4. 4Choose a texture from your uploaded assets, or click "Texture Library" to browse 60+ free PBR texture sets.
5. 5If using the Texture Library, select a set, choose a resolution (1K, 2K, or 4K), and click "Import". All PBR maps (diffuse, normal, roughness, AO, metallic) are imported and auto-assigned to the correct slots.
6. 6If uploading manually, assign each texture to the appropriate PBR slot: Normal Map, Metallic Map, Roughness Map, and AO Map.
7. 7Adjust the Tiling value (0.1 – 5) to control how many times the texture repeats on the surface. Higher values = smaller pattern.
8. 8Adjust the Rotation (0 – 360°) if the texture grain or pattern needs to be oriented differently.
9. 9Set the Bump/Normal toggle and adjust Intensity (0 – 2) for the desired surface depth effect.
10. 10Preview the material on the live 3D sphere — it updates in real time.
11. 11Click "Save" to apply all changes.

Texture Map Slots

Texture Library Integration

The Texture Library is accessible directly from the Material Editor's texture browser. When you import a PBR texture set from the library:

• All available maps (diffuse, normal, roughness, AO, metallic) are downloaded from their CC0-licensed CDN source.
• Maps are automatically assigned to the correct PBR slots in the Material Editor.
• The textures are also added to your asset library for reuse in other materials.
• Available sources include ambientCG, Poly Haven, and CGBookcase.

Step-by-step

1. 1Open Dashboard → Materials. Create or pick a category (e.g., "Woods") and assign every material that belongs to it.
2. 2Open your project, switch to Options mode, and add a Select Material option block (or open an existing one).
3. 3At the top of the block properties panel, switch the Source segmented control from "Manual" to "From Category".
4. 4Pick the category from the dropdown. The "Live Preview" panel below shows the swatches end users will see, including a live count badge.
5. 5Pick one or more Target Objects (check the 3D models the materials apply to). Leave none checked to apply to every loaded object. Optionally scope each object to specific mesh parts via the parts list — parts are grouped by object + subgroup, with nested groups shown at any depth. Leave a target’s parts empty to cover every mesh in it.
6. 6Set Sort Materials By (Name / Newest / Oldest). Hover an object or a part to see the affected meshes outline-highlight in the viewport so you can verify your target across all selected objects.
7. 7Click Preview to verify the swatch list and 3D application work as expected. The Preview modal renders the synthesized variants identically to the share view.
8. 8Optional: switch to Pricing mode and add a Price Group / Variable / Price Table / Unique Price block linked to this Select Material block to author per-material pricing.

What changes vs Manual mode

Pricing

Pricing for a category-mode block lives in Pricing mode, exactly like Manual mode. Add a Price Group, Variable (For Options), Price Table axis, or Unique Price block and link it to this Select Material block. The Pricing panel automatically shows one price row per material in the category so you can author per-material prices. The pricing key uses the stable synthesized variant value (auto:{materialId}), so renaming a material in the library does not break the price.

Conditional logic

Other blocks can hide or show a category-mode Select Material block at the block level, and the block's materials can be referenced by 3D Objects / 3D Parts / Materials targeting scopes. Per-variant conditional targeting is unavailable in category mode (runtime variant IDs change with category contents). Switch back to Manual if you need per-variant rules.

Project Types

Creating a New Project

1. 1Navigate to Dashboard > Projects.
2. 2Click "New Project".
3. 3Choose a project type: Viewer, Configurator, or Modular.
4. 4Enter a project name and optional description.
5. 5Click "Create" to open the project editor.
6. 6Upload or select a 3D model from your assets. For Modular projects, add modules in the Objects panel.

Duplicating a Project

On Pro and Enterprise plans — including during your 30-day Pro trial — you can duplicate any of your projects from the Projects dashboard. Hover a project card (or any list row) and click the Copy icon button — a small dialog lets you rename the copy before confirming.

A duplicate is a complete copy of the original — the whole 3D scene (every model, group, nested group, and part), all option blocks and their variants (including hotspots, scenery, and material swatches), the entire pricing setup (price groups, tables, unique-price blocks, variables, and SKUs), the full form with all its fields, animations, conditional logic, and every project setting all carry over. Open the copy and it looks and behaves exactly like the source.

Duplicates reuse the same models, materials, and textures from your library by reference, so there's no extra storage cost or re-upload step. Per-project uploaded models, the AR file, and the thumbnail are copied so the duplicate works independently of the original — even if you later delete the source.

Editor Layout

Key Features

The Objects Panel

The left panel in Objects mode shows a hierarchical list of all 3D objects (meshes, groups) in your scene. Each row represents a mesh or group that can be selected and configured.

Nested Subgroups

The panel mirrors the full structure of your model, including nested subgroups — groups inside groups, as authored in your 3D tool (for example Roof → Back_roof_part → part_01 / part_02 / part_03). Container rows show a folder icon and can be expanded or collapsed; individual meshes show a box icon. Selecting a subgroup lets you transform every mesh inside it as one unit.

Meshes inside subgroups work everywhere a part can be referenced — Select Material / Fixed Material targets, per-variant visibility, conditional logic, animations, and AR. In each of those pickers, parts are grouped under collapsible subgroup headers with a "select all in this subgroup" checkbox, so you can target a whole subgroup in one click.

Available Options

Properties Panel

When an object is selected, the right-side Properties panel shows:

Option Block Types

Select Material

Lets users choose from a list of materials to apply to one or more 3D parts.

1. 1Click "Add Option Block" and choose "Select Material".
2. 2Give the block a label (e.g., "Frame Finish", "Seat Material").
3. 3Choose which 3D object(s) the material will be applied to.
4. 4Add material choices by selecting from your material library.
5. 5Optionally set a default selection.

Colour Variants

Lets users pick a colour from a set of swatches. The colour is applied to a specific material property (usually the base colour) of one or more parts.

1. 1Add a "Colour Variants" option block.
2. 2Give it a label (e.g., "Body Colour").
3. 3Select the target 3D object(s).
4. 4Add colour swatches using the colour picker. You can add as many colours as needed.
5. 5Each swatch can have a label and optional price modifier.

Show / Hide 3D Objects or Parts

Lets users toggle the visibility of entire 3D objects or individual mesh parts on or off. Useful for optional accessories, add-ons, or alternative configurations.

1. 1Add a variant and switch to the "Visibility" appearance mode.
2. 2Label it (e.g., "Add Armrests", "Include Headrest").
3. 3Choose the target mode: "3D Objects" to show/hide entire models, or "3D Parts" for individual meshes.
4. 4Select which 3D object(s) or part(s) to show or hide.
5. 5Choose the default state (shown or hidden).
6. 6Optionally add a price modifier for the visible state.

Thumbnail Selector

Displays variant choices as a visual thumbnail grid. Users browse and click a thumbnail to select that option. Ideal for large variant sets where visual browsing is more intuitive than text lists.

1. 1Add a "Thumbnail Selector" option block.
2. 2Give it a label (e.g., "Choose Style", "Select Pattern").
3. 3Add variants — each variant gets a thumbnail image (uploaded or auto-generated from the material).
4. 4Configure display settings in the block properties panel.

Supports the same overlap behavior as Select Material for appearance variants targeting identical 3D parts.

Number Input

A numeric input block that lets users enter a quantity or a dimension value. When configured as a dimension (with axis scaling), it dynamically scales the 3D model along the chosen axis.

1. 1Add a "Number Input" option block.
2. 2Give it a label (e.g., "Width (cm)", "Quantity").
3. 3Choose the value type: "Quantity" for a simple number, or "Dimension" for a value that drives model scaling.
4. 4For Dimension type: select the scaling axis (X, Y, or Z) and optionally restrict which parts of the model are affected.
5. 5Set the unit suffix (e.g., cm, mm, in) and min/max constraints.

Toggle Switch

A simple on/off binary toggle. Limited to exactly two variants (e.g., On/Off, Yes/No, With/Without). Works well for optional add-ons.

1. 1Add a "Toggle Switch" option block.
2. 2Label it (e.g., "Include Roof Rack", "Add Engraving").
3. 3Define the two states: each can trigger different materials, visibility changes, or price modifiers.
4. 4Set which state is the default.

Section Header

A non-interactive heading that visually groups related option blocks. Can be styled as a simple divider or as a tab-style section break.

Carousel

Displays variant choices in a horizontally scrollable carousel with navigation arrows. Ideal when you have many variants and want a compact, swipeable presentation.

Carousel appearance variants may also overlap on the same target parts; last applied variant wins.

Scenery

Lets users switch between pre-defined scene backgrounds or environments. Each scenery variant loads a different set of 3D context models and camera settings to place the product in a different visual context.

1. 1Add a "Scenery" option block.
2. 2Label it (e.g., "Environment", "Room Setting").
3. 3For each variant, select one or more context 3D models (the "scenery") from your assets.
4. 4Configure camera settings per variant: position, target, FOV, zoom limits, rotation limits, and ground alignment.
5. 5Set the default scenery variant.

Hotspot

Places interactive markers on the 3D model that users can click or hover over to see information popups. Hotspots are useful for product tours, feature highlights, and annotations.

1. 1Add a "Hotspot" option block.
2. 2Position the hotspot by clicking on the 3D model surface, or enter exact 3D coordinates.
3. 3Configure the hotspot appearance and behaviour.

Other Block Types

When to Use Modular Projects

Modular Block Setup

The Modular block powers drag-and-drop module assembly in Modular project types. End users compose products by placing, snapping, rotating, and mirroring independent 3D modules in a shared workspace. Ideal for kitchen builders, furniture systems, modular shelving, and similar products.

1. 1Add a "Modular" option block (only available in Modular project type).
2. 2Click "Add Variant" to create module variants. Each variant needs a label, value, and a selected 3D model.
3. 3For each variant, toggle the Active Snap Sides — the bounding box faces (Top, Bottom, Left, Right, Front, Back) where the module can connect to others.
4. 4Open the "UI Design" section to control how parts appear in Preview modal and Share view: choose Grid or List layout, thumbnail size, and how part names are displayed.
5. 5For long part names, use List layout for always-readable rows, or Grid with 2 columns plus 2-3 label lines for a compact but readable palette.
6. 6Set the Snap Origin — the corner alignment used when modules snap together (Lower Left, Lower Center, or Lower Right). Default is Lower Left.
7. 7Optionally override the Snap Origin per side using the "Snap Origin Per Side" section — useful when different sides need different alignment (e.g., Left → Lower Left, Front → Lower Center).
8. 8Fine-tune snap positions using the "Snap Offset (Advanced)" section to set per-side offset values.
9. 9For asymmetric modules (e.g. an extension roof whose center is offset), use the "Snap Alignment Offset" section to shift incoming modules along the face plane on specific sides. This is a target-side setting — configure it on the module that others snap TO.
10. 10If a variant must always connect from one authored side, set "Force Snap Side" on that variant.
11. 11Configure Side Snap Settings: consumer add method (Drag & Drop or Click to Attach), rotation, mirroring, deletion, and visual feedback options.

Camera Behaviour in Preview and Share

By default, the camera automatically reframes to fit all placed modules in view every time a module is added or connected — this is the Auto-Reframe on Module Connect setting found in Project Settings → Camera. It fires for all placement methods: clicking to add the first module, snapping a module to another via click, and both drag-first and drag-snap placements.

Performance: Drag Ghost Preview

The Show Modular Drag Ghost setting (Project Settings → Loading, Modular projects only) controls whether a translucent ghost clone is rendered while the user drags a module. It is off by default.

Material or Color Options for Placed Modules

In Modular projects, material and color variants can apply to placed modules globally. Use a separate Thumbnail Selector, Select Material, Dropdown, Toggle, Checkbox, or Carousel block for choices such as material, paint color, fabric color, or texture. The Modular block controls which modules are placed; the material or color option block controls how all matching placed modules look.

1. 1Create the Modular block first and configure the module variants that users can place.
2. 2Create a separate material or color option block, such as "Module color options" with variants like Natural, White, Grey, or Brown.
3. 3Open each material or color variant, choose Material or Color, then set Target Scope to "All placed modules" or "Selected module types".
4. 4Optionally select mesh parts by name to limit the option to wood, fabric, metal, or another repeated part group. Leave the parts empty to affect the full module mesh.
5. 5Preview the project, place modules, and switch material or color options. The selected option is applied to existing placed modules and to modules added afterward.

How It Works

A conditional logic rule consists of three parts:

Creating a Rule

1. 1In the project editor, switch to Options mode.
2. 2Click the "Conditional Logic" button (or lightning bolt icon) in the toolbar.
3. 3Click "Add Rule".
4. 4Set the IF condition: choose the source option block, the comparison operator (equals, not equals, contains, etc.), and the trigger value.
5. 5Set the THEN action: choose the target option block and what should happen (show, hide, enable, disable, set value).
6. 6Optionally, set an ELSE action for when the condition is not met.
7. 7Save the rule. It takes effect immediately in the configurator.

Available Actions

Target Scopes

When creating a rule, you choose a target scope that determines what the rule affects. There are four scopes:

Examples

Advanced: AND / OR Multi-Conditions

For more complex scenarios, you can combine multiple conditions using AND (all must be true) and OR (any can be true) operators. This lets you build sophisticated configuration logic.

Modular Self-Snap Rules (Per-Instance)

In Modular projects, a Modular option block can reference itself in the WHEN clause. This lets you author rules that hide or show parts of a placed module only when another instance of the same module snaps onto it. The hide/show effect applies only to the host (the existing module being snapped onto). The newly placed module that triggers the rule is unaffected.

Creating Multi-Condition Rules

1. 1Open the Conditional Logic panel and click "Add Rule".
2. 2Set your first IF condition as normal.
3. 3Click the "+ Add Condition" button below the first condition.
4. 4Choose "AND" or "OR" to connect the new condition to the first.
5. 5Set the second condition's source option block, operator, and value.
6. 6Repeat to add more conditions as needed. You can mix AND and OR operators.
7. 7Set the THEN and optional ELSE actions.
8. 8Save the rule and test it in the Share preview.

Price Block Types

There are five types of price blocks. Each represents a different pricing concept. Unique Price appears only for Enterprise Modular projects.

1. Base Price

A single fixed starting price for the product. There can only be one Base Price block per project. This is the foundation that other blocks add to or multiply.

1. 1Switch to Pricing mode in the editor.
2. 2Click "Add Price Block" and choose "Base Price".
3. 3Enter the base price value (e.g., 500).
4. 4The base price appears as the minimum price before any options are selected.

2. Price Group

Links to one or more option blocks and assigns a price to each variant. When the user selects a variant, its price is added to the total. Also supports Modular option blocks — each placed module instance is priced individually — and Number Input option blocks — each numeral variant's price is multiplied by the runtime numeric value the end user enters.

1. 1Click "Add Price Block" and choose "Price Group".
2. 2Select the option block to link to (e.g., "Frame Finish", "Seat Material", a Modular block, or a Number Input block).
3. 3For each variant (or module type, or numeral variant), enter a price value.
4. 4Variants or module types without a price default to 0 (no additional cost).
5. 5For Modular blocks, the price label shows "/ unit" — it is charged per placed module instance.
6. 6For Number Input blocks, the price label shows "/ unit" — it is multiplied by the numeric value the end user enters for that variant: [number] × price.

3. Price Table

A 2D matrix that cross-references two option blocks to determine a price. Useful when the price depends on the combination of two selections (e.g., size × material). Either axis can be a dropdown, select-material, checkbox, toggle, carousel, modular, or Number Input block.

1. 1Click "Add Price Block" and choose "Price Table".
2. 2Select the first option block for rows (e.g., "Size") and the second for columns (e.g., "Material").
3. 3Fill in the price grid — each cell represents the price for that specific row × column combination.
4. 4When the user selects a size and a material, the corresponding cell value is used.
5. 5When an axis is a Number Input, the cell price is multiplied by the runtime numeric value for that variant; if both axes are Number Inputs, it is multiplied by both.

4. Unique Price

An Enterprise-only block for Modular projects. It prices one chosen module variant by the quantity placed by the consumer and one correspondent option selection, so configured quantity breaks can be unique while higher quantities extend with that column option's Default row value.

1. 1Open an Enterprise Modular project and switch to Pricing mode.
2. 2Click "Pricing" and choose "Unique Price".
3. 3Select the modular block and exactly one module variant, such as "Connect Full Wall".
4. 4Add quantity rows such as 1, 2, and 3 for the non-linear breakpoints you want to price directly.
5. 5Select another option block for the columns, such as "Treatment Options".
6. 6Fill the grid with exact total prices for each quantity and option variant.
7. 7Fill the Default row with the per-extra fallback price for each option variant column.

5. Variable

A custom numeric variable that can either be a standalone slider/input or linked to an option block. Variables are referenced in formulas for dynamic calculations. When linked to a Modular option block, each placed module instance contributes its per-unit price — useful for module-count pricing inside formulas. When linked to a Number Input block, each variant's price is multiplied by the numeric value the end user enters.

1. 1Click "Add Price Block" and choose "Variable".
2. 2Name the variable (e.g., "Quantity", "Custom Width", "Discount %", "Modules Cost").
3. 3Choose "Custom" for a standalone slider or "For Options" to link to an option block.
4. 4For "For Options" mode: select the option block (can be a Modular or Number Input block) and set a price per variant.
5. 5For "Custom" mode: set min, max, step, and default values for the slider.
6. 6Use this variable in the price formula (see below).

6. SKUs on Priced Variants (Enterprise Modular)

On Modular projects with an Enterprise plan, every priced variant or cell in Price Group, Variable (For Options), Price Table, and Unique Price blocks can carry an SKU. SKUs are persisted alongside prices and travel with the configuration through the live breakdown, quote/form submissions, and Shopify draft orders — typically used to map configurator output to ERP / inventory codes.

1. 1Open an Enterprise Modular project and switch to Pricing mode.
2. 2Open a Price Group or Variable (For Options) block — a small SKU input appears under each variant's price field. Type the SKU (max 64 chars) and it persists automatically.
3. 3Open a Price Table or Unique Price editor modal — click the "Show SKUs" button in the toolbar. Each cell now stacks a SKU input below its price. The toggle re-opens automatically next time if any SKU has been authored.
4. 4Empty SKU fields are not persisted (no empty strings in the saved project).
5. 5Verify in the Share preview: open the price breakdown details — the matching SKU appears in muted monospace next to each line item.

Price Formula

The price formula defines how all price blocks combine into a final total. Simplio3D uses a visual token-based formula editor — you build formulas by clicking to insert block references, operators, numbers, and parentheses.

Formula Tokens

Formula Examples

Setting Up Pricing: Step by Step

1. 1Go to Project Settings > Pricing tab. Set the currency symbol, prefix/suffix, and tax settings.
2. 2Go to Project Settings > Display tab. Enable "Show Price".
3. 3Switch to Pricing mode in the editor.
4. 4Add a Base Price block and set the starting price.
5. 5Add Price Group blocks for each option block that affects the price — enter variant prices.
6. 6Add Price Tables for any two-dimensional pricing (size × material combos).
7. 7For Enterprise Modular projects, add Unique Price blocks when one module type needs non-linear quantity pricing with per-column Default row fallback prices.
8. 8Add Variables for dynamic inputs like quantity or custom dimensions.
9. 9Open the Formula editor. Build the formula by clicking to insert block references and operators.
10. 10Test pricing in the Share preview. Change options and verify the total updates correctly.

Pricing Settings (Project Settings > Pricing Tab)

Form Field Types

There are 11 field types available. Drag to reorder fields in the form editor.

Setting Up a Form: Step by Step

1. 1Go to Project Settings > Display tab and enable "Show Form". Set the form button label (e.g., "Request Quote", "Get Pricing", "Contact Us").
2. 2Switch to Forms mode in the editor.
3. 3Click "Add Field" and choose a field type from the list.
4. 4For each field, configure: label, placeholder, required/optional, and any type-specific settings.
5. 5Drag fields to reorder them in the form.
6. 6Add a "Header / Title" field to group related sections (e.g., "Contact Details", "Shipping Address").
7. 7Add an "Acceptance" checkbox with a link to your terms/privacy page.
8. 8Configure the "Confirmation" field — this is the success message users see after submission.
9. 9Add either a "Submit" button or an "Add to Cart" button (for e-commerce integrations).

Custom CSS Presets

Each form field supports a Custom CSS preset. This lets you override the default field styling without editing global CSS. Use it for branding adjustments like border radius, font size, or padding.

Form Preview & Validation

Use the Form Preview to test your form without leaving the editor. The preview runs full validation diagnostics — it highlights required fields, checks email format, and verifies that all submission requirements are met. Fix any validation warnings before publishing.

What Users See

When "Show Form" is enabled, a button (e.g., "Request Quote") appears in the configurator. Clicking it opens the form. After submission, the form data, the current configuration state, a 3D screenshot, and the calculated price (if pricing is enabled) are all captured and sent as a Request.

1. Display Tab

Controls which UI elements are visible in the configurator and how the layout is structured.

2. Branding Tab

Customise the visual identity of the configurator to match your brand.

3. Pricing Tab

Configure currency, tax, and price display format.

4. Lighting Tab

Control the scene lighting and environment.

5. Camera Tab

Configure the 3D camera behaviour and constraints.

6. Loading Tab

Customise the loading screen that appears while the 3D model downloads.

7. Advanced Tab

Advanced features and integrations.

8. PDF Tab

Configure the PDF document generated from form submissions and quote requests.

9. Email Tab

Configure email notification delivery for form submissions.

Enabling the Share Link

1. 1Open your project in the editor.
2. 2Go to Project Settings (or click the Share icon in the top toolbar).
3. 3Find the "Share" section and toggle "Enable Share Link" to on.
4. 4A unique share URL will be generated (e.g., https://app.simplio3d.com/share/[projectId]/[token]).
5. 5Copy the link and send it to anyone. They can view and interact with the configurator without needing an account.

Embedding with iframe

To embed the configurator on your website, use the provided iframe code.

1. 1After enabling the share link, click the "Embed" tab in the sharing panel.
2. 2Copy the iframe embed code provided.
3. 3Paste the code into your website's HTML where you want the configurator to appear.
4. 4Adjust the width and height attributes to fit your page layout.
5. 5Optionally configure "Allowed Embed Domains" in settings to restrict which websites can host the iframe.

Other Sharing Options

Sharing Settings

The sharing dialog has three tabs:

Save Configuration (Enterprise)

Let visitors save their in-progress configuration via email. A Save (bookmark) icon appears in the Floating Tools of the share view and the embedded iframe. Clicking it opens a modal asking for an email address; the visitor then receives a permalink that restores their exact selections — materials, dimensions, modular placements, the lot.

1. 1Open the project in the editor and switch to Project Settings → Advanced tab.
2. 2Find the "Save Configuration" card (visible only on the Enterprise plan, for Configurator and Modular project types).
3. 3Toggle "Enable Save Configuration" on. Disabled by default.
4. 4Make sure the project's Email settings are configured (SMTP / SendGrid / Gmail / SES / Mailgun) — the permalink email goes through the same delivery pipeline as form submissions.
5. 5Publish or re-share the project. The Save icon now appears in the Floating Tools toolbar in the Share view (and inside iframe embeds).

Integration Modes

Prerequisites

• A WordPress website with WooCommerce installed and activated.
• A Simplio3D account with at least one Configurator project with pricing enabled.
• The project must have Share Link enabled.
• For "Add to Basket" mode: WordPress admin access to install the Simplio3D WooCommerce plugin.

Linking a WooCommerce Product

1. 1In the Simplio3D editor, open your project.
2. 2Go to the WooCommerce integration panel (or Project Settings > Advanced > WooCommerce).
3. 3Choose the integration mode: "Redirect to Checkout" or "Add to Basket".
4. 4Click "Link Product" to search for or browse your WooCommerce products.
5. 5Select the WooCommerce product to link. The product name, SKU, and price are displayed for confirmation.
6. 6Save the integration. The configurator now includes a checkout / add-to-cart action.

Setup: Redirect to Checkout

1. 1Choose "Redirect to Checkout" mode in the integration panel.
2. 2Link your WooCommerce product (see above).
3. 3The configurator will show a "Buy Now" or "Proceed to Checkout" button (label is customisable).
4. 4When clicked, the user is redirected to your WooCommerce checkout URL with the product ID and configuration data.
5. 5No plugin installation needed — this mode works with any standard WooCommerce setup.

Setup: Add to Basket

1. 1Download the Simplio3D WooCommerce plugin from Dashboard > Integrations > WooCommerce.
2. 2In your WordPress admin, go to Plugins > Add New > Upload Plugin. Install and activate the .zip file.
3. 3In the Simplio3D editor, choose "Add to Basket" mode.
4. 4Link your WooCommerce product.
5. 5The configurator will show an "Add to Cart" button.
6. 6When clicked, the configured product is added to the WooCommerce cart via the plugin API — the user stays on the page and can continue configuring or browsing.
7. 7The cart item includes: product name, all configuration details, a 3D screenshot thumbnail, and the calculated price.

How It Works for Customers

1. 1The customer opens the configurator (embedded on the product page or via a share link).
2. 2They configure the product — choosing materials, colours, options, dimensions, etc.
3. 3The price updates in real time as they change options.
4. 4They click the checkout/cart button.
5. 5For Redirect mode: they are sent to the WooCommerce checkout with the product pre-added.
6. 6For Basket mode: the product is silently added to their cart. A confirmation toast appears.
7. 7The WooCommerce order contains all configuration details, the calculated price, and a screenshot.

Prerequisites

• A Shopify store (any plan).
• A Simplio3D account with at least one published Configurator project.
• Access to the Shopify Dev Dashboard to create a custom app.
• The project must have Share Link enabled.

Creating a Shopify App (Dev Dashboard)

1. 1Go to dev.shopify.com and sign in with your Shopify account.
2. 2Click "Create an app" and give it a name (e.g. "Simplio3D Connector"). Choose "Create app manually".
3. 3Go to the "Versions" tab and click "Create version".
4. 4Under Access scopes, search for and add the write_draft_orders scope, then save the version.
5. 5Go to the "Overview" tab and click "Install app" to install it on your store.
6. 6Go to "Settings" > "App credentials" and copy the Client ID and Client Secret.

Connecting in Simplio3D

1. 1In the Simplio3D dashboard, go to Dashboard > Integrations > Shopify.
2. 2Enter your Shop name (the myshopify.com subdomain, e.g. "my-store").
3. 3Paste the Client ID and Client Secret from the Shopify Dev Dashboard.
4. 4Click "Test Connection" to verify the credentials.
5. 5Save the integration. You can now link projects to Shopify products.

Linking Projects to Products

1. 1Open a project in the Simplio3D dashboard.
2. 2Go to the Shopify linking dialog and select the product to connect.
3. 3You can also use batch linking to connect multiple projects at once (up to 50).

Checkout Modes

Pick one of three checkout modes in Integrations > Shopify. Each project share viewer routes Add to Cart clicks through the active mode.

SKU-Matched Cart (Enterprise)

The third mode matches every priced variant in your projects to a Shopify variant by SKU at checkout time, then redirects the customer to a multi-line Shopify cart permalink (/cart/{variant1}:{qty},{variant2}:{qty}). It's the natural pair for the SKU authoring feature on Price Group, Variable, Price Table, and Unique Price blocks.

What you need

Just the Admin API credentials you already configured in Step 2 — Client ID + Client Secret. No separate Storefront API token, no pre-sync. SKUs are resolved live whenever a customer clicks Add to Cart.

Setup steps

1. 1Make sure you have an Enterprise plan and have authored SKUs on the priced variants you want sold (Pricing tab → SKU field next to each variant price).
2. 2Open Dashboard → Integrations → Shopify. Connect with your Client ID + Client Secret (Step 2 of the wizard) and run the connection test.
3. 3Pick "SKU-matched cart" as the checkout mode and save.
4. 4Open any of your projects → Pricing tab. You'll see a small ✓ / ✗ / ⚠ badge next to every SKU input — that's the live check against your Shopify store. Fix any ✗ (not found) or ⚠ (duplicate) flags before sharing the project.

In-editor SKU validation

While you type a SKU into a pricing block, Simplio3D queries your Shopify Admin API (debounced 600 ms) and renders a tiny badge next to the input:

How checkout works

• The share viewer reads the live pricing breakdown — each row carries its SKU when authored.
• On Add to Cart, the viewer POSTs { items: [{ sku, quantity, label?, parentName?, amount? }], configurationSummary?, note? } to POST /share/:projectId/:token/shopify-sku-cart.
• The server validates the share token, confirms the project owner is on Enterprise, resolves each SKU to a numeric Shopify variant ID via the Admin API (one batched GraphQL call), and builds a multi-line cart permalink.
• The customer is redirected to that permalink. Unmatched SKUs are skipped and reported in the response so the merchant can see what didn't make it into the cart.

Draft Order Integration

In the shared viewer, the Add to Cart button first checks Shopify mode. If Push price & configuration summary is enabled, clicking Add to Cart creates a Draft Order and redirects the customer to the invoice checkout URL.

• Configured option summary in draft-order custom attributes and note text.
• Configured price override when pricing is configured for the project.
• Fallback to normal Shopify cart URL when Push price & configuration summary is disabled.
• Invoice URL generation via Draft Order API response (with fallback attempts if invoiceUrl is not returned immediately).

Step 1: Generate an API Key

1. 1Go to Dashboard > Integrations.
2. 2Find the "API Keys" section.
3. 3Click "Generate New API Key".
4. 4Give the key a descriptive name (e.g., "Production Website", "Staging").
5. 5Copy the generated key immediately — it won't be shown again.
6. 6Store the key securely (environment variables, not in client-side code).

Step 2: Make Your First API Call

Step 3: Use the JavaScript SDK

The SDK provides a higher-level interface for embedding and controlling the 3D viewer programmatically.

What You Can Do

Full Documentation

For complete API endpoint reference and SDK method documentation, visit:

AR Modes

Wearable Mode Categories

Enabling AR

1. 1Open your project and click the Settings (gear) icon.
2. 2Go to the "Advanced" tab.
3. 3Toggle "Enable AR (Augmented Reality)" ON.
4. 4Choose the AR mode: Default (surface placement) or Wearable (try-on).
5. 5For Wearable mode: select the tracking category (Face, Wrist/Hand, or Body).
6. 6Optionally upload a .usdz file for native iOS AR Quick Look support.
7. 7Toggle "Auto-launch on mobile" to automatically open AR when users scan the QR code.
8. 8Toggle "AR Analytics" to track AR engagement metrics.
9. 9Save your project — AR is now available in the shared viewer.

USDZ Files for iOS

iOS AR Quick Look works best with Apple's USDZ format. Without a USDZ file, iOS may attempt to use the GLB file, but results can be unreliable.

AR on Desktop (QR Code)

When a desktop user clicks the AR button in the floating tools toolbar:

1. 1A polished QR code modal appears with an animated scanning line.
2. 2The QR code encodes the share URL with ?ar=1 appended.
3. 3Users scan with their phone camera (most phones support this natively).
4. 4The link opens the shared viewer on their phone, which auto-launches AR.
5. 5Users can also copy or open the link directly from the dialog.

AR Analytics

When AR Analytics is enabled, Simplio3D tracks the following events:

View analytics via the API: GET /projects/:id/ar-analytics

Request Lifecycle

Each request moves through a status pipeline. Use statuses to track progress from initial receipt to completion.

Dashboard Overview

The Requests dashboard provides:

• Stats cards at the top showing counts per status (New, Read, In Progress, Completed).
• Tabs for filtering by status (All, New, In Progress, Completed, Archived).
• Search by customer name, email, or project name.
• Filters by project, date range, and status.
• Bulk actions — select multiple requests and change status, archive, or delete in bulk.
• CSV export — download all filtered requests as a CSV file for spreadsheets or CRM import.

Request Detail View

Click any request to open its detail view. The detail view contains:

PDF Generation

Generate a professional PDF document from any request. The PDF includes your company branding (configured in Project Settings > PDF tab), the configuration breakdown, pricing, and screenshots. Use this for sales quotes, order confirmations, or production sheets.

Email Notifications

Receive email notifications whenever a new request is submitted:

1. 1Go to the project editor > Project Settings > Email tab.
2. 2Choose the SMTP driver: Default (Simplio3D servers), Custom SMTP, or SendGrid.
3. 3Enter the notification email address(es) — comma-separated for multiple recipients.
4. 4Customise the email subject and body templates using variables like {project_name}, {customer_name}, {total_price}.
5. 5Click "Send Test Email" to verify delivery.

Email Logs Tab

Each request has an Email Logs tab that shows every email sent for that request: notification emails to your team, confirmation emails to the customer, and any follow-up emails. Each log entry shows the timestamp, recipient, subject, and delivery status.

The 30-day Pro trial

When you sign up — or the first time you log in after the trial rollout — your account is automatically enrolled in a 30-day Pro trial. During the trial you get:

• 140 projects, 1,000 materials, 100 models
• Full access to Configurator and Modular project types
• SDK / API access using your API token
• Working Share View links on all your projects
• Every integration: WooCommerce, Shopify, AR, AI Assistant

When the trial ends — the 7-day grace period

Day 31-37 is a read-only grace period, designed so your customer-facing surfaces don't break the moment your trial expires:

• Dashboard: you can still browse Projects, Materials, Assets, Requests — but saves, uploads, and edits return a 402 error.
• Share View links: still live. Your customers can keep configuring and submitting forms.
• SDK / API reads: still work, so headless storefronts keep functioning.
• SDK / API writes: return 402.

After day 37 the account becomes hard-locked:

• Dashboard pages: all locked except Billing, Profile, and Support.
• SDK / API: every call returns HTTP 402 — even reads.
• Share View links: replaced by a "Configurator unavailable" page.
• Project editor: redirects to /dashboard/billing.

Your data is preserved — projects, materials, saved configurations, integrations, API tokens, and webhook deliveries all stay intact. The moment payment succeeds, every locked surface re-enables exactly as it was. SDK API tokens are auto-rotated after 90 days of inactivity; you re-issue a new one from Profile → API after activating.

Activating a paid plan

1. 1Click the "Billing" entry in the dashboard sidebar (or open Profile → Subscription tab).
2. 2Pick a plan: Pro monthly, Pro yearly, Starter monthly, or Starter yearly.
3. 3Click "Activate plan". You will be redirected to Stripe Checkout.
4. 4Complete payment with a credit card (Stripe handles 3D Secure and tax automatically).
5. 5You will be redirected back to /dashboard/profile?billing=success. Simplio3D activates the account in the background — usually within a few seconds.

Trial countdown banner

The dashboard shows a persistent banner with the remaining trial days. In the final 7 days the banner turns red and urgent. After payment is past due (failed retry on a paid plan) the banner also goes red. Click "Activate plan" (or "Update billing") to fix it.

Managing your subscription

After activation, the Billing page gives you:

• Change plan: upgrade from Starter → Pro (instant). Downgrades validate your usage against the new plan's limits and refuse if you would exceed them.
• Cancel: cancels at the end of the current billing period; your account stays active until that date.
• Resume: undoes a pending cancellation before it takes effect.
• Customer Portal: Stripe's own self-service portal for invoices, payment methods, and tax IDs.

Status reference