Size reference

“How big is it?” is the question that stops a sale on an object nobody has held, and the most common reason one comes back. The Size reference block answers it with a drawing to scale: your product beside something the customer owns.

Setting it up

1. Create the measurement metafields once — Settings → Custom data → Products → Add definition — as type Dimension: custom.width, custom.height, custom.depth. Step by step: Metafields.
2. Fill them in on your products. Shopify shows them in the product’s Metafields card.
3. In the theme editor, open a product and Add block → Size reference. It already reads custom.width, custom.height and custom.depth; if your definitions have other names, type them into Width metafield, Height metafield and Depth metafield (namespace.key).

That is once for the whole catalogue: the block is part of the template, the values come per product.

Settings

Setting	Notes
Heading	Default “Size”.
Compare with	Bank card (the default) · Hand · Coin · A4 sheet · Mug · Nothing — just the measurements. Pick the reference closest to the object’s own size — the drawing is to scale, so a small object beside an A4 sheet really does look small. The bank card and the A4 sheet are standard sizes anywhere in the world, so they read the same to every shopper; the hand, the coin and the mug are averages.
Unit	Millimetres / Centimetres / Inches. Used for a measurement given as a bare number. A Dimension metafield brings its own unit, which wins.
Width metafield	The product metafield (namespace.key) drawn left to right — a Dimension, or text like “12.5 cm”. Default custom.width.
Height metafield	Drawn bottom to top. Default custom.height.
Depth metafield	Drawn as the slab behind the front face. Default custom.depth.
Fixed measurements — Width / Height / Depth	Used for products without a value in the metafields above: a catalogue where every piece is the same size.

The references are drawn at their real sizes: hand 95 × 185 mm, coin ⌀24 mm, bank card 85.6 × 54 mm, A4 sheet 210 × 297 mm, mug 108 × 95 mm.

What happens when data is missing

The block is built to be partly filled in:

You give	The drawing shows
Width, height and depth	A box with isometric depth, with all three dimension lines
Width and height	A flat rectangle with two dimension lines
One dimension only	A single dimension line for the measurement you gave
Nothing	The block renders nothing at all — not an empty frame, not a heading

So you can add the block to the template before the whole catalogue is measured. Products without measurements simply do not show it.

What a measurement can look like

The value is read generously. All of these work:

Value	Read as
12.5 cm	125 mm
12,5 cm	125 mm
125	125 of the block’s Unit
0.5 in	12.7 mm
125 mm	125 mm

A unit inside the value always beats the block’s Unit setting. A Dimension metafield always carries its own unit, which is why it is the recommended type — but a number_decimal metafield or plain text works too, with the unit coming from the block.

Accessibility

The drawing carries no text at all: the shapes are an image with a written description, and the figures sit in a list below it. That is deliberate — it reads correctly with a screen reader, it translates with the rest of the store, and it keeps text out of an image, which the Theme Store requires.

Tips

• Give the outer dimensions, including a lid or a handle, and say so in the product description if it matters.
• Mug is the reference most people judge best, because almost everyone has the same one on their desk. Hand reads well for anything held; A4 sheet for flat or wall-mounted pieces; Coin for small parts; Bank card for anything that goes in a pocket.
• For a set of several pieces, measure the largest and say “largest piece” in the heading.