Calculator Appearance
Cost Calculator gives you full control over how your calculator looks on the front end, so you can match the design of the calculator to your branding. It can be customized in two tabs: Layout and Theme, each managing a different visual layer of the calculator.
Layout
The Layout tab controls the overall structural arrangement of the calculator on the page: how wide it is, where the order summary sits relative to the input fields, and how space is distributed between the two panels.
Summary Position - The Summary Position setting determines where the order summary (totals panel) is rendered relative to the input fields section.
Left - Places the summary panel to the left of the input fields.
Right - Places the summary panel to the right of the input fields (side-by-side layout).
Bottom - Stacks the summary panel below the input fields in a single-column layout.
Max Width (px) - Sets the maximum total width of the entire calculator widget in pixels. The calculator will not exceed this width even on wide screens. The calculator stretches up to this width and centers itself within its parent container.
Calculator Width (%) - Controls what percentage of the total calculator width is occupied by the input fields panel (left/main column). The remaining percentage is automatically assigned to the Summary panel.
Summary Width (%) - Controls what percentage of the total calculator width is occupied by the summary/totals panel. This slider is linked to the Calculator Width slider — they always sum to 100%.
Additionally, you can use your cursor and drag to adjust the calculator width while you are in a Layout Tab:
Theme
The Theme tab provides two levels of customization: Brand Themes (pre-built color palettes you can select and then optionally customize) and the full Theme Editor (six sub-tabs covering Colors, Typography, Borders, Shadows, Spacing, and Preloader).
Brand Themes
The Brand Themes section displays a grid of pre-built color schemes. Each theme is represented by 5 color swatches (background, accent, error, etc.). Clicking a theme applies it instantly to the calculator preview.
Customize button opens the full Theme Editor pre-populated with that theme's values so you can tweak individual properties. Changes affect immediately and can be seen right on the builder:
Saved Themes
Under the brand themes, there are themes that you have customized. Once you customize the brand theme, it'll automatically be saved and can be accessed from here anytime in any calculator. To save the theme, simply save the calculator. You can delete, duplicate, and further customize the saved themes:
Theme Editor
Clicking Customize on any brand theme (or clicking the icon in the saved theme) opens the Theme Editor panel with six icon tabs at the top. Each tab controls a different visual category:
There are 6 tabs in the theme editor:
Colors — background, text, accent, form fields, and error colors
Typography — font sizes and weights for every text element
Borders — container and field border weight, radius, and style
Shadows — drop shadow color, opacity, blur, and offset
Spacing — field indent, field spacing, button/field height, container margins
Preloader — the spinner animation shown while the calculator loads
Colors
The Colors tab lets you set the hex values for the five core color roles used throughout the calculator UI. Click the color swatch next to each field to open a color picker, or type a hex code directly.
Container - The background color of the entire calculator widget container.
Opacity - Background opacity percentage (0 = fully transparent, 100 = fully opaque). Works together with the Container color.
Blur - Background blur in pixels applied to the container background (useful for frosted-glass effects when opacity < 100).
Container Background settings:
Container Background settings:
Text color - The color is applied to the calculator title, Total summary, and names of fields.
Accent (buttons & picks) - This color will be applied to the buttons and sliders.
Form fields - The color is applied to the background of the fields.
Error сolor - The color of the error notifications when required fields are not filled out.
Apply Accent Colors to SVG icons - applies the accent color to the fields that have SVG images. These fields can be image radio, image dropdown, image checkbox, etc.
To provide the best user experience, the changes can be seen on the builder immediately. However, it's important to save the calculator itself to apply the changes.
Typography
The Typography tab controls font sizes (in px) and font weights for every distinct text role in the calculator. A device toggle (desktop/mobile) at the top lets you set separate values for each breakpoint.
Here is the breakdown of the tab by settings:
Hide Calculator Title - When enabled, the calculator's title heading is hidden from the front end while remaining visible in the editor.
Header text - Set up the font size and weight for the headers of the calculator: calculator name and Summary. (1)
Label text (form labels) - Set up the font size and weight for the field names. (2)
Description - Set up the font size and weight for the field description. (3)
Grand totals - Set up the font size and weight for the Total in the Grand Total section. (6)
Fields & buttons- Set the font size and weight for the field options and button texts. (7)
Summary header - Set up the font size and weight for the Name and Total in the Summary section. (4)
Summary text - Set up the font size and weight for the summary texts. (5)
Text Transform - Controls CSS text-transform for labels. Options include: None, Capitalize, Uppercase, Lowercase.
Here is a picture of where these settings will be applied.
Borders
The Borders tab provides independent control over the container border and the field-level borders, each with three properties.
Container border - Choose the type of border, size, and corner rounding radius for the calculator and summary sections. (1)
Fields border - Choose the type of border, size, and corner rounding radius for the calculator fields. (2)
Button border - Choose the type of border, size, and corner rounding radius for the buttons. (3)
Shadows
The Shadows tab controls the CSS box-shadow applied to the calculator container. This creates depth and separation from the page background.
Shadow Color - The color of the drop shadow. Click the swatch to open the color picker. Also, you can change the opacity of the shadow color from 0% (invisible) to 100% (fully opaque).
Blur - The blur radius of the shadow in pixels. 0 = sharp shadow edge; higher values create a softer, more diffuse shadow.
X - Horizontal offset of the shadow. Positive values shift the shadow right; negative values shift it left.
Y - Vertical offset of the shadow. Positive values shift the shadow downward; negative values shift it upward.
Spacing
The Spacing tab controls the internal padding and sizing of elements within the calculator. A device toggle (desktop/mobile) at the top allows separate values per breakpoint.
Here is the breakdown of the tab by settings:
Field side indent - Horizontal padding (left and right) inside each input field.
Field spacing - Vertical gap between consecutive fields in the calculator form.
Field & button height - The height of all input fields and button elements. Increase for a more spacious, touch-friendly design.
Container margin - Space between the top/bottom/left/right edges of the page/container and the calculator.
Container padding - Space between the top/bottom/left/right edge of the calculator and subsequent content.
Description Position - The placement of the field descriptions against the field.
Preloader
The Preloader Icon tab lets you choose the loading spinner animation that appears while the calculator initializes or recalculates. Six icon options are available.
You will see an animation until the content of the calculator loads:
Last updated
Was this helpful?