Skip to main content

Amaze Price Builder — Features

Amaze Price Builder is a Shopify app that lets merchants add a custom price calculator to product pages. Customers fill in a form (sizes, options, quantities, dates, colors…), the price updates live, and that calculated price is what they pay at checkout.

The app is free: there are no plans, no billing and no limits on calculators or orders.


Admin app​

The app runs embedded in the Shopify admin and has five pages: Home, Calculator Forms, Link Products, Theme Settings and Help / FAQ.

Home (dashboard)​

  • App status card.

  • Calculator usage: the number of orders that included a calculator-priced product in the current 30-day period. This is for information only and never limits anything.

  • Setup guide: a checklist that detects its own progress:

    1. Turn on the Amaze Price Builder app embed (checked by reading the live theme's settings_data.json).
    2. Add the calculator block to the product template (checked by reading templates/product.json).
    3. Create a product calculator.
    4. Connect a calculator to products.

    Steps 1 and 2 have deep links that open the theme editor with the embed turned on, or the block ready to add. The guide stays open until every step is done, and the merchant can then collapse it.

  • Suggested next step card linking to calculator creation.

  • Need a hand? card with two entry points, Contact support and Custom placement request. Both open a modal that saves a message and an optional email as a support request in the database.

  • A Tawk.to live-chat widget on every admin page.

Calculator Forms (list)​

  • Lists every calculator in the shop.
  • Create: starts a new calculator with a Text field and a Number field.
  • Duplicate: copies a calculator and adds "(copy)" to its name.
  • Rename and Delete, each through a modal.
  • Import: creates a calculator from an exported JSON file.

Calculator editor​

Across the top there is an editable calculator name (it saves when the field loses focus), a breadcrumb back to the list, and four tabs. Each tab saves on its own.

1. Form fields​

A toolbox of 10 field types, each added with one click:

FieldWhat the customer gets
Text FieldFree text input with an optional placeholder
Number InputNumeric input with an optional placeholder
DropdownSelect from a list of options
Radio ButtonsChoose one option from a list
CheckboxOn/off; can be checked by default
TextA block of static text shown in the form (not an input)
DividerA horizontal separator
Date PickerA date input with an optional placeholder
Swatch (images & colors)Choose one option shown as a color or image tile; the first option is preselected
Color PickerA color input with a default color
  • Edit the label of any field and add, rename or remove options for dropdowns, radios and swatches.
  • Swatch options can be a color or an image. An image can be a pasted URL or a file uploaded straight to Shopify Files (PNG, JPG, GIF or WEBP, under 5 MB). Switching between color and image keeps both values.
  • Reorder fields with up/down buttons and delete them.

2. Design​

Styling for the storefront form, with a live preview beside it:

  • Display: show or hide the final price under the form, and show or hide the card-style form container.
  • Colors: radio button, accent, text, field background, placeholder text, border and form background.
  • Sizes and spacing (sliders): radio button size, final price text size, border width, border radius, input field padding and form padding.
  • Show or hide field borders.

3. Formula​

How the price is worked out:

  • Use custom formula toggle. When it is off, the product's normal price is used.
  • Formula builder with two views of the same expression:
    • Blocks: build the formula from nested blocks (variables, numbers, text, functions, comparisons, brackets, negation, and chains of + − × ÷). Blocks can be duplicated, converted or grouped.
    • Text: type the expression directly. A searchable reference of variables and functions inserts at the cursor or wraps the selected text.
    • A formula diagram shows the whole formula as a tree with what each part currently works out to. Clicking a row highlights the matching block.
    • Validation runs on every change and shows "Formula is valid" or the exact error.
  • Variables available in formulas:
    • Number fields give the entered number.
    • Checkboxes give 1 when checked and 0 when not.
    • Dropdowns, radios and swatches give the chosen option's label, which can be compared against option labels picked from a list.
    • Date fields give the date as text, plus days from today.
    • Text blocks give their number of characters.
    • Product price, Minimum and Maximum (the last two from General settings).
  • Functions: if(condition, then, else), min, max, roundUp, roundDown, roundNearest(value, step).
  • Operators: + − × ÷, brackets, and comparisons (= ≠ > < ≥ ≤) for use inside if().
  • Custom variables: named intermediate values, each with its own formula builder. They are evaluated top to bottom, so each one can use the variables defined above it. Turning on Use as price variable makes one available to the main formula.
  • Test your formula panel: enter sample values for every field, plus product price and min/max, to see the total and each custom variable's value. The formula is evaluated safely, without eval.

4. General settings​

  • Calculator visibility: all customers, logged-in customers only, guests only, or customers with specific tags (comma separated). This is enforced on the server.
  • Product price limits: minimum and maximum price.
  • Order data options (_admin_summary, _api_data).
  • Translations sub-tab: one tab per language enabled in the shop. Each language can override the "Final price" text, each field's label and placeholder, and the checkbox checked/unchecked text. Blank entries fall back to the shop's default language.

Each calculator can also be exported as a JSON file.

  • A table of every product variant (from the live Admin API), each with a calculator dropdown. Changes save instantly, and a Clear button removes the calculator.
  • Links are made per variant, so different variants of one product can use different calculators or none.
  • Bulk assign: apply one calculator to every variant currently shown.
  • Search by product name and filter by vendor and tag, with pagination.
  • Each link is written to an app-owned variant metafield ($app.calculator_id) that the storefront reads. A resync action rewrites all metafields from the database.

Theme Settings (shop-wide)​

  • Selectors, each with Reset to default:
    • Product form selectors, which tell the calculator where to attach the price to the add-to-cart form.
    • Variant selectors, which tell it how to detect variant changes so the product price updates.
    • Checkout button selectors, used by draft-order checkout.
  • Checkout: an option to create a draft order when the customer checks out (see below).
  • Price settings: show currency with prices, and server-side price validation.
  • Custom CSS, injected on product pages where the calculator appears.

Help / FAQ​

Written answers to common questions: what the app is, its key features, how it works, what to do about bugs, and similar.


Storefront​

Delivered as a theme app extension with two parts.

Calculator block (product page)​

  • The merchant adds it to the product template in the theme editor.
  • It only renders when at least one variant of the product has a calculator linked.
  • When the customer switches variant, it switches calculator or hides itself to match.
  • It loads the calculator's settings through the app proxy (/apps/calculator/...), and the server checks the visibility rules first.
  • It draws every field with the merchant's design settings and custom CSS.
  • It recalculates the price on every change, including when the variant (and so the product price) changes.
  • Prices are formatted in the shop currency for the visitor's locale, with or without the currency symbol.
  • The text shown comes from the visitor's language, falling back to the default language and then to built-in text.
  • It keeps hidden line-item properties in sync on the product form:
    • _opc_calculated_price and _opc_calculator_id
    • _opc_field_summary: the customer's answers as JSON
    • one property per field (for example Size: Large), so the answers show on the cart and the order
    • _opc_price_signature, when server-side validation is on

App embed​

  • Turned on under the theme editor's App embeds.
  • Shares the shop settings with the storefront scripts.
  • When draft-order checkout is on, it intercepts checkout button clicks.

Checkout and pricing​

Cart Transform Function​

  • A Shopify Function (calculator-cart-transform) that is registered automatically when the app is installed.
  • For every cart line that has a calculated price, it replaces the line price with that exact amount. The variant's catalog price doesn't matter.
  • It carries the calculator ID and each of the customer's answers onto the final line, so they appear on the order in the admin.

Server-side price validation (optional)​

  • When this is on, the storefront sends the customer's inputs to the backend. The backend recalculates the price itself and signs it with HMAC-SHA256, using a secret derived from the shop.
  • The Function checks the signature. If the signature is there but doesn't match (a tampered price), the line stays at its normal price.
  • This stops customers from editing the price in their browser.

Draft-order checkout (optional)​

  • Clicking checkout reads the cart, and the backend creates a draft order with a price override on each calculator-priced line.
  • The customer is sent to the draft order's invoice/checkout page.
  • If the draft order can't be created, it falls back to the normal /checkout.

Background and compliance​

  • Order tracking: an orders/create webhook counts orders that contain a calculator-linked variant, per rolling 30-day window. It won't count the same order twice if Shopify resends the webhook. This number feeds the Home page usage card.
  • Uninstall: sessions are cleaned up when the app is removed.
  • GDPR webhooks: customers/data_request, customers/redact and shop/redact. Shop redaction deletes all of the shop's calculators, links, settings and support requests.
  • A public privacy policy page at /privacy-policy.

Saved but not yet applied on the storefront​

These settings exist in the admin and are saved, but the storefront or checkout doesn't act on them yet:

  • Minimum/Maximum price are only available as formula variables ({Minimum}, {Maximum}). They don't limit the final price automatically; to enforce a limit, use them in the formula, e.g. max({Minimum}, …).
  • The Order data checkboxes (_admin_summary, _api_data).
  • Show as product attribute on custom variables.

Technical overview​

PartTechnology
Admin appReact Router 7, Shopify App Bridge, Polaris web components
DatabasePostgreSQL via Prisma
StorefrontTheme app extension (Liquid + vanilla JS), app proxy
Pricing at checkoutCart Transform Function (JavaScript compiled to Wasm)
DeploymentDocker, GitHub Actions deploy to a VPS

Access scopes: write_products, write_cart_transforms, write_draft_orders, read_themes, read_locales, read_orders, read_customers, write_files.