Appearance
Introduction
In the Appearance section, you have the ability to customize the visual elements of your configurator to align with your brand and user experience goals. The settings are divided into three key tabs, each focusing on different aspects of the interface. Each tab is designed to give you full control over your configurator’s appearance, helping you create a polished and cohesive user experience.
Company Information
In the Company Information tab, you can update and manage essential details about your company, such as your company name, address, website link, and branding elements. These settings help ensure that your configurator reflects accurate and up-to-date company information.
| Field | Description |
|---|---|
| Company Name | Enter your company’s official name here. |
| Address | Provide your company’s physical address here. |
| Company Link | Insert your company’s official website URL here. |
| Logo | Updates the image that appears on the homepage of your configurator. |
| Loading Logo | Displays the icon on the loading screen of the configurator. |
| Favicon | Updates the image shown in the browser tab next to the page title. |
| Configurator page title | Updates the title displayed at the top of your browser tab. |
| Help Button Markdown Content | Customize the content for the help button using Markdown formatting. |
Frontend
In the Frontend tab, you can customize the visual appearance and styling of the configurator interface. This includes options for modifying colors, fonts, buttons, images, and other UI elements to create a cohesive and branded user experience.
| Field | Description | | ---------------------------------------- | --------------------------------------------------------------------------- | --- | | Frontend Font | Selects the default font for the configurator’s text. | | Frontend Font Semibold | Defines the font weight for semibold text elements in the configurator. | | Frontend Font Bold | Specifies the font weight for bold text elements in the configurator. | | Frontend Font Light | Chooses the font weight for light text elements in the configurator. | | Header font color | Customizes the color of the text in the header section. | | Dropdown Menu Font Color | Customizes the font color of the dropdown menu options. | | Text Color | Customizes the color of the text throughout the configurator. | | Primary Color | Defines the primary color theme for the configurator interface. | | Header Color | Adjusts the color of the header section in the configurator. | | Sidebar Collapsible Background Color | Adjusts the background color for the collapsible sidebar. | | Dropdown Menu Color | Defines the background color of the dropdown menu. | | Header buttons background color | Modifies the background color of the buttons in the header. | | Header Buttons Border Color | Sets the border color of the buttons in the header. | | Config Select Border Color | Customizes the border color for selection elements in the configurator. | | Background Color | Sets the overall background color for the configurator. | | Background Form Image | Updates the background image displayed behind the form sections. | | Background Overview image | Modifies the background image where the categories and forms are displayed. | | Placeholder Image URL | Specifies the URL for the placeholder image in the configurator. | | Status Colors In Progress | Modifies the color used for items marked as in progress. | | Status Colors Incomplete | Defines the color used for incomplete statuses in the configurator. | ’ | | Status Colors Completed | Sets the color for completed status indicators. | | Info Color | Adjusts the color for informational messages. | | Warning Color | Customizes the color used for warning messages. | | Error Color | Modifies the color used for error messages and alerts. | | Success Color | Defines the color for success messages and indicators. | | URL Slug: Configuration | Defines the URL slug for the configuration page. | | URL Slug: Checkout | Defines the URL slug for the checkout page. | | Options hide prices | Toggles the visibility of prices for the options. | | Options hide fallback image | Controls the visibility of fallback images for options. | | Options hide quantities | Hides quantities on the configurator. |
In the PDF tab, you can customize the appearance of the PDF generated from the configurator, including font styles, colors, and layout options. This allows you to tailor the look and feel of the document to match your brand and preferences.
| Field | Description |
|---|---|
| PDF Font | Specifies the font used in the generated PDF document. |
| PDF Font Bold | Defines the font style for bold text in the PDF. |
| PDF Header Color | Modifies the background color of the header in the PDF document. |
| PDF Text Color | Defines the color of the text throughout the PDF document. |
| PDF Header Font Color | Customizes the font color of the text in the PDF header. |
| PDF Background Color | Adjusts the overall background color of the PDF document. |
| PDF Colored Rows Color | Sets the color for alternating rows or sections in the PDF. |
| PDF Border Color | Customizes the border color of the PDF document or elements within it. |
| Frontpage URL | Sets the URL for the front page of the configurator. |
| Branding Page URL | Provides the URL for the branding page associated with the configurator. |
| Terms and Conditions Page URL | Specifies the URL for the terms and conditions page. |
| PDF Header Title | Specifies the title displayed in the PDF header. |
| PDF File Name | Defines the name of the generated PDF file. |
Excel
In the excel tab you can customize the appearence of the excel file generated from the configurator.
| Fields | Description |
|---|---|
| Font URL | URL for the font to be used in the Excel file, allowing customization of the font style. |
| Titles font color | Sets the color for the font used in title cells (e.g., headers) of the Excel file. |
| Elements font color | Sets the font color for the content in the element cells (e.g., item descriptions, quantities). |
| Export date row font color | Defines the font color for the row that contains the export date. |
| Configuration Name row font color | Specifies the font color for the row displaying the configuration name. |
| Titles background color | Sets the background color for the title rows (such as headers or column names). |
| Elements background color | Defines the background color for cells containing the main data elements (e.g., item numbers, descriptions). |
| Export date row background color | Customizes the background color for the row displaying the export date. |
| Configuration Name row background color | Customizes the background color for the row containing the configuration name. |
| Item number column width | Sets the width of the column containing item numbers. |
| Description column width | Determines the width of the column containing item descriptions. |
| Quantities column width | Defines the width of the column for quantities of items. |
| Unit Price column width | Sets the width for the column showing the unit price of items. |
| Total Price column width | Specifies the width of the column showing the total price for items. |
| File Name | Defines the name of the Excel file when it is saved or downloaded. |
| Sheet Name | Specifies the name of the sheet in the Excel file. |
| Display excel download button | Determines whether the download button for the Excel file will be visible to the user. |