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 and clears any @media responsive overrides. If you've made custom edits (including mobile @media blocks), copy them first with Copy CSS.

The Styles CSS editor can also hold responsive @media token overrides in the same place as base variables — see CSS Variable Customization.

Details

Control Description
Style Template dropdown Lists all available predefined style templates.
CSS editor Editor showing the current CSS variables (and optional @media overrides). Updates when you pick a template.
Copy CSS button Copies the current Styles CSS, including @media blocks, to your clipboard.
Reset button Reverts base CSS variables to the selected template's defaults and clears @media overrides.

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

    • Calculator Templates

      Overview Calculator templates are pre-built calculator configurations you can browse, preview, and install into your store as a new draft calculator. They are not the same as style templates in the editor (those only control colors and CSS). Go to ...

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

    • Set up the Order Confirmation Email

      Overview Shopify’s order confirmation email shows the product name and variant. It does not show Appify CPO selections, and its built-in reorder posts only a variant id. This article adds both: The customer’s visible options under each line (Width, ...