A flooring shopper knows two things: what the floor should look like, and how big the room is. The Flooring by Material demo on our demo store, built with Appify Custom Product Options, starts from exactly those two answers. The shopper picks a material swatch, then gives the size as length and width, or as a total area.
It's a small calculator, which makes it a good one to learn from.
What does it do?
Three choices sit on the page. A row of Material swatches, a Measure By choice with Dimension and Area, and the size fields that go with it.
The material and the room's area both feed the price, and the total on the page follows what the shopper picks.
Why is a floor hard to price, and how does Appify Custom Product Options handle it?
- Every material has its own price. Each swatch carries a price of its own, and the calculator combines it with the size the shopper gives.
- Customers know their room in different ways. Some have length and width. Others have a number from a floor plan. One Measure By choice lets the shopper pick, and only the matching fields show.
- Shoppers pick a floor by looking at it. The material choices are image swatches, shown in a carousel, with a larger picture on hover.
- The shopper needs to see the area they're paying for. A line under the fields reads Total Area in square feet, so a typo shows before checkout.
- The choices must survive the order. Material, measurement method and size travel to the cart and the order. Customers can fix a mistake with Edit options, and a reorder opens with everything filled in. The story is in why Shopify's Buy again button drops custom options.
One room, worked out
Take a 12 by 15 foot room. The Dimension fields take length and width in feet, and the calculator shows Total Area: 180.00 ft².
Switch Measure By to Area and type 180, and the calculator reports the same area. Pick a different swatch and the same room is priced with that material.
The design decisions
Put the rate on the swatch
The Material option is an image swatch with a price per choice. The total formula reads the chosen swatch, so adding a material means adding one swatch.
Offer two ways to give the size
Measure By is a radio option with two values, Dimension and Area. Dimension uses length times width. Area uses the number the shopper types.
Show only the fields that apply
Each size field carries a visibility rule. When Measure By is Dimension, the Area field hides. When it is Area, the Dimension fields hide. A hidden option drops out of pricing and cart data, so a customer on one route never sends the other.
Use real units
The Dimensions option has labelled rows, Length and Width, each in feet. The Area option is built for surfaces such as flooring, wallpaper and fabric, and carries its own unit, square feet.
Echo the area back
A Calculation option displays the result of a formula in a sentence you design. Here it reads "Total Area: {result} ft²", rounded to two decimals.
Keep the summary short
The price summary lists the material line and the total, and nothing more. It suits a product where the question is simply "how much for my room?".
What arrives with the order?
The cart line carries the material, how the shopper measured, and their size. Your team reads the same choices in the app's Orders tab, which shows each line with its options table.
Cart editing is on for this calculator. A customer who typed 15 instead of 51 can reopen their choices from the cart and fix it. The guide to editing configured products in the cart has the details.
Make it yours
- Sell by the box. Round the area up to whole boxes and send the box count as the quantity. Inside a flooring calculator that sells by the box or area shows how.
- Add waste. Add a waste percentage before pricing. The flooring calculator priced by the square foot does it with a dropdown.
- Measure odd rooms. A Room map option handles L-shapes and angled walls. See the flooring calculator with a room map.
Get this calculator
Describe it to Chat with AI in plain words. A starting prompt:
"I sell flooring in several materials, each with its own price per square foot. The customer picks a material swatch, then chooses to enter length and width in feet, or a total area in square feet. Show the total area under the fields and price the floor from the material and the area."
Check the result in the preview, then try three rooms by hand. The wider flooring story is in how to sell custom flooring on Shopify.
FAQ
How do I price flooring by material and square footage on Shopify?
Give each material swatch its own price, add length and width fields or an area field, and have the total formula read both the swatch and the area.
Can customers enter a room as an area instead of length and width?
Yes. A Measure By option lets them choose, and the fields that don't apply stay hidden.
Can I show the total area to the customer?
Yes. A Calculation option can display the area with your own wording and unit.
Can customers fix a typo after adding to the cart?
Yes. With cart editing on, Edit options reopens their choices with everything filled in.
Do the material and size show on the order?
Yes. They are on the cart line and in the app's Orders tab.
Pick the floor. Give the room. Get the price.
Whatever you sell, however you price it · The last options app you'll shop for