CSS Variable Customization

CSS Variable Customization

Overview

Calculator AI uses CSS custom properties (variables) prefixed with --calc-* to control every visual aspect of your calculator. By editing these variables, you can fine-tune colors, fonts, spacing, border radius, shadows, and more — all without touching your theme's CSS. The variables are scoped to your calculator, so changes do not affect the rest of your store. You edit them in Calculator Editor → Placement & Styling → Styling → Styles sub-tab, in the CSS editor below the template dropdown.

Quick Reference

Variable Category Examples
Colors --calc-primary-color, --calc-bg-color, --calc-text-color, --calc-border-color
Typography --calc-font-family, --calc-font-size, --calc-heading-weight
Spacing --calc-padding, --calc-gap, --calc-section-margin
Borders & Radius --calc-border-radius, --calc-border-width
Shadows --calc-box-shadow
Buttons --calc-button-bg, --calc-button-text, --calc-button-radius

How to Edit

  1. In the CSS editor, find the variable you want to change. Variables are organized by category.
  2. Edit only the value after the variable name. For example, change --calc-primary-color: #3b82f6; to --calc-primary-color: #e11d48;.
  3. The live preview updates in real time as you type.
  4. Use the Copy CSS button to copy all current variable values to your clipboard — useful for backing up your styles.
  5. Use the Reset button to revert all variables back to the current template's defaults.

Edit variable values only. Do not add new CSS rules or selectors — the editor is designed for variable customization.

Examples

  • Brand color match — Your store uses a teal brand color. You update --calc-primary-color to your exact teal hex code and --calc-button-bg to match, giving the calculator a branded feel.
  • Large-text accessibility — You increase --calc-font-size and --calc-heading-weight to make the calculator more readable for customers with visual impairments.

    • Related Articles

    • Style Templates

      Overview Style templates are predefined design presets that instantly change the look and feel of your calculator. Each template provides a complete set of CSS variable values that control colors, fonts, spacing, borders, and other visual properties. ...

    • AI Style Assistant

      Overview The AI Style Assistant lets you describe the visual style you want in plain English, and it generates the CSS variable values for you. Instead of manually tweaking dozens of variables, you can describe a look — like "dark theme with rounded ...

    • Custom JavaScript

      Overview Calculator AI allows you to add custom JavaScript to your calculator for advanced use cases that go beyond built-in configuration. You can run code when the calculator first loads (global scripts) or when a specific option's value changes ...

    • Pricing Variables

      Overview Pricing variables are named, computed values that act as intermediate steps in your pricing logic. Instead of writing one large formula, you can break the calculation into smaller, readable pieces — each stored as a variable — and reference ...

    • AI Credits

      Overview AI credits power all of Calculator AI's AI-driven features. Every time you use an AI feature — building a calculator, generating pricing formulas, translating text, or styling your calculator — a small number of credits are consumed. Credits ...