Shelf Check

The problem

Bigger packs are supposed to be cheaper per unit, and often they are not. A 2026 study of 38 New Zealand supermarkets found a quantity surcharge on about a quarter of products sold in several sizes, and Which? found a 2 kg spaghetti bag labelled better value that cost 27p more than two 1 kg bags. The shelf's own unit price is no safe guide either: New Jersey fined Walmart $1.64M after inspectors found over 2,000 tags using the wrong unit, with similar products priced per can, per pound or per 100-count. Unit prices also ignore multi-buy offers, so shoppers end up doing division in their head in the aisle.

• Victoria University of Wellington (2026): 26% of products had a quantity surcharge
• NJ Attorney General: Walmart pays $1.64M over mismatched unit prices
• UK CMA open letter to grocers on unit pricing
• Which?: a "Bigger Pack Better Value" bag that cost more

How I approached it

The parser reads labels as they are printed rather than asking people to pick units from dropdowns: 2 lb 4 oz, 1/2 gal, 6 x 330 ml, 3,49 €, 99p, and offers such as 3 for $5, 2/$5, buy 2 get 1 free and 2nd half price. Every size converts to grams, millilitres or items with exact factors, every offer becomes a price per pack plus how many you must buy, and the answer starts in the unit the labels use so it can be checked against the shelf. Items within 1% count as a tie so label rounding never picks the winner, and an item sold by a different kind of unit is left out with a reason instead of guessed. The engine has no DOM and runs the same in the page and under node:test. A network-first service worker keeps it working with no signal in the store.

The outcome

A ranked list with bars, a best-buy card that says when you have to buy several, warnings for a bigger pack that costs more per unit and for an offer that still loses, and a yearly saving at how often you buy it. On the pasta example the 2 kg value pack comes out 12% dearer per 100 g than the 1 kg bag. 14 tests with no dependencies cover sizes, prices and offers in every format above, ranking, ties, the two traps and the saving. Checked in Chrome at 375 px in dark mode and at desktop width, and offline after one visit.

The mascot

Tag is a price tag drawn in inline SVG. Tag's eyes follow the pointer, or the field being typed in on a phone, and Tag thinks while you type, cheers at a clear winner and frowns at a trap, naming the item in a speech bubble. Tapping gives a tip for the current step, such as what sizes can be typed when the list is empty. Everything Tag says goes through an aria-live region, one tap hides Tag for good, and nothing moves under reduced motion. The point is speed in the aisle: the warning arrives where the eye already is.

What I learned

Most of the work was in reading what people actually type. Fractions, decimal commas and 2/$5 all look obvious until a parser meets them, and a size like 16 oz has to stay weight while 16 fl oz is volume.