Calculation display (Premium)

Written By Floris de Vries

Last updated About 1 hour ago

Premium featureCalculation display is available on premium plans.

The Calculation display field shows the customer a clear breakdown of how their final price is built up. It does not collect any input – it is a display-only block that you place inside the calculator next to the regular fields.

This is ideal for products where the price is calculated from several components (surface area, options, surcharges, discounts) and customers want to understand the math.

Adding the field

  1. Open Step 1: Fields of your calculator.

  2. Add the Calculation display block from the toolbox.

  3. Pick a Layout: Table for a clean two-column breakdown, or Text for a free-form sentence-style summary.

Configuring the rows (Table layout)

Open Step 4 → Calculation display in the formula builder to define the rows that should appear.

Each row has:

  • Label – the text shown on the left.

  • Formula – the value or expression shown on the right. It can use any form field, the product price, metafields, math helpers, and computed properties.

  • Bold – highlights the row, useful for the final total line.

  • Format as money – formats the value as a currency string using the shop’s formatting rules. Disable for plain numbers (e.g. quantities or surface area in m²).

Rows can be reordered by drag and drop.

Configuring the template (Text layout)

The text layout uses a multiline template where field values are referenced with curly braces, for example:

You ordered {quantity} pieces of {material} for a total of {total}.

Any variable that is valid in a formula (form field key, computed property, product_price, metafield) can be used in the template.

Styling

The block has its own design controls under Step 3: Customize design (typography, table borders, row dividers, outer border, etc.). They live in the Calculation display section and only affect this field.

💡 Tip: Combine the Calculation display with computed properties. Define each pricing component once as a custom variable and re-use it both in the row formulas and in your main pricing formula. The numbers shown to the customer will then always match the price they pay.