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:
- Turn on the Amaze Price Builder app embed (checked by reading the live theme's
settings_data.json). - Add the calculator block to the product template (checked by reading
templates/product.json). - Create a product calculator.
- 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.
- Turn on the Amaze Price Builder app embed (checked by reading the live theme's
-
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:
| Field | What the customer gets |
|---|---|
| Text Field | Free text input with an optional placeholder |
| Number Input | Numeric input with an optional placeholder |
| Dropdown | Select from a list of options |
| Radio Buttons | Choose one option from a list |
| Checkbox | On/off; can be checked by default |
| Text | A block of static text shown in the form (not an input) |
| Divider | A horizontal separator |
| Date Picker | A 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 Picker | A 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 insideif(). - 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.
Link Products
- 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_priceand_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/createwebhook 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/redactandshop/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
| Part | Technology |
|---|---|
| Admin app | React Router 7, Shopify App Bridge, Polaris web components |
| Database | PostgreSQL via Prisma |
| Storefront | Theme app extension (Liquid + vanilla JS), app proxy |
| Pricing at checkout | Cart Transform Function (JavaScript compiled to Wasm) |
| Deployment | Docker, 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.