Price Summary Display

Price Summary Display

Overview

The price summary is the breakdown panel customers see alongside your calculator on the storefront. It shows how the final price is composed — options, fees, discounts, and total. You control which fields appear and how the summary is displayed. Configuration has two parts: choosing which fields to show (in the Appify OPC app) and enabling the summary on your storefront (in the Shopify Theme Customizer).

Steps

1. Configure which fields to show

  1. Open your calculator in the editor and go to Calculator Editor → Optional Features → Price Summary.
  2. Toggle each field on or off using the checkboxes.
  3. The live preview updates immediately so you can see how the summary looks.
  4. For the Options field, you can further customize which individual options and variables are listed, reorder them, and rename their labels.
  5. If you have languages enabled, click the translate icon next to any field to manage its translations.

2. Enable the summary on your storefront

The price summary does not appear on your storefront until you enable it in the Shopify Theme Customizer. There are two ways to display it:

Option A: Built-in to the calculator block — Open the Shopify Theme Customizer, select the CalcAI Calculator block, and check Show price summary in the block settings. You can then choose where the summary appears relative to the calculator (above, below, left, or right) and adjust the spacing and width.

Option B: Separate theme block — Add the CalcAI Price Summary block to your page template in the Theme Customizer. This places the summary independently from the calculator, so you can position it anywhere on the page — for example, in a sticky sidebar.

Details

Available Fields

Field What it shows
Options Individual option prices and their labels.
Quantity The selected quantity.
Subtotal Price before discounts.
Quantity Discount The active quantity-tier discount when a threshold is met.
Discounts Calculator-level discounts applied to the subtotal.
Fixed Fees Individual fixed fee line items and their amounts. Each fee is shown separately.
Total The final price after all discounts.
Unit Price Price per unit — most useful with per-unit granularity calculators.

Options Detail

When "Options" is enabled, you can fine-tune which specific options and pricing variables appear in the summary. Use the Add item dropdown to include options or variables, drag to reorder, and edit the display label for each.

You can also enable Show price difference text to display how each option choice affects the price relative to the base selection.

Row Styles

Each option or variable row in the summary can be styled with Bold, Italic, or Indent using the formatting buttons below the label field. These styles apply to both the label and value columns on the storefront.

Custom HTML Rows

Select Custom HTML Row from the Add item dropdown to insert a custom line into the summary. This lets you add headings, divider lines, or styled text between option rows without tying the row to any option or variable.

The HTML input supports: <b>, <strong>, <i>, <em>, <u>, <span> with style="color:…" or style="float:right", and <hr> for a horizontal divider line that matches the built-in summary dividers.

To place text on the right side of a custom row (like where prices normally appear), use <span style="float:right">:

Area <span style="float:right">12.5 m²</span>

All other HTML tags and CSS properties are stripped for security and layout consistency. Custom HTML rows always render as a single line.

Variable Value Formatting

By default, variables in the summary display their value as a currency amount using the store's money format. If a variable represents something other than a price (such as area, number of boxes, or a percentage), uncheck Format value as price to use a custom format instead.

When custom formatting is enabled, enter a template using {result} as a placeholder for the computed value. For example:

  • {result} m² — shows the value followed by square meters
  • {result}% — shows the value as a percentage
  • {result} boxes — shows the value followed by a unit label

You can also set the number of decimal places for the displayed value.

Custom-formatted values are not affected by market currency scaling — they are treated as non-monetary display values.

CalcAI Calculator Block Summary Settings

When you enable Show price summary in the CalcAI Calculator block, these additional settings appear:

Setting Description
Summary position Where the summary appears relative to the calculator: Above, Below, Left, or Right.
Summary spacing The gap between the calculator and the summary (0–60 px).
Summary width How wide the summary panel is when positioned left or right (20–80%).

Examples

  • Simple calculator — You enable only the Total field and check Show price summary in the CalcAI Calculator block. The customer sees one clean price number below the calculator.
  • Detailed quote with sidebar summary — You enable Options, Subtotal, Quantity Discount, Discounts, Fixed Fees, and Total. In the Theme Customizer, you set the summary position to Right with 40% width, giving the customer a full cost breakdown alongside the calculator.
  • Sticky sidebar summary — You add the CalcAI Price Summary block to a sticky sidebar section in your theme, separate from the calculator. The summary stays visible as the customer scrolls through a long calculator form.
  • Tile calculator with area display — You add a pricing variable called CUSTOMER_AREA to the summary, uncheck Format value as price, and set the template to {result} m². The summary shows the computed area alongside the price rows without a currency symbol.
  • Grouped summary with headings — You add a Custom HTML Row with <b>Material</b> above your material options, then another Custom HTML Row with <hr> to add a divider, followed by <b>Labour</b> above your labour options. This visually groups related rows in the summary.

    • Related Articles

    • Quantity option: inline price

      Overview For Quantity options using Dropdown or Radio list, you can enable Show price and discount inline. Shoppers then see the product line price for each fixed quantity (and for Custom, when a valid quantity is entered). Amounts use the same rules ...

    • Initial Price (Base Price)

      In the editor, this section is labeled Initial Price. The dropdown inside it is labeled Base price. Overview Initial Price sets the calculator’s base—the starting dollar amount the app uses before stacking option prices and (optionally) your Unit ...

    • Price Adjustments

      Overview Price adjustments are conditional rules that modify the calculated price when certain conditions are met. Each adjustment combines one or more conditions with a formula, letting you add surcharges, apply multipliers, or set overrides based ...

    • Total Price Formula

      Overview The Unit price calculation / Total price calculation field (this section is titled Total Price Formula in the nav) is the main place you define how the line price is computed from options and base. You can also set minimum and maximum price ...

    • Multi-Currency Support

      Overview Multi-currency support lets your calculator display prices in your customer's local currency. Appify OPC works with Shopify Markets, so currency conversion happens automatically based on the market rules you've configured in Shopify — no ...