Site configurator
To allow website users to create structures with the desired dimensions, openings, colors, and profile systems, the site includes a configurator.
The configurator has a permanent URL address that looks like website-address.com/client-configurator/types. For example - https://manual.vitrager.com/client-configurator/types
The configurator consists of 3 steps:
- Select the form - this is the type of structure that the user can choose. The list of structures available for selection is configured in the section My Websites ➤ Online Sales Settings ➤ List of Collections Available for Sale by selecting the collections of a specific category (type of window, entrance door, balcony door, etc.).
Please note! When selecting entrance doors, it is possible to choose the opening type (outside/inside) and structural design (mono block/multiblock).
This page also has SEO settings where you can configure SEO information and page descriptions. Learn more ➤ here.
Please note! SEO settings for each website language are configured separately. - Settings - on this page, the user is shown a visual representation of the structure with dimensions, and they can modify the structure by specifying parameters:
Please note! When first entering the page, a hint window will appear indicating where to click to add openings/mullions.
- Dimensions
- Adding opening types and imposts (available for windows and balcony doors)
- Opening direction (available for all types of doors)
Please note! The page includes a link to the measurement instructions page. For more information about configuring the measurement instructions page, see ➤ here.
After clicking the Confirm Configuration button, the user will be redirected to the Collection Selection Page.
Collection selection page
The collection selection page is the third step of the configurator. On this page, the user can choose the profile system and construction color.
For convenience, a filter of available profile systems is present on the left side. The filter includes the following parameters:
- Material - type of profile system material
- Filling option - type of glazing unit (single-chamber, double-chamber, etc.)
- Profile depth
- Class of energy-saving
- Configuration
The profile system card contains the following data:
- Image - the image is taken from the collection’s media files (work photo gallery), the first image in the album
- Promo tag (if configured in the Configuration Option) - displayed in the top left corner over the image
- Discount percentage (if configured in the General Information of the collection) - displayed in the top left corner over the image
- Class of energy-saving with its value - displayed in the top right corner over the image. This value is calculated based on the dimensions, configuration, and equipment of the construction — it represents something between the collection’s Uf coefficient and the glazing unit’s Ug value, depending on which area is larger. The description and classification are configured in the section Online Sales ➤ Energy Efficiency Indicator and Energy-Saving Classes
- Available colors - a list of popular colors + the base color. Colors are configured in the collection settings under the section Online Sales ➤ Popular Colors Block
Please note! When the user clicks a color, they will be directed either to the product page or the configuration settings page (depending on your site settings) with the selected double-sided laminated color. - Marketing slogan - configured in the collection’s General Information. It is also possible to add translations for different languages.
- Collection name
- Configuration type - configured here
- General characteristics:
- Profile system (number of chambers)
- Frame depth (in millimeters)
- Glazing (type of glazing unit)
- Price block - displays the price + currency. The crossed-out price (without discount) is shown above the regular one (if configured in the General Information of the collection)
- Details / Change button — clicking it will redirect the user.
Please note! Depending on your online sales settings, the user can be redirected either to the product page or the configuration settings page.
To redirect the user to the product page after selecting a collection, the following condition must be met:
In the online sales settings of your site, the parameter "Visiting product pages after the e-commerce configurator" must be ☑️ enabled.
Learn more about the product page ➤ here
To redirect the user to the configuration settings page after selecting a collection, the following condition must be met:
In the online sales settings of your site, the parameter "Visiting product pages after the e-commerce configurator" must be ⊘ disabled.
Learn more about the configuration settings page ➤ here
Collection selection page (mobile version)
In the mobile version, when navigating to the collection selection page, filters for available profile systems are displayed.
To view all results without filters, you need to:
- Click the cross icon in the upper-right corner of the window

- Or click the left arrow in the upper-left corner of the window

- Or click the Show results button at the bottom of the window.
To open the filters, click the Filter button at the top of the page ![]()
The filter includes the following parameters:
- Material – the type of profile system material
- Filling option – type of glazing unit (single-chamber, double-chamber, etc.)
- Profile depth
- Energy-saving class
- Configuration
For convenience in the mobile version, cards are grouped by profile systems, and if configurations (basic, optimal, premium) are set up in the collection, they will be displayed as a slider. The profile system card contains the following data:
- Image – the image is taken from the collection media files (photo gallery of works), using the first image from the album
- Promo tag (if configured in the Configuration Option) – displayed in the upper-left corner, over the image
- Discount percentage (if configured in the General Information of the collection) – displayed in the upper-left corner, over the image
- Energy-saving class with value – displayed in the upper-right corner, over the image. This value is calculated based on the dimensions, configuration, and composition of the structure. It represents something between the collection’s Uf coefficient and the glazing unit’s Ug coefficient, depending on which area is larger. The description and classification are configured in Online Sales ➤ Energy Efficiency Indicator and Energy-Saving Classes
- Available colors – a list of popular colors + the base color. Colors are configured in the collection settings under Online Sales ➤ Popular Colors Block
Please note! When clicking on a color, the user will be redirected either to the product page or to the configuration settings page (depending on your site settings) with the selected color in double-sided lamination. - Marketing slogan – configured in the collection’s General Information. You can also add translations for different languages.
- Collection name
- Configuration type – configured here
- General characteristics:
- Profile system (number of chambers)
- Profile depth (in millimeters)
- Glazing unit (type of glazing unit)
- Price block – displays the price + currency. The crossed-out price without discount is shown above the regular price (if configured in the General Information of the collection)
- More/Change button – clicking it redirects the user.
- Included in the price – shows information about the type and name of the glazing unit (for example, “Double-chamber glazing unit 4 - 16 - 4 - 12 - 4”)
Please note! Depending on your site’s online sales settings, the user may be redirected either to the product page or to the configuration settings page.
To make the user go to the product page after selecting a collection, ensure that in the website online sales settings the parameter "Visiting product pages after the e-commerce configurator" is ☑️ enabled.
Learn more about the product page ➤ here
To make the user go to the configuration settings page after selecting a collection, ensure that in the website online sales settings the parameter "Visiting product pages after the e-commerce configurator" is ⊘ disabled.
Learn more about the configuration settings page ➤ here
