Style Templates

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. Templates give you a polished starting point so you can get a professional-looking calculator without writing any CSS. You apply templates in Calculator Editor → Placement & Styling → Styling → Styles sub-tab.

Steps

  1. In the Styles sub-tab, locate the Style Template dropdown at the top.
  2. Click the dropdown and browse the available templates (e.g., "Clean", "Modern", "Minimal").
  3. Select a template. The CSS variables in the editor below update immediately, and the live preview reflects the new look.
  4. If the template looks good as-is, publish your calculator.
  5. If you want to tweak the template, edit the CSS variables in the editor below the dropdown. Your changes override the template defaults.

Switching templates replaces all current CSS variable values. If you've made custom edits, consider copying them first using the Copy CSS button.

Details

Control Description
Style Template dropdown Lists all available predefined style templates.
CSS editor Editor showing the current CSS variables. Updates when you pick a template.
Copy CSS button Copies the current CSS variable values to your clipboard.
Reset button Reverts all CSS variables back to the selected template's defaults.

Examples

  • Quick launch — You're building your first calculator and want it to look great immediately. You select the "Clean" template, preview it, and publish — no CSS editing needed.
  • Branded customization — You pick the "Modern" template as a starting point, then adjust the primary color variable to match your brand's hex color. The rest of the template's design stays intact.

    • Related Articles

    • 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 ...

    • Calculator Editor Overview

      Overview The calculator editor is the main workspace where you build and customize your product calculator. It is divided into three areas: a header bar at the top, a tabbed main panel in the center, and a live preview panel on the right. Together, ...

    • 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 ...

    • 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 ...

    • Installing Calculator AI on Your Theme

      Overview Before your calculators can appear on your storefront, you need to enable Calculator AI in your Shopify theme. This is a one-time setup that takes a couple of minutes. After completing these steps, your theme will be ready to display ...