Creating a configurator
  • 02 May 2024
  • 6 Minutes to read
  • Contributors
  • Dark

Creating a configurator

  • Dark

Article summary

As it is possible on the welcome page, you can also create a configurator by simply clicking on the + New configurator button in your configurator section. You will get a pop-up in which you can select a template and choose a name for your configurator or optional required asset bundles.


When you add a new configurator, a draft is created automatically.
A draft is an unpublished version of a configurator. In a draft you can edit your data and the configurator design. You can preview your changes in your draft and can decide when your draft is ready to be published.
As soon as your draft is published, you have a live configurator, ready to be used and embedded on your website.
Deleting a draft will not be available until one published version exists.

If there is a published version of the configurator, it can be accessed by everyone through a link. The link can be found on the dashboard or on the embed page. The structure of the link looks something like:{CompanyName}/{ConfiguratorName}

If the configurator isn't used anymore, it can be unpublished through the button in the drafts page. This action will delete the published version of the configurator, but it will not delete anything from the history.

Configurator history

Each draft that has ever been published is archived in the history. If something doesn't look good in your published configurator, you can always access the previous version in the history (preview the configurator as well as entering the editor in readonly mode).

In order to find the desired history version, you can enter a description text each time you publish the configurator.

Draft management

Besides the initial draft which gets created upon configurator setup, you can of course create a new draft by clicking the + New draft button in the drafts page. (Tip: This also gives you the option to create a new configurator based on an existing draft).

By default, a new draft is based on the published configurator version.
You can also create a draft based on another draft or a stage (if available).

There is a limit of 10 drafts that can exist at the same time per configurator. This means there can be 10 different unpublished versions of a configurator. To avoid chaos we recommend the following naming conventions for drafts:

draft namingusage
dev {your name}In a "dev" draft you work productively on a configurator. There should never be more than one dev draft.
del {your name}This draft can be deleted and is only used for looking up things in the configurator or for test purposes.
hotfix {bug}A "hotfix" draft is for small changes and should be published quickly. The draft should always be named with a short description explaining its purpose.
review {your name}This draft is used when someone reviews the development of the configurator.

Instead of your name, you can also describe the changes or adaptions that you will implement in this draft. e.g.: "dev price calculation"

You have several interaction possibilities with drafts (see three dot menu):

  • Edit draft ... this will enter the configurator editor and allows you to make changes
  • View draft in editor … this also opens the configurator editor, but you cannot make any changes here, only view the internals of the configurator.
  • Preview draft ... will preview the draft configurator in a new tab, so you can test the changes you made while you are working. Do not embed a preview on your website, only embed the published (or staged) version of your configurator!
  • Duplicate draft ... creates a new draft (or configurator) based on the selected draft
  • Delete draft … removes the draft. Deleted drafts can be restored within a period of time (see the next section)
No checkout in preview

Previews don't support the Share and Checkout features. These are only available in published or staged configurators.

Restore Deleted Drafts

If you have accidentally deleted a configurator draft you can recover it within 30 days of it being deleted.
Expand the "Deleted drafts" section at the bottom of the drafts page and find the draft you wish to restore.
One click on the "Restore" button and you have your draft back.

Keep in mind that you cannot exceed the maximum number of drafts this way – so if you already have 10 drafts, you first have to publish or delete one of them before you can create or restore more.

Configurator Stages

A stage is a version of a configurator that can be embedded in a website to test all features of a configurator before publishing it. Stages are a powerful tool that unlock more sophisticated development workflows and are typically embedded in a dedicated QA environment, not on your actual production website or shop.

A stage can be created in one of two ways:

  1. by opening a draft in the configurator editor and pressing the "Stage" button
  2. by staging an already existing history version of the configurator (mostly as a starting point for further development)
Number of stages

You can only create a limited number of stages, which depends on your subscription.
Contact us if you are interested in (more) stages!

A staged version of a configurator works in almost the same way as a published configurator.
Unlike a preview, a stage supports all features of a configurator to allow you to make end-to-end tests of a configurator before publishing it.
Keep in mind though that a stage does not replace a published configurator! While it supports all configurator features, there are limits on how many configurations can be created with a stage in a certain period of time.

A configurator stage cannot be edited directly.
Like with the published version of your configurator, you have to create a draft based on the stage in order to make changes.
Once the draft is ready, you can stage it again and thus update the staged version.
Unlike a preview, the embed URL of the stage won't change when you stage a new draft.

You can alter the behavior of a configurator when it is staged, published or in preview, which may be necessary e.g. in checkout to account for differences between a production and QA environment.

Development workflow with stages

Here is an example of a typical development workflow that makes use of stages:

  1. create a configurator draft as usual and make the desired changes to your configurator
  2. stage the draft. Enter a name for the stage if you don't have one already.
  3. embed the stage in your QA website to test it
  4. create a new draft based on the stage to continue development
  5. once the new draft is ready, stage it again.
    • Repeat these two steps until you have made all necessary changes.
    • You can keep testing the embedded configurator throughout the entire process.
  6. when you are done testing it, publish the stage
    • Until you publish a stage, the live version of your configurator remains fully unaffected by your work on drafts and stages

Assign asset bundle and configurators

After you have entered the configurator editor you can of course start editing the configurator logic, but at some point you probably want to use assets inside the configurator.

In this case, an asset bundle must be assigned to a configurator. This can be done clicking on the asset drawer in the top center, which lets you select your desired asset bundle. All versions of the asset bundle should now be listed, you probably want to assign the newest version at the top to your configurator. This will be done by clicking on the + icon on the left of the desired version.

Component and groups

In order to build your configurator logic, you can create components and cluster them together in groups.
The content of those components is Hive code, for more information see Hive introduction.

Embed finished configurator

After you have successfully created your first configurator, it is ready to publish, simple hit Publish button in the top center in the configurator editor. This will create a new version (as already discussed above) and redirect you to the drafts page.
You can now embed your configurator wherever you want, for more info see embedding.

Was this article helpful?

What's Next