Search blocks by description or jump to a page.
A stacked list of product components, each with its gram weight, a proportional bar, and a note, closing on a summed total row.
The source for every Ecommerce block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Weight Breakdown turns a single headline weight into an auditable sum. Every component of the bag is weighed on the bench scale and listed with its grams, a proportional bar, and a note on why it weighs what it does. The lede sets the terms: "The headline weight is not a marketing number, it is a sum." A footnote admits the obvious alternative: 300 grams could go by switching to laminated nylon, and nobody has ever asked to buy that prototype.
Components live in one array, each carrying a name, gram value, percentage share, and note. The share drives the bar width, so the bars always sum to the total row at the foot of the list.
Reach for this block when the weight of a product is a buying decision, not a footnote, and you would rather show the arithmetic than assert a number. It sits well after the full spec sheet where the total weight first appears, expanding the one row buyers most often question.
A natural flow around it on an Ecommerce Pro page:
Before
After
One strong use is the canvas tote component weighing. Other breakdowns:
Tip: the "Total, empty" row is the one number a buyer repeats to a friend, so let the bars above it prove the figure before the total states it.