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 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, in the CSS editor below the template dropdown. The same editor also supports responsive overrides with @media queries (for example, smaller fonts and padding on mobile).

Quick Reference

How to Edit

1. In the CSS editor, find the variable you want to change. Variables are organized by category.
2. Edit the value after the variable name. For example, change --calc-primary-color: #3b82f6; to --calc-primary-color: #e11d48;.
3. (Optional) Add @media queries at the bottom of the same editor to change those tokens on mobile or other breakpoints — see Responsive styles with @media.
4. Check the live preview (resize the browser or use device preview when testing on the storefront).
5. Use Copy CSS to copy the full Styles CSS, including any @media blocks.
6. Use Reset to restore the selected template’s base tokens and remove all @media overrides.

Responsive styles with @media

Use @media when desktop and mobile should use different token values (font size, padding, gaps, button sizing, and so on). You do not need a second editor — add the query in the same Styles CSS box.

Steps

1. Open Placement & Styling → Styling → Styles.
2. Note your calculator scope selector. It appears under the CSS editor and looks like: .calc-ssr[data-calculator-id="YOUR_CALC_ID"]
   Use that exact selector inside your @media block (copy it from the help line under the editor).
3. Set your normal (desktop) token values in the base blocks at the top of the CSS.
4. Scroll to the bottom of the CSS and paste an @media block that overrides only the tokens you want to change on smaller screens.
5. Save / publish, then verify on a phone or by narrowing the browser window.

Example: tighter mobile layout

/* Base (desktop) values live in the generated blocks above.
   Add your responsive overrides at the bottom: */

@media (max-width: 749px) {
  .calc-ssr[data-calculator-id="YOUR_CALC_ID"] {
    --calc-font-size: 13px;
    --calc-container-padding: 12px;
    --calc-option-gap-x: 4px;
    --calc-control-padding-y: 8px;
    --calc-control-padding-x: 10px;
    --calc-input-height: 36px;
  }
}

Replace YOUR_CALC_ID with your real calculator id from the scope selector under the editor.

Example: option-type override on mobile

You can also target option-type blocks that already appear in the Styles CSS (for example buttons):

@media (max-width: 749px) {
  .calc-ssr[data-calculator-id="YOUR_CALC_ID"] .calc-ssr__option--type-button {
    --calc-btn-padding-y: 8px;
    --calc-btn-padding-x: 12px;
    --calc-btn-radius: 8px;
  }
}

What is allowed

On save, Appify keeps calculator-scoped custom properties inside @media and drops other declarations.

Tips

• Prefer changing a few tokens (font size, padding, gaps) rather than rewriting the whole stylesheet.
• Common mobile tokens: --calc-font-size, --calc-container-padding, --calc-option-gap-x, --calc-control-padding-y, --calc-control-padding-x, --calc-input-height, --calc-btn-padding-y, --calc-pcb-padding-y.
• Shopify themes often treat phones around 749px / 750px width — max-width: 749px is a solid default for “mobile.”
• You can add more than one @media block (for example tablet and phone).

How this interacts with templates, Reset, and AI

If you rely on responsive overrides, copy your CSS before switching templates or pressing Reset.

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.

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.

Product Designer button

If your calculator has a Product Designer option, its launch button is styled by these variables (grouped under ProductCustomizerButton in the Styles editor). Every style template sets sensible defaults that follow your theme, so the button matches your calculator out of the box — no custom CSS required.

See Setting up the Product Designer option for how the button fits into a calculator.

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.
• Mobile-friendly spacing — Desktop keeps comfortable padding; you add @media (max-width: 749px) to reduce --calc-container-padding and --calc-font-size so the calculator fits small screens without horizontal scrolling.

Related Docs

• Style Templates
• AI Style Assistant
• Calculator Editor Overview