Skip to content
Dopple Documentation

Config Mode

No-Code Configuration

Section titled “No-Code Configuration”

The Configuration feature allows users to define customizable product options and properties without coding. This enables interactive product configuration selections for consumers, such as colors, materials, and components.

Start by importing a glTF into your project. The glTF should have nodes that are set up for configurability.

Your configurable product properties could include the below items. Some depend on the setup of your glTF.

  • Colors
  • Materials
  • Product Size
  • Mesh swap
    • Mesh swap changes the product’s mesh (shape), used for product variations
      • Example: 2-seat vs 3-seat sofa, or product accessories
      • Example: add a pillow or change sofa arm type
  • Positions
  • Animations on/off

You can also set up configurations for items like:

  • Environments
    • Create multiple environments in the Editor Mode
  • Cameras
    • Create multiple cameras in the Editor Mode
  • Auto-rotation
    • To enable auto-rotation configuration, each camera used must have a rotation speed set in the settings

Setting up 3D Configuration

Section titled “Setting up 3D Configuration”

Add Properties

  • Set up attributes like color, size, or material that can be customized

Create Options

  • Assign specific choices for each property (e.g., Red, Blue, or Green for color)

Define Options

  • For each option, in the nodes menu, click the circle next to each node to toggle the state
  • The green checkmark will make that node enabled when that option is selected
  • The red X will make that node disabled
  • The empty circle leaves the node un-impacted

Preview Changes

  • Test the configuration in real-time to ensure proper functionality with the draft preview in your project.
  • Properties will appear in the order in which you created them
  • For each property, the options will appear in alphabetical order
    • In the Config mode, the first option in each property list is the one that will show in Preview by default
    • An integration specialist will be able to set defaults in your final implementation on a web page

Save and Apply

  • Finalize the configuration by saving and syncing your project to cloud and publishing your product