Measurement Guide Diagram
A drawn garment SVG with lettered measurement lines matching the chart.
A drawn garment SVG with lettered measurement lines matching the chart.
The Ecommerce Collection unlocks the source for every Ecommerce block. All Access unlocks every Collection.
Already purchased? Log in
Measurement Guide Diagram draws a shirt as an inline SVG with dashed measurement lines and lettered discs, A pit to pit, B shoulder to hem, C shoulder seam to cuff, with the legend rows beside it. The diagram makes the size chart usable by showing exactly where each number lives.
The garment is one SVG path with token classes, no image asset, recolorable by theme like every drawn graphic in the collection.
Reach for this block directly under the size chart on the size guide page. The pair answers the two questions in order, what are the numbers, and where do I measure to compare.
A natural flow around it on an Ecommerce Pro page:
Before
After
One strong use is the shirt diagram for tops. Other diagrams:
Tip: letters on the diagram matching letters in the chart header is the whole system, keep them in lockstep when you add a measurement.