A made-to-measure blind asks the shopper for nine things: a name for the window, a color, two measurements in two parts each, a mount, a lift type and a lift side. On one long page, that reads like a form. Split into four steps, it reads like a conversation.
This is how the Multi-step demo on our demo store does it with Appify Custom Product Options. Step tabs run along the top, with back and next arrows beside them. Each step holds only the questions that belong together.
Step 1 asks for a window name and a color. Step 2 takes the width and height. Step 3 is the mount. Step 4 is how the blind lifts.
Why a long order is hard to present, and how it is handled
- A lot of questions on one small screen. The calculator's layout setting switches it from one page to a multi-step calculator. You make the steps, give each a title and an optional description, and tick which options live in it. The shopper moves through them with Next and Back.
- A size takes four fields. Width and height each need whole inches and a fraction. The demo puts all four on one row, with a Width heading over the first pair and a Height heading over the second. Column widths set that layout, and the inches list has a search box so a shopper can type a number instead of scrolling.
- A color is a visual choice. The colors are picture swatches, and a larger image shows when the shopper hovers over one. The shopper sees the real shade before choosing, not just a name.
- Shoppers need an explanation at the moment they choose. The mount note and the lift description are content blocks, and value rules swap their text when the choice changes. Pick an inside mount and the note explains the small width deduction. Pick an outside mount and it explains that the width is made as ordered.
- Some questions only apply to some answers. Lift side only makes sense for a cord loop. A visibility rule shows it for the nylon and metal cord loops and keeps it out of the way for the others.
- The order has to survive the cart. Every choice goes onto the cart line, and the shopper can use Edit options to change them later.
One order, step by step
Here is what a shopper does, and what the calculator does back.
| Step | The shopper | The calculator |
|---|---|---|
| 1 | Types "Kitchen window" and taps Ivory | Outlines the chosen swatch |
| 2 | Picks inches and a fraction for width, then for height | Shows a fit promise above the fields |
| 3 | Chooses an inside or outside mount | Shows the note that matches the mount |
| 4 | Taps Nylon Cord Loop | Writes a short description and reveals Lift Position |
The design decisions
The steps follow the order a shopper thinks in
Who is it for and what does it look like. How big. How does it fit. How does it work. Each step is one decision, so the shopper never scrolls past the next question to find the one they are on.
Size sits next to a fit promise
The width and height fields are where doubt shows up, so the demo puts a short fit promise and a tape-measure icon right above them. It is a content block, which holds text or HTML you write yourself.
Inches and eighths are separate lists
One list holds whole inches. A second holds the fractions from 0 to 7/8. Both are required, so the shopper cannot reach the cart with half a measurement. If you also want to price by the eighth, our blinds calculator breakdown shows one way to do it.
Pictures carry the choices that are hard to describe
The mount and the lift type use picture swatches, not plain buttons. Seeing a cordless blind next to a battery motorized one answers the question faster than a label would.
Rules do the explaining
The description under the lift type is one content block with four value rules, one per lift. The shopper never opens a help page. The text they need is already under the choice they made.
Steps and rules work together. A step can hold an option that only appears for some answers, and a content block can change its words as the shopper chooses. Each shopper sees a short page that fits their order, not the full list of everything you offer.
What arrives with the order
The cart line carries the options the shopper chose. Under cart properties you can set which options are sent and in what order. Your team reads the window name, color, size, mount and lift straight off the order line.
This calculator has cart editing on. On the cart page and cart drawer, a customized line shows an Edit options button. It opens the published calculator with the saved choices filled in, so changing the color or the lift is a quick update, not a new order. The Edit options from the cart guide covers it in full.
Make it yours
- Rename the steps. The demo calls them Step 1 to Step 4. Names like Measure, Material and Extras tell the shopper what is coming.
- Change the grouping for another product. A desk could run Dimensions, then Material and Finish, then Add-ons.
- Restyle the tabs. Ask Chat with AI for the step tabs or the next and back buttons in your brand colors.
- Add a rule inside a step. Show a motor option only when a motorized lift is chosen, the way the demo shows lift side only for cord loops. Our guide to showing and hiding options has more patterns.
Planning a flow of your own? What to look for in a multi-step configurator and our multi-step layout guide cover how to choose the steps.
Get this calculator
Open Chat with AI in the calculator editor and describe the flow in plain English. It adds the options, the steps, the rules and the styling for you. You can still change everything by hand. Here is a starting prompt:
Build a made-to-measure blind calculator in four steps. Step 1: a window name box and a color with picture swatches. Step 2: width and height, each as whole inches plus an eighth-inch fraction, all required. Step 3: inside or outside mount with a note under each. Step 4: lift type with pictures (nylon cord loop, metal cord loop, cordless, battery motorized), a short description under it, and a left or right lift position that shows only for the two cord loops.
FAQ
What is a multi-step calculator on Shopify?
It is a product configurator that splits its options across several pages, with tabs and next and back buttons. You choose which options go on each step.
Can I rename the steps?
Yes. Each step has a title and an optional description that the shopper sees at the top of the step.
Does a step have to be the same for every product?
No. Each calculator has its own layout, so a blind can run four steps and a mug can stay on one page.
Can shoppers change their choices after adding to cart?
Yes. With cart editing on, the cart page and cart drawer show an Edit options button that reopens the calculator with the saved choices.
Can I try it before installing?
Yes. The Multi-step demo runs on our demo store, so you can click through all four steps.
Turn a long order form into four short steps.
Whatever you sell, however you price it · The last options app you'll shop for