Measurement Guide Diagram

About this block

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.

When to use

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

• Size chart table with the numbers these lines locate

After

• Fit notes panel for the judgment layer
• Fit feedback reviews

What you can display

One strong use is the shirt diagram for tops. Other diagrams:

• Trouser diagram. Waist, rise, inseam as the lettered lines.
• Bag diagram. Width, height, depth on a drawn silhouette.
• Ring guide. The printable circle method, drawn to scale.

Tip: letters on the diagram matching letters in the chart header is the whole system, keep them in lockstep when you add a measurement.