CSS Variable Customization

CSS Variable Customization

Overview

Appify OPC 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
Swatches --calc-swatch-item-border, --calc-swatch-label-color, …
Image swatch hover preview --calc-swatch-hover-bg, --calc-swatch-hover-border, --calc-swatch-hover-shadow, … (see below)

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.

Swatches and image hover preview

Color and image swatches (<swatch-control>) read --calc-swatch-* variables from the calculator root (the same scope as the rest of your style template). They apply inside the component’s Shadow DOM, so use these variables rather than trying to target internal class names.

When an image swatch option has Show large image when hovering turned on in advanced settings, customers see a floating preview panel. That panel is styled with --calc-swatch-hover-* so you can control panel background, border, shadow, padding, the choice label above the image, the white mat around the large image, image corner radius, pointer (caret) colors, and how quickly the preview fades in.

Set them on your calculator instance (same place as other --calc-* variables), for example on the root that wraps the calculator.

Variable What it controls
--calc-swatch-hover-bg Preview panel background (any valid CSS background, e.g. solid color or gradient).
--calc-swatch-hover-border Preview panel border (full shorthand, e.g. 1px solid #ccc).
--calc-swatch-hover-radius Preview panel corner radius.
--calc-swatch-hover-shadow Preview panel box-shadow.
--calc-swatch-hover-padding Preview panel padding (shorthand).
--calc-swatch-hover-title-color Label text color above the image.
--calc-swatch-hover-title-size Label font-size.
--calc-swatch-hover-title-weight Label font-weight (e.g. 600 or bold).
--calc-swatch-hover-title-line-height Label line-height.
--calc-swatch-hover-title-margin Label margin (shorthand).
--calc-swatch-hover-frame-bg Mat behind the large image (background).
--calc-swatch-hover-frame-radius Mat corner radius.
--calc-swatch-hover-frame-padding Mat padding (shorthand).
--calc-swatch-hover-img-radius Large image corner radius (often var(--calc-swatch-img-radius)).
--calc-swatch-hover-caret-edge Pointer triangle outer color.
--calc-swatch-hover-caret-fill Pointer triangle inner fill (usually matches the panel background).
--calc-swatch-hover-fade-duration Preview opacity transition time (e.g. .12s, 200ms).

The full list with defaults also appears in the Styles editor when you use or reset a template; variable names match the technical reference in the developer docs.

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 Appify OPC 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 Appify OPC'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 ...