Calculator Layout

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 the layout in Calculator Editor → Optional Features → Layout.

Steps

Single-step layout (default)

Single-step is the default. All options appear on one page, and the customer scrolls through them. No additional configuration is needed — if you haven't changed the layout setting, your calculator is already single-step.

To switch back to single-step from multi-step, change the Calculator type dropdown to Single-Step Calculator. All step assignments are removed and every option appears on one page.

Setting up a multi-step layout

  1. In the Layout section, change the Calculator type from Single-Step Calculator to Multi-Step Calculator.
  2. Click Add step to create your first step. Give it a title (e.g., "Choose Material") and an optional description.
  3. Under each step, check the options that should appear in that step. An option can only belong to one step at a time — assigning it to a new step removes it from the previous one.
  4. Add as many steps as you need. Each step appears as a separate page with Next/Back navigation for the customer.
  5. Use the arrow buttons to reorder steps and the delete button to remove a step.

Details

Control Description
Calculator type Toggle between Single-Step Calculator and Multi-Step Calculator.
Step title The heading shown to the customer at the top of each step. Only applies to multi-step.
Step description Optional text shown below the step title.
Options in this step Checkboxes to assign which options appear in this step.
Arrow buttons Reorder steps up or down.
Delete button Remove a step.
  • Multi-step mode requires at least two steps.
  • Every step must contain at least one option.
  • Any option not assigned to a step is not visible to the customer in multi-step mode.

Examples

  • Simple product with few options — You sell custom mugs with just a color and text option. Single-step layout keeps everything on one page — the customer sees both options at once and adds to cart quickly.
  • Custom furniture builder — You sell configurable desks with many options. Multi-step layout breaks them into Step 1: "Dimensions" (width, height, depth), Step 2: "Material & Finish" (wood type, stain color), Step 3: "Add-ons" (drawer upgrade, soft-close hinges). The customer progresses through each page without feeling overwhelmed.
  • Business card designer — Multi-step with Step 1: "Card Details" (quantity, paper stock) and Step 2: "Design Options" (rounded corners, foil stamping, spot UV).

    • Related Articles

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

    • Creating Your First Calculator

      Overview This tutorial walks you through creating a calculator from start to finish using the new-calculator wizard. The wizard has four sequential steps, each focused on a different aspect of your calculator. You can skip optional steps or return to ...

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

    • What is Calculator AI?

      Overview This page introduces Calculator AI and explains how it works at a high level. After reading it, you'll understand the core building blocks — calculators, options, pricing formulas, and theme blocks — and be ready to create your first ...

    • Deleting a Calculator

      Overview Deleting a calculator permanently removes it and unassigns it from all linked products. Customers will no longer see the calculator on your storefront. You can delete a calculator from the Calculator AI → Calculators page. Steps Go to ...