This garage door calculator adds a size charge from a grid of widths and heights to the door's price. Then it adds the motor and fittings the customer picks.
This is a look inside the Garage Door calculator on our Shopify demo store. It's built with Appify Custom Product Options.
The customer types a width and a height in millimeters. The calculator finds that size in a price grid, adds it to the door's own price, then adds each part they choose.
What it does
The calculator opens with three wood finishes as pictures. Below them sit the width and height in millimeters, then dropdowns for operation, guide rail and frame cladding. Choose Electric as the operation and four more appear: the drive, an extra remote, a code keyboard and an interior wall knob.
In plain words, the price is the door's product price, plus a size charge from the grid, plus the price of each part. In this demo, the finish doesn't change the price.
Why a garage door calculator is hard to build, and how Appify Custom Product Options handles it
- The size price comes from a grid, not a rate. A basic options app prices a size as length times width times one rate. This grid doesn't rise at one steady rate, so flatten it into one and most doors come out off the list, some too high and some too low. Here the grid is a pricing table, and each size reads its own cell.
- Customers type sizes that fall between the lines. A door can be any width from 2,315 to 5,500 mm. The table rounds up to the next width and height it lists, so a door between sizes prices on the next size up.
- Motor parts only belong on a motor door. The drive, remote, keyboard and wall knob appear only when the customer picks Electric. A manual door never shows them, and they add nothing to its price.
- Some fittings grow with the door. In a basic options app, a choice's price can't read a size typed in another field, so a 1,900 mm door and a 3,000 mm door pay the same for trim. Here the corner profiles are priced from the height the customer typed.
- The choices have to survive the order. Customers can change the size or the drive in the cart, and reordering brings the whole door back.
One price, worked out
Here's a Dark Oak door, 3,000 mm wide and 2,250 mm high, with an electric drive, with prices in dollars. The door's product price is 978.
- Size: 3,000 by 2,250 mm is a width and a height the grid lists, so the size charge is that cell, 108.15.
- Operation: Electric adds 0.00 and opens the motor options.
- Drive: the SupraMatic E 4 adds 479.50.
- Guide rail: the FS 10-K adds 127.00.
- Total: 978 for the door, plus the size charge and those parts, comes to 1,692.65.
The summary lists each part on its own line. The total is those lines plus the door's own price of 978.
The design decisions
Widths down the side, heights across the top
The table has 11 widths as rows and 7 heights as columns. The Dimensions option's formula looks up the width and the height with TABLE() and returns that cell.
The table's lookup mode is Nearest upper. A 3,010 mm door prices on the 3,500 mm row, the next one up.
Your price grid goes in as it is. Change one cell and that size reprices. There's no rate to work out and no variant for every width and height.
The size limits match the grid's edges
Width runs from 2,315 to 5,500 mm and height from 1,900 to 3,000 mm. Those are the first and last sizes in the table.
So every size a customer can type has a price. The limits show under each field label.
No total formula at all
The total price formula is left empty. The app then adds the initial price, here the product's own Shopify price, to the price of every option.
Change the door's price in Shopify and every total moves with it.
Motor options wait for Electric
Drive, Additional Remote Control, Code Keyboard and Interior Wall Knob each have a Show if rule: Operation equals Electric. Each rule has that one condition.
Until then, the customer sees a shorter form and the summary lists only the options on screen. For more on motor-only options, read the guide to selling made-to-measure blinds on Shopify.
Corner profiles are priced from the height
Each choice in a dropdown can carry its own price formula. The corner profiles' formula reads the height from the Dimensions option and multiplies it by 0.05.
At 2,250 mm high, the summary shows 112.50 for them. A taller door pays more for its trim.
Pictures on the choices
The finishes are image swatches with a larger preview on hover. The operation, drive and accessory dropdowns show a small picture beside each choice.
A customer who doesn't know drive model names can still see which one they're picking.
What arrives with the order
The calculated price goes to checkout on one cart line. Cart properties carry the finish, the width and height, and every part chosen, so the order reads like a build sheet.
Customers can tap Edit options in the cart to fix a measurement without starting over. Later, Appify Reorder brings the door back with every choice filled in, where Shopify's own Buy again drops them.
Make it yours
- Charge for a finish. A price adjustment can add a percentage of the door's price when a premium finish is chosen.
- Add installation. A fixed fee can apply only when the customer ticks installation, and discounts never touch it.
- Give each finish its own grid. Each finish can carry a formula that looks up its own table, in place of the one on the size. The guide to pricing from a 2D table or rate sheet walks through the layouts and lookup modes.
Get this calculator
Ask Chat with AI to build it in your own words, and attach your width-by-height grid as a CSV or Excel file. For example:
"Build a garage door calculator. Add image swatches for the finish: Golden Oak, Dark Oak and Nachteik. Add width and height in mm, width 2315 to 5500 and height 1900 to 3000. Price the size from the attached grid, widths as rows and heights as columns, rounding up to the next size. Add an Operation dropdown. When it's Electric, show Drive, Additional Remote Control, Code Keyboard and Interior Wall Knob, each with its own prices. Add a Guide Rail dropdown, and Frame Cladding with corner profiles priced at the height times 0.05."
Chat with AI writes the options, the table and the rules. You check the price in the preview before you publish.
FAQ
How do you price garage doors by width and height on Shopify?
Put your price grid in a pricing table, with widths as rows and heights as columns. The calculator looks up the size the customer types and adds that cell to the door's price.
What happens when a customer types a size between the grid's lines?
That depends on the table's lookup mode. This demo uses Nearest upper, so the size prices on the next width and height up.
Can motor options show only for electric doors?
Yes. A Show if rule on each motor option keeps it hidden until the customer picks Electric.
Do I need a variant for every door size?
No. The product has one variant. The size comes from the calculator, and the size charge from the table.
Every garage door, sized and priced from your own grid.
Whatever you sell, however you price it · The last options app you'll shop for