FDA nutrition facts panel on Magento PDPs, how to auto-render?

FDA 2016 Nutrition Facts panel (effective 2020 enforcement) has tight formatting requirements: black-bordered box, specific serif typography, bold "Nutrition Facts" header, explicit "% Daily Value" footnote, added-sugars line, vitamin D + potassium + calcium + iron mandatory, dual-column for "per serving / per package" if applicable. Get this wrong and FDA can hit you with warning letters + product seizure.

Magento approach: store ~30 nutrition attributes per product (calories, total-fat, saturated-fat, trans-fat, cholesterol, sodium, total-carb, dietary-fiber, total-sugars, added-sugars, protein, vitamin-D, calcium, iron, potassium, plus optionals). Render via a static-styled HTML+CSS block on PDP that mirrors FDA spec exactly, we ship a tested CSS template that prints ~99% match on the panel.

For dual-column (e.g. "per serving + per package" when single-pack is realistically eaten in one sitting), the same template branches on a `dual_column` boolean attribute. For products under 8 sq.in. of total surface area (small jars, small candy), use the linear / tabular format, same attribute set, different render path.

Updates: when FDA pushes new compliance dates (e.g. added-sugars timeline shifts), updating one template file ripples across thousands of products. Don’t do it inline in the PDP description, you’ll regret it at scale.

Kishan Savaliya
Kishan Savaliya
Adobe Certified Magento Commerce Developer
Ahmedabad [IN]working hours, replies within four hours
When do you need it

Read personally. Never shared. Or email the brief.

More on magento for food + grocery

Need it fixed, not just explained?

Send the brief with your store URL; the written quote comes back within 24 hours.