# Supplement facts panel

Chapter 8 of the Dose user guide.

Supplement shoppers read the label before they buy. The facts panel puts a real one on the product page, in your theme's colours, built from one text field you copy from your printed label.

## What shoppers see

Under the gallery, in **Facts and ingredients**, a framed white label:

* The title, **Supplement Facts**, in the heading font (or the heading you choose).
* **Serving size** "2 gummies" and **Servings per container** "30", over a heavy bar.
* The column heads **Amount per serving** and **% Daily Value**, then one row per nutrient with its amount and daily value, divided by thin rules. A name's bracket, such as "(as glycinate)", is set lighter.
* Sub-heading rows, such as "Herbal blend", and indented rows under them.
* The footnotes, only when a row uses them: "* Percent Daily Values are based on a 2,000 calorie diet." and "† Daily Value not established."
* **Other ingredients** and **Allergens**, each on a line.
* Your **disclaimer** in a ruled box with an info icon.

The label stays white in every palette, even on Charge's charcoal page. On a narrow phone the table keeps its columns and scrolls sideways inside its frame, so the page itself never does. It's a real table that screen readers read row by row.

## How the label is built

The panel reads four product metafields (chapter 7):

| Metafield | Becomes |
| --- | --- |
| `custom.supplement_facts` | The serving size (from the first line) and every row |
| `custom.servings` | **Servings per container**. Without it, that row is left out. |
| `custom.other_ingredients` | The **Other ingredients** line |
| `custom.allergens` | The **Allergens** line |

**Without `custom.supplement_facts` the panel shows nothing at all**, disclaimer included, so accessories never get an empty label.

## The format, line by line

Each line of `custom.supplement_facts` is a row. Cells are separated by `|`; spaces round them don't matter, and empty lines are skipped.

| You write | Shoppers see |
| --- | --- |
| `Serving size \| 2 gummies` (first line only) | "Serving size 2 gummies" above the table. Without this line, the serving row is left out and every line is a nutrient. |
| `Vitamin D3 \| 25 mcg \| 125%` | A row: the name, the amount and the daily value |
| `L-theanine \| 100 mg` | No daily value: "†", and the † footnote shows |
| `Calories \| 10 \| -` | A `-` (or `–`) prints nothing in the daily value column, and no footnote |
| `Total carbohydrate \| 3 g \| 1%*` | The value with its asterisk, and the * footnote shows |
| `Magnesium (as glycinate) \| 200 mg \| 48%` | "(as glycinate)" set lighter than the name |
| `## Herbal blend` | A sub-heading row across the table |
| `- Ashwagandha root extract \| 300 mg` | An indented row, set in the regular weight |
| `Contains naturally occurring sugars.` | A line with no `\|` is a note row across the table |

The words "Serving size", "Other ingredients" and "Allergens" are the theme's own, and you can change them under **Edit default theme content** (chapter 15). Write amounts with their units as on your label ("25 mcg", "1,000 mg", "20 billion CFU"): the panel prints them as written and doesn't check or convert them.

A worked example. This field:

```
Serving size | 1 scoop (8 g)
Calories | 30 | -
Total carbohydrate | 4 g | 1%*
Dietary fibre | 2 g | 7%*
Vitamin C | 60 mg | 67%
## Greens blend
- Spinach and kale | 2 g
- Apple fibre | 1.5 g
```

with `custom.servings` 30 gives a label with "Serving size 1 scoop (8 g)", "Servings per container 30", four rows, a "Greens blend" sub-heading with two indented rows, both footnotes, and the supply calculator's "Scoops a day".

## Supplement facts block settings

| Setting | Default | What it does |
| --- | --- | --- |
| Heading | Supplement Facts | **Supplement Facts**, **Nutrition Information** or **Custom**: the label's title |
| Custom heading | | Shows when **Heading** is **Custom** |
| Style | Framed label | **Framed label** (the white card with its frame) or **Plain** (the same table on the section's ground) |
| Servings label | "Servings per container" | Under **Labels** |
| Amount column heading | "Amount per serving" | |
| Daily value column heading | "% Daily Value" | |
| Show other ingredients | On | |
| Show allergens | On | |
| Footnote for * | "Percent Daily Values are based on a 2,000 calorie diet." | Under **Footnotes and disclaimer** |
| Footnote for † | "Daily Value not established." | |
| Show the disclaimer | On | |
| Disclaimer | "These statements have not been evaluated by the Food and Drug Administration. This product is not intended to diagnose, treat, cure, or prevent any disease." | Shows while **Show the disclaimer** is on. Replace this with the wording your country requires. |

To change these on the `product` template, open the template in the theme editor, select **Facts and ingredients**, then **Supplement facts**.

> **Important:** the default disclaimer is the statement the United States asks for on dietary supplements. It's there as an example, not as advice. If you sell outside the US, replace it with the wording your own country requires, or turn it off if none is required, and choose the heading your labels use. In Australia, for example, many vitamins and supplements are therapeutic goods regulated by the TGA, and some sports and protein products are foods under the Food Standards Code, and each has its own rules for labels and advertising. Dose gives no regulatory advice: check what your products need with your regulator or a regulatory adviser (chapter 12).

## Variants

The servings per container comes from the variant the page opens with, when that variant has its own `custom.servings` (chapter 7), else from the product. It doesn't change when a shopper picks another size on the page; the supply calculator does. If your sizes have different servings, say so in the variant names ("60 gummies") as well.

## In the theme editor

On a product without `custom.supplement_facts`, the theme editor shows the panel with a sample label (Wind-down gummies) and a "Sample" tag, so you can check its heading, labels and disclaimer. Shoppers see nothing until you fill in the metafield.