Some flooring shoppers can't give you a square footage. They can tell you how long and wide each room is.
This is a look inside the By the box or area with Room Map calculator on our Shopify demo store. It's built with Appify Custom Product Options.
It starts like a box-or-area calculator. Then a switch opens a Room map. The shopper draws each room, whatever its shape, and the map adds them all up. The total area fills in, and whole boxes go to the cart as the quantity.
What it does
Two fields sit side by side: area in square feet, and quantity in boxes. Type in either one and the other updates. A tickbox adds 10% extra for waste and cuts. Underneath is a switch called Show Room Size Calculator.
Turn the switch on and a Room map appears, with a running total headed "Area of all Rooms". That total fills the area field, and the area sets the box count. On this demo floor, each box covers 29 square feet.
If you want the plain version without the map, read how the box-or-area flooring calculator works. This one adds a way to measure.
Why a room-map flooring calculator is hard to build
- Rooms aren't rectangles. A living room with a corner cut out is hard to turn into one number. The Room map lets them enter wall lengths, or start from a rectangle or an L, and watch the outline update. The area is worked out for them.
- A number field asks the shopper to do the maths elsewhere. They measure, work out the area on their phone, and type the answer in. Here the measuring happens inside the calculator, and the shape is drawn as they go.
- A job is rarely one room. The shopper adds a room for each space and names it. The map totals the area and the perimeter of all of them, so one order covers the whole floor with no adding up on paper.
- You sell whole boxes, not square feet. Rooms that total 208 square feet still ship as 8 boxes. The calculator rounds up before checkout, and the box count goes to the cart as the quantity.
- Shoppers who don't need the map shouldn't have to see it. Someone who already knows their square footage just types it. The map stays hidden until they ask for it.
- The order has to survive the cart. The room, every wall and the area travel with the order, and shoppers can edit their options from the cart.
One price, worked out
Here's a living room with a corner cut out, plus a hallway, with prices in dollars. The shopper switches on the room map, picks the L shape for the living room and types its walls. Then they add a second room for the hallway and tick the waste box.
- Living room: an L with walls of 18, 6, 8, 6, 10 and 12 feet. The map reports 60 feet around and 168 square feet.
- Hallway: 10 by 4 feet, so 28 feet around and 40 square feet.
- Both rooms: the map adds them up to 88 feet around and 208 square feet.
- With waste: 208 plus 10% is 228.8 square feet.
- Boxes: 228.8 divided by 29 square feet a box, rounded up, is 8 boxes.
- Price: 8 boxes at 12.95 a box.
The price summary shows 228.80 square feet with waste, 8 boxes and a total of 103.60.
The design decisions
A switch that reveals the map
Show Room Size Calculator is a Switch option, an on and off toggle. The Room map and the area readout under it each carry a visibility rule that shows them only when the switch is on.
The simple version stays simple. The measuring tool appears for the shoppers who want it.
The map fills the area field
A value rule on the area field watches the Room map. When any room changes, the field fills in from the total area of every room. The rule is set to Once, so the number stays editable if the shopper wants to adjust it.
From there the box count follows the way it does in the plain calculator. The area drives the boxes.
The shopper draws the rooms, whatever their shape. You ship whole boxes. Wall lengths go in, one total area comes out, and a whole number of boxes goes to the cart, priced from the box price you already have in Shopify.
Every room adds to one total
Add room starts another space on the same map. Each room gets a name and its own line, showing its perimeter and its area. Above the list, the map shows the perimeter and area of all the rooms together.
The formula never has to name a room. It reads the map's total area, total perimeter or room count, however many rooms the shopper adds.
Waste goes on the area, before the boxes
A pricing variable called TOTAL_AREA holds the area plus 10% when the waste box is ticked, and the price summary shows it. The box count rounds up from the area with waste, using CEILING from the formula editor.
Waste is a plain multiplier in the formulas, and you can ask Chat with AI to change it.
Shapes the shopper can pick
Each room starts as a custom shape, a rectangle or an L. A rectangle asks for a length and a width. An L-shape is six walls, and the two long sides stay matched to the walls across from them. A custom shape lets the shopper walk each wall and turn.
The map also totals the perimeter of every room, next to the area, in case you price a product by the running foot.
The box size comes from the product
As in the plain calculator, the formulas read the box size from a metafield on the Shopify product. To change what a box covers, you change the product, not the formulas.
A summary in square feet, not dollars
The price summary lists the area in square feet, then the box count and the total. The shopper sees the extra 10% they're buying before they add to cart.
What arrives with the order
The calculated price goes to checkout on one cart line, with the box count as the quantity. No room size becomes a Shopify variant.
The cart line keeps the full walk: the room name, each wall, the perimeter and the area. Add to cart also adds a Room map image link, one picture of all the rooms. You can see exactly what the shopper drew. Cart properties add the other details, such as whether waste was added.
Shoppers can tap Edit options in the cart to change their options without starting over. Later, Appify Reorder brings the floor back with the options chosen, where Shopify's own Buy again drops them.
Make it yours
- Choose the shapes and the room count. The Room map has settings for the units (feet, feet and inches, inches, centimetres or meters), the most rooms a shopper can add, and which shapes are allowed. Allow only rectangles for a simple store.
- Price the trim too. The same map reports the perimeter, so a baseboard or edging product can be priced by the running foot from the room the shopper already drew.
- Break prices on bigger orders. Add quantity discount tiers on the box count, so a whole-house order pays less per box than a hallway.
- Run every floor on one calculator. Link it to every floor you sell, and each product brings its own box price.
Get this calculator
Open the demo, switch on the room map and try your own room. Then build the same thing in your store with Chat with AI, in your own words. For example:
"Build a flooring calculator that sells by the box. Let shoppers type square feet or boxes, or draw their rooms with a room map. Add 10% for waste, round up to whole boxes, and use the box size from the product."
You can also ask it to change an existing calculator, for example, "Make the waste extra 15%."
For the wider picture, read how a room map handles L-shapes and multiple rooms and how to sell custom flooring on Shopify.
FAQ
Can shoppers draw their own room?
Yes. The Room map lets them enter wall lengths, or start from a rectangle or an L. The outline updates as they type.
Can one order cover more than one room?
Yes. Shoppers add a room for each space, and the map totals the area and the perimeter of all of them. You can also set a maximum number of rooms.
Does the room have to be a rectangle?
No. A room can be a rectangle, an L, or a custom shape walked wall by wall.
Does the waste percentage go on before rounding up?
Yes. The area gets the extra 10%, then the box count is the area divided by the square feet in a box, rounded up to whole boxes.
Do shoppers have to use the map?
No. They can type a square footage or a box count and leave the switch off.
Does the order show what the shopper drew?
Yes. The cart line keeps each wall and the area, and adds a link to a picture of the rooms.
Walls in, whole boxes out.
Whatever you sell, however you price it · The last options app you'll shop for