A component includes all relevant product features and characteristics. Later in the configuration, the characteristics and their values serve as the options the customer can choose between and therefore, they are the major component of the configuration.
There are different data types available for presenting different types of product characteristics in the frontend. Explanations of each data type can be found in other help articles, f.ex. in the article "configurator terms". The following list shows the available data types:
Selection:
simple selection
multiselect
checkbox
radio buttons
multiselect with quantity
list with images
Text:
small text input
big text input
static input
product attribute
Combination:
simple combination
formula
price list
Actions:
Save-Button
The functions of the different data types are explained in detail in other articles.
When you have decided which data type is appropriate for your application case, please follow these steps:
Step 1 Create a new component
Step 2 Create a new characteristic
Click on the characteristic to open the settings.
Step 3 Define the characteristic
Define an ID for the characteristic. The ID is individual and can be used only once within one component, because IDs are responsible for identifying the characteristics internally in the backend. Thus, IDs are essential for the internal communication between configurator and web shop backend. Please keep in mind that IDs do not include capital letters and blanks must be replaced by underscores.
Beside the ID, you give your characteristic a title. This title is shown in the web shop frontend, meaning in the configurator in your web shop visible for your customer.
As mentioned above, there are a lot of different data types available for presenting the different options for your characteristic in the frontend. Here, you can choose a data type easily via Drop-Down.
For every characteristic, you can decide whether it is a required field in the configuration or not. If you choose "no", there is no validation for this characteristic.
Here you decide whether the configuration step is visible. Of course, in case of a selection between options you have to make it visible. But in case of a multi-stage price calculation (combination of several formulas and price lists) it makes sense to calculate the first stages in the background invisibly for the customer.
Determine, in which sort order the characteristic options are shown. For example, in case of a zero, the characteristic with the number 0 is shown at first, then 1,2,3 and so on...
In case you want to integrate the configurator into your web shop and you already defined CSS classes for the theme that are also relevant for the product configurator, you can link them here. For example, if you have red scripture in your product detail page and you want the scripture in the configurator also to be red, you can address the already defined CSS-class here.
For some of the data types you can deposit an image. For example, if you have a characteristic "color" with several options you can insert a color palette.
Red-marked area
This area includes different setting options depending on the data type of the characteristic. The specific settings in combination with each data type are explained in other help articles.
Step 4 Define Values
Click on "Add Value" to add a value to your characteristic. For example, if you have the characteristic "color", you can add here the different colors as values (red, green, blue, ...).
9) Give every value a title. The title is shown on your website in the configurator.
10) Define values. You can imagine values as IDs. They are important for the communication between web shop backend and configurator and have to be unique. Please keep in mind that there must be no capital letters in values and blanks have to be replaced by underscores.
11) Here you can define individual extra charges for each value. For example, the color red costs 2,50 Euros more than the other colors.
When you click on one of the values another window with further settings opens:
Here you can define an article number, add additional information to that particular value and add a value image via drag-and-drop if you like to.
Please don't forget to click on "Save" bevor leaving the characteristic settings!
Please give us a feedback! Does this article help you? If not, please do not hesitate to contact us personally via chat (blue chat button).
