Live Preview

Live Preview

Overview

The live preview panel is the right-hand side of the calculator editor. It renders your calculator the way customers will see it on your storefront, updating in real time as you make changes. You can switch between different saved states and preview the calculator against any product in your catalog. The preview panel is visible whenever you have a calculator open in the editor.

Steps

  1. Choose a preview version — Use the toggle at the top of the preview panel to switch between Draft (your current unsaved edits), Saved (the last saved version), and Published (the version currently live on your store).
  2. Select a preview product — Click the product selector to choose a product from your catalog. The preview renders the calculator as it would appear on that product's page.
  3. Pick a variant — If the selected product has multiple variants (e.g., sizes or colors), choose a variant from the dropdown. This is especially useful when your base price is set to Selected Product Variant, since the starting price changes with the variant.
  4. Interact with the preview — Fill in fields, toggle options, and select choices inside the preview to see how prices update, visibility rules fire, and the layout responds.

Details

Control Description
Version toggle Switch between Draft, Saved, and Published views.
Product selector Choose which product to preview the calculator on.
Variant selector Pick a specific variant of the selected product.

Examples

  • Checking a price formula — You change a pricing formula in the editor, then fill in sample values in the Draft preview to verify the calculated price is correct before saving.
  • Comparing draft to published — You switch between Draft and Published views to see how your latest edits differ from what customers currently see.

    • Related Articles

    • 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 ...

    • Calculator Editor Overview

      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, ...

    • Versions & Checkpoints

      Overview Versions and checkpoints let you track the history of your calculator over time. Every time you publish, a new version is created automatically. You can also save manual checkpoints at any point to bookmark your progress. If you need to undo ...

    • Style Templates

      Overview Style templates are predefined design presets that instantly change the look and feel of your calculator. Each template provides a complete set of CSS variable values that control colors, fonts, spacing, borders, and other visual properties. ...

    • AI Style Assistant

      Overview The AI Style Assistant lets you describe the visual style you want in plain English, and it generates the CSS variable values for you. Instead of manually tweaking dozens of variables, you can describe a look — like "dark theme with rounded ...