How do made to order shops show the price change live while the shopper picks sizes and options, and why does the drawing matter?

Baymard Institute puts the average online cart abandonment rate at 70.22% across 50 studies. Of the shoppers who gave a reason, 40% said extra costs were too high and 12% said they could not see or work out the total order cost up front. On a made to order product the total depends on a size the shopper has not typed yet, so those two reasons arrive before the basket is even reached.

How do made to order shops show the price change live while the shopper picks sizes and options, and why does the drawing matter?

The product page carries the price rules, not just a price. As the shopper types a width and a projection, picks a fabric or ticks a motor, the page works the total out again from the shop's own list and shows it at once, with a breakdown. At the same time the product is redrawn at the typed size in the chosen fabric, so the shopper sees what the number is for. Inchy, a Shopify app for awnings, outdoor shade and team wear, does both in one block, and the checkout works the same price out again.

The same demo awning at two sizes. The drawing and the total change together.

Why is a live price different from a price on a page?

A stock product has one price and it is printed. A made to order product has a rule, and the price only exists once the shopper has answered the questions. The old way was to hide that: show "from £824.95", collect the sizes in a form, and send a quote the next day. The shopper never sees a total while they are deciding, which is the 12% reason above in its purest form.

A live price answers as the shopper goes. In the demo, 350 by 250 cm in ivory with a hand crank is £1,293.95. Change the width to 550 cm and the projection to 300 cm and the total reads £1,949.95 before the shopper has let go of the field. Nielsen Norman Group calls this visibility of system status, the first of its ten usability heuristics: how well the state of the system is conveyed to its users. For a made to order shop, the state of the system is the price.

What should update, and when?

Everything that depends on the choice, the moment the choice is made.

• The total, under the drawing and on the button: "Add to cart · £1,892.95".
• The drawing: the awning longer or deeper, the fabric swapped, the valance straight or wavy.
• The order summary in words: "420 × 300 cm · Navy stripe · Frame: White · Motor and remote · Wavy".
• Any add-on priced for the size. The demo's winter cover reads "Cut to 420 cm" at £92.40 and "Cut to 550 cm" at £121.00.
• The dispatch date, because a made to order customer wants to know when as much as how much.

Updating on a button press is not enough. The shopper should be able to drag the end of the ruler on the drawing and watch the number move, which is what the demo does.

Why does the drawing matter?

Because a number on its own is a guess to most people. A shopper knows their doorway. They do not know whether 350 cm covers it. When the awning is drawn over a doorway at the typed size, they can see it, and when the fabric swatch they clicked appears on the awning they can see that too. Deloitte's survey of 1,560 GB adults found 36% interested in personalised products, and among those interested, one in five willing to pay a 20% premium. People pay for things they had a hand in making, and the drawing is where they see their own hand in it.

The drawing also catches mistakes. A projection typed as 30 instead of 300 produces an awning as thin as a shelf, and the shopper fixes it before paying. The size limits do the rest: typing 700 cm shows "Width can be up to 600 cm" under the field and clears the total.

What should the breakdown show?

Each thing the shopper chose, with what it added. Under the total in the demo is "How this price is made", which opens into a list.

Made to size £1,612.95, motor and remote £280.00, total £1,892.95. There is nothing clever in it and that is the point. The shopper who worried about extra costs can see there are none they did not choose. For a team order the same list shows the base price, the logo, the text, the print, the quantity saving and then one line per size with its quantity, as in how a Shopify store takes a team t-shirt order in every size in one go.

What happens between the page and the checkout?

This is where a live price can go wrong. A product page can show any number; the question is what Shopify charges. On Shopify, line item properties carry the typed size to the order but do not change the price, and changing a line's price normally goes through the Cart Transform API, which Shopify's documentation says only development stores and stores on a Shopify Plus plan can use with update operations. A page that shows £1,892.95 and a checkout that charges something else is worse than no live price at all.

Inchy works the price out again at checkout from the same rules it used on the page, on every Shopify plan, so the two always match, and a shopper cannot change the price in the browser. Why checkout prices can differ from the product page explains the mechanics.

Does it work on a phone?

It has to. On a phone the drawing sits at the top, the choices scroll underneath, and the total and the Add to cart button stay fixed at the bottom of the screen so the shopper always sees the current price. The block is a theme app block for Online Store 2.0 themes and takes the theme's fonts, so it looks like the rest of the shop rather than a widget dropped in.

Questions and answers

Does the drawing work for any product?

Inchy draws awnings and t-shirts. For other products it shows your own photo for each option, and the price, the limits and the breakdown update live in the same way.

Can the shopper drag the size instead of typing it?

Yes. In the demo the width and the projection each have a ruler on the drawing, and pulling the end of it changes the size and the price.

How fast does the price update?

As the shopper types or drags. The rules run in the page, so there is no wait for a server.

Can I hide the breakdown?

It is a setting. Most shops keep it, because the shoppers who open it are the ones about to pay.

What does it cost?

Inchy has a Free plan with one product live, no card and no time limit. Team wear is $19.99 a month for garments priced per item. Made to measure is $99 a month for anything priced by size, with every look and style and Bundle kits. Both have unlimited products, are billed by Shopify with no fee per order, and come with a 7-day free trial.

Who makes Inchy?

InterioApp. We have priced and sold made to measure products since 2011, in our own shop first, and our quoting software and calculators are used by made to measure businesses in the UK, Europe, Australia and New Zealand.

Type a size into the demo, drag the ruler, open the breakdown, and then do the same on your own product page. See Inchy and try the live builder. Start the 7-day free trial on the Shopify App Store.

Sources

• Baymard Institute, Cart abandonment rate statistics: 70.22% average across 50 studies; "extra costs too high" 40%; "couldn't see or calculate total order cost up front" 12%; page updated 22 September 2025.
• Nielsen Norman Group, Visibility of system status: the first of the ten usability heuristics, Aurora Harley, 3 June 2018.
• Deloitte, Made-to-order: the rise of mass personalisation: survey of 1,560 GB adults, 2015; 36% interested in personalised products; one in five of those willing to pay a 20% premium.
• Shopify.dev, Cart Transform Function API: only development stores or stores on a Shopify Plus plan can use apps with update operations.
• Inchy live demo: sample UK prices at 350 × 250, 550 × 300 and 420 × 300 cm, the winter cover at 420 and 550 cm, the breakdown and the size limit message, read on 1 November 2026.

Written with AI. Every figure is checked against the sources listed above.