Overview
The calculator editor is the main workspace where you build and customize your product calculator. It is divided into three areas: a header bar at the top, a tabbed main panel in the center, and a live preview panel on the right. Together, these areas give you everything you need to configure options, pricing, styling, and placement — and immediately see the result. Open any calculator from the Calculator AI → Calculators page, or create a new one, and the editor loads automatically.
How It Works
The top of the editor contains the calculator name (click to rename), tags, the Publish button, and a Versions dropdown. The live/not-live status badge shows whether the calculator is visible to customers.
Main tabs
The center area contains the core editing tabs:
- Options & Pricing — Add and configure input fields, pricing formulas, fixed fees, pricing variables, pricing tables, price adjustments, and quantity discount rules.
- Optional Features — Configure layout (multi-step), price summary display, custom SKU, weight calculation, tax settings, languages, and multi-currency.
- Placement & Styling — Assign the calculator to products, customize appearance with style templates and CSS, and add custom JavaScript.
When you first create a calculator, a Build with AI tab also appears to help you generate a starting configuration from a product description.
Preview panel
The right side shows a live preview of your calculator as customers will see it. Changes you make in the tabs are reflected here in real time. You can switch between Draft, Saved, and Published views, and preview against any product and variant in your catalog.
Key Concepts
| Area |
Key Controls |
| Header bar |
Calculator name, tags, Publish button, Versions dropdown, Live/Not-live badge |
| Options & Pricing tab |
Option list, pricing formulas, fixed fees, variables, tables, adjustments, quantity discounts |
| Optional Features tab |
Layout/steps, price summary, custom SKU, weight, taxes, languages, multi-currency |
| Placement & Styling tab |
Product assignment, style templates, CSS, custom JavaScript |
| Preview panel |
Draft/Saved/Published toggle, product selector, variant selector |
Examples
- New calculator — You open the editor, use Build with AI to generate a starting set of options, then switch to Options & Pricing to fine-tune labels and pricing. The preview panel updates as you make changes.
- Editing an existing calculator — You open a published calculator, adjust a formula on Options & Pricing, confirm the new price in the preview, and click Publish to push the changes live.
Related Articles
Formula Editor
Overview The formula editor appears throughout the calculator editor wherever a calculation is needed — option pricing, variables, fixed fees, price adjustments, weight, and the total price formula. You can find formula fields in Calculator Editor → ...
Standalone Calculator
Overview A standalone calculator is not tied to any Shopify product. Instead of appearing on product pages, it lives on any page you choose — a landing page, a custom page, or your homepage. Standalone calculators are ideal for quote builders, ...
Calculator Layout
Overview The Layout section controls how your calculator's options are presented to customers. You can show all options on a single page (single-step) or split them across multiple pages that the customer navigates through (multi-step). You configure ...
Publishing a Calculator
Overview Publishing makes your calculator visible to customers on your storefront. Until you publish, any changes you make exist only as a draft that you can preview inside the editor. Each time you publish, a new numbered version is created so you ...
Duplicating a Calculator
Overview Cloning creates an exact copy of an existing calculator. This is useful when you want to reuse a configuration as a starting point for a new product or variation without building from scratch. You clone a calculator from the Calculator AI → ...