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

Appify CPO Calculator Block Summary Settings

When you enable Show price summary in the Appify CPO 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 Appify CPO 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 Appify CPO 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.