EU compliance5 min read
Nutrition Table and Allergens per Variant on Shopify, No Code
Show a different nutrition table, ingredients and bold allergens for each flavour or pack size on a Shopify product page, switching with the variant. No code.
In this guide
To show a different nutrition table and allergens for each flavour or pack size on one Shopify product, give each variant its own label and use a product page block that swaps the label when the shopper picks a variant. With Etiketto: EU Nutrition Labels you fill in one label per variant in the app’s editor and add the Food information block in the theme editor, with no Liquid or JavaScript. The rest of this guide shows when you need per-variant labels, why the usual workaround takes code, and the steps.
This is not legal advice. Check the rules that apply to your products with your food authority or a legal advisor.
When does each variant need its own label?
If a product’s variants are different foods, they need different food information. The common cases:
| Your variants differ by | What usually changes on the label |
|---|---|
| Flavour (honey almond, dark chocolate) | Ingredients, allergens and the nutrition values per 100 g |
| Pack size (250 g, 500 g, 1 kg) | Net quantity; the nutrition per 100 g often stays the same |
| Recipe (with nuts, nut-free) | Ingredients and allergens, often the nutrition values too |
| Colour or packaging only | Usually nothing, so one label for the product is enough |
The second case catches many shops: a 250 g and a 1 kg bag of the same granola share their nutrition table, but the net quantity on the page has to match the size the shopper is buying.
Why is this hard to do on a Shopify product page?
Shopify lets you store custom data on products and on variants as metafields. The trouble is showing it. A shopper who picks a different flavour expects the page to change, and in many themes only some parts of the page refresh when the variant changes, such as the price and the image. A custom block that prints variant metafields can keep showing the first variant’s values.
So the answers merchants usually find in the Shopify Community involve theme work:
- A Liquid snippet that loops over the variants and prints a hidden table for each one
- JavaScript that listens for the variant change and shows the matching table
- An accordion or tab per flavour, built by hand in the product description
All three work until the theme is updated or the template is edited, and each new flavour means editing code or copying another table. If your metafields don’t show at all, our guide to nutrition and allergen metafields not showing covers the usual causes.
How do I show a different label for each variant without code?
These steps use Etiketto: EU Nutrition Labels. You need an Online Store 2.0 theme, such as Dawn.
- Open the product in the app’s editor. Choose to give each variant its own label instead of one label for the whole product.
- Fill in the nutrition table for each variant. Enter energy in kJ and kcal, fat, saturates, carbohydrate, sugars, fibre, protein and salt per 100 g, from your own specification or lab results. The app shows the values you enter; it does not calculate them. To work out energy and the EU rounding for each variant before you enter it, use the free EU nutrition label generator.
- Type each variant’s ingredient list and mark the allergens. Wrap each allergen in asterisks, for example
oat flakes, honey, *almonds*, sunflower oil, *milk* powder. On the product page, the marked words show in bold. Only the words you mark are bold. - Set the net quantity for each size. When your sizes differ, each variant carries its own net quantity.
- Add the operator. Fill in the name and address of the food business operator, and the block shows it with the label.
- Add the Food information block to the product template. In your Shopify admin, go to Online Store > Themes > Customize, open the Product template, add the Food information block, place it, pick a layout and save.
- Check the live page. Open the product on your storefront, pick each flavour or size in turn, and compare the label with the pack.
When the shopper picks another flavour or size, the Food information block shows that variant’s label. The label is plain HTML text, not an image, so search engines, screen readers and translation tools read it like the rest of the page.
What about supplements and protein powders?
Supplement and nutrition brands often upload a photo of the pack label for each flavour. You can replace it with a nutrition table and ingredients as real text, one label per flavour or tub size. The table in Etiketto is per 100 g, which fits protein powders, bars and other foods. For a food supplement, keep the amounts per daily dose and the warnings in the product description, as they appear on the pack.
What if I sell in more than one language?
The label wording comes in 10 languages, and your own text, such as the ingredient list, can be translated into any published store language. That helps shops in Germany, Austria and Switzerland that sell to shoppers in several languages.
Questions
Do I need a label for every variant? No. If the variants are the same food, one label for the product is enough. Give variants their own label only where the food information differs.
Will the label change without the shopper reloading the page? When the shopper picks another flavour or size, the Food information block shows that variant’s label.
Can I make allergens bold for each flavour? Yes. Mark the allergens with asterisks in each variant’s ingredient list, and the product page shows them in bold.
Does this need Liquid or theme code? No. You add the Food information block to the product template of an Online Store 2.0 theme in the theme editor.
Does the app check that my values are correct? No. The values come from you, and the app shows them as entered. Check them against your specification and packaging.
Keep reading
- Etiketto: EU Nutrition Labels: what the app shows on your product pages
- Shopify nutrition table and bold allergens without Liquid
- Allergens on a Shopify product page: emphasising the EU’s 14
About Etiketto: EU Nutrition Labels
Etiketto: EU Nutrition Labels is a free app for food shops selling into the EU. It shows the food information Regulation (EU) No 1169/2011 requires on your product pages: a nutrition table, ingredients with allergens in bold, and the operator. For products sold in several flavours or sizes, each variant can have its own label, and the page shows the label of the variant the shopper picks.
Selling one product in several flavours or sizes? Try Etiketto: EU Nutrition Labels from the Shopify App Store, give each variant its own label, and add the Food information block to your product page.