The Storefront Calculator
The Print Price Engine product-page calculator — 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 — 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 — the settings that shape what the calculator shows
- Getting Started — block setup in context
Was this helpful? If something isn't working, contact support.