The storefront calculator
The Print Price Engine product-page calculator, covering block installation, size and quantity styles, custom labels and colours, validation, and live pricing. Try the demo.
The calculator is a theme app extension block that renders on any product with an assigned recipe, and hides itself everywhere else.
See it working#
Configure Your Order
A working model of the storefront calculator, with demo rates.
Your price
$43.25
$1.73 per unit · 30 × 40 cm × 25
Volume discount: −20%
| Qty | Per unit | Saving |
|---|---|---|
| 1 | $2.16 | — |
| 10 | $1.95 | −10% |
| 25 | $1.73 | −20% |
| 50 | $1.52 | −30% |
| 100 | $1.30 | −40% |
In the real app, the rates come from your ingredient costs and markup, the tiers from your discount rule sets, and the calculated price is applied at checkout by a Shopify cart transform function.
Installing the block#
Online Store > Themes > Customize > product page template > add the Custom Print Price Engine block. Works with any Online Store 2.0 theme, no code. It's safe to add to your global product template: products without a recipe simply don't render it.
What customers get#
- Size selection: your preset sizes as tap-tiles or a list, plus custom width × height inputs if the recipe allows them, validated live against your min/max bounds
- Quantity selection: tiles or a stepper, per the recipe's quantity style
- Custom options: dropdowns, radios, and priced text fields, with required options enforced before add-to-cart
- Artwork upload: drag-and-drop, straight onto the order
- Live price: unit price and total update on every change, including the volume-discount tier pricing, formatted in your store's currency and money format
- Variant awareness: switching variants re-checks for a recipe automatically, so variant-specific recipes just work
Making it yours#
In Settings, customise the calculator's text and colours. Handy for tone and essential for non-English stores:
| Setting | Default |
|---|---|
| Heading | "Configure Your Order" |
| Size label | "Select Size" |
| Quantity label | "Select Quantity" |
| Upload label | "Upload Artwork" |
| Accent colour | Inherits your theme |
| Background colour | Inherits your theme |
The global unit (mm / cm / inch / foot) is also set here and applies everywhere: calculator inputs, recipe bounds, and order properties.
The calculator deliberately leaves your product's displayed base price alone. The custom price is applied at checkout by the cart transform, so there's never a conflict between your theme's price display and the calculated quote. See How the price reaches checkout.
Related guides#
- Recipes for the settings that shape what the calculator shows
- Getting started for block setup in context
Was this helpful? If something isn't working, contact support.