HomeDocDocumentation QuoteFlowCalculator Builder

Calculator Builder

Calculator Builder

Estimated reading: 1 minute 9 views

The 6-Step Builder

A complete visual interface to create a price calculator with no code.

STEP 1 · Elements

Drag-and-drop library with 13+ field types. Each element is configurable (label, required, tooltip, description, values, advanced config). Elements are reorderable by drag.

STEP 2 · Formula

Mathematical formula editor referencing element keys. Live preview with test values. Real-time syntax validation. Supports label, prefix/suffix, decimals, and minimum value.

STEP 3 · Conditions

Conditional rule editor. Each rule has conditions (if X equals Y) and actions (show/hide element, add price surcharge, validation message). AND/OR logic configurable.

STEP 4 · Design

Visual customization panel: primary color, accent color, font, border radius, spacing, shadows. Changes reflect instantly in the live preview panel.

STEP 5 · Products

Link the calculator to “All products” or “Specific products” with search against the Shopify Admin API. Product thumbnails and titles displayed for easy selection.

STEP 6 · Settings

Quote form configuration: title, subtitle, CTA button text, optional fields (phone, company, message), GDPR consent, quote numbering prefix, notification email.

The Live Preview panel (LivePreviewPanel) stays permanently visible on the right side during all builder steps, reflecting real-time changes to elements, formulas, conditions, and design.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share this Doc

Calculator Builder

Or copy link

CONTENTS