If your configurator is based on one of our two standard UI templates “basicnavbottom” or “basicnavright”, the implementation of a white label solution is already considered and can therefore be implemented very easily. If a different or no template is used, it is of course just as possible, but with more effort.
For a white label solution we use CSS variables. We do not declare them directly in the CSS sheet but set them dynamically from a component.
What is needed for the white label version:
- a record component in which all CSS variables are listed (rows = white label variants, columns = variables)
- a SigSLo, which makes the values from the record component available as CSS variables in the configurator
Then you can use the CSS variables, which you defined in the record component in the design editor. You can also switch the variables later at runtime if needed. Do not use hard coded colors, fonts etc. in your CSS!
1.Record component
In the first screenshot below you can see how such a component is built. For this use case we have used a slightly different notation for the record. Instead of the normal columns, we have inserted a paragraph after each column. This way the individual columns are below each other so that you don’t have to scroll horizontally. To still be able to know which value belongs to which column, we added the column names as comments besides the values.
The individual entries are still marked with curved brackets. Basically it is the same as if you build the record in the “normal” way and it is up to you how you format it (screenshot 2).
In our templates we have defined colors, fonts, font sizes and SVG filters. We use SVG filters to apply the right color to icons in buttons etc… All things around the design, which should be adjusted later, must be entered into this record component.
Which entry is selected is controlled by URL parameters. Here we write in the rule of the selected key for example: configuration.getParameter("company") or "cbn". Now either the value that is added as URL parameter to the configurator link is selected, or, if nothing is entered there, “cbn” is selected as default. “cbn” stands for “Combeenation” in that case. It makes sense to use acronyms for your different styling themes as the key of the record. You can add the URL Parameter by adding ?company=recordKey to your configurator URL.
2.Configurator SigSlo
We connect the record components “Value changed” signal to the configurators “Update CSS variables” slot and pass the record components “Value” to the “Variable values” parameter (screenshot 3) This makes the variables from the component available as CSS variables and updates them accordingly when the selected entry of the record component changes.
To access the variable directly in CSS, we use the normal CSS syntax: var(--variableName). If we now use colors, fonts etc. in our CSS styles in the editor, we always use the variables provided for this - an example is shown in screenshot 4. It is important that these are really used in every passage and that no values that need to be changed later are hard coded in the CSS. This way, variables like colors can be changed in one place, in the record, and thus be updated for the whole configurator.
When your configurator is based on one of our templates, the only thing you need to do to create a new styling for retailers e.g. is to copy the existing values in your record, paste it, and change them to your needs. Then you have one record for your styling and one for your retailer. The only important thing is to give it a unique key, since every entry is indentified through that key.