Live Preview

Live Preview

Overview

The live preview panel renders your calculator the way customers will see it on your storefront, updating in real time as you make changes. On a wide screen it sits to the right of your settings. On a laptop it can open as a panel over settings. On a phone it is a Preview button — open preview or Chat with AI, not both at once. You can switch between different saved states and preview the calculator against any product in your catalog.

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. If the number looks off, click Price looks wrong? under the preview price to open the Total Price Formula's Troubleshoot tab for those exact choices. See Formula Editor.

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.
Price looks wrong? Opens the Total Price Formula's Troubleshoot tab for the choices currently in the preview. The tab shares this preview's scenario — change a choice in either place and both update.

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. If it is not, click Price looks wrong? to see why — the Troubleshoot tab names the likely issue and a fix.
  • 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

    • Preview scenes, effects, and clear stickers

      Overview Designer mode supports three preview-only layers that help customers visualize the final product. None of these are included in print-ready exports — they appear only while editing or when the customer toggles Preview on the storefront. ...

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

    • Calculator Templates

      Overview Calculator templates are pre-built calculator configurations you can browse, preview, and install into your store as a new draft calculator. They are not the same as style templates in the editor (those only control colors and CSS). Go to ...

    • Customer access and layout (editor profiles)

      Overview The editor profile controls how much a customer can change inside the editor and how the design relates to the artboard. You set it in Calculator Editor → Step 5 (Designer) → gear icon → Storefront editor settings → Customer experience, ...