Some configurators have loads of options and customers might start to get overwhelmed by all the options. One solution would be to add collapsible steps to hide some options and save those for later. Another solution would be to split the configurator up into a multi-step form. And the good thing is: you can do both with the Staggs product configurator. In this post we will explain how you can create a multi-step form with the Staggs product configurator. Let’s get right into it. Adding separators If you read the collapsible steps post you will be familiar with the separator step type. The separator step type allows you to either create collapsible steps, or mark the start of a new step page. The configuration for our demo step configurator looks like this:
Only adding the separators won’t do the trick. We have to tell the configurator to create the steps too. Enabling the configurator stepper Let’s head over to your active configurator theme. You can check which theme is selected by editing your product page and find the field “Product Configurator Theme”, located in the Staggs Configurator Builder metabox:
Version 1.x If you do not have a theme created yet, make sure to create a new one. Simply go to Staggs -> Themes and create a new theme. Also make sure to select the theme in your Staggs configurator builder on the product page. Next, go over to the “Settings” tab and scroll down to the ‘Options‘ section. Version 2.x If you do not have a template created yet, make sure to create a new one. Simply go to Staggs -> Templates and create a new template. Make sure to select the template in your Staggs configurator builder as well. In your configurator template, open up the “Separator” tab You will see the settings as displayed below.
It is important that you select ‘create stepper’ for the field “Separator function”. Save your changes and check the configurator. That’s it, now you have created yourself a multi-step configurator form! Result
Customizations If you want to maximize the configurator step feature, you should enable the stepper template. You can optionally display the step navigation (indicators for all steps), and hide the inline separator titles. The separator titles will be displayed above the attributes by default (just like the collapsible groups).