EU compliance4 min read
Shopify Nutrition Table and Bold Allergens Without Liquid
Show a nutrition table and ingredients with bold allergens on your Shopify product page as real text, from one form per product. No Liquid and no image labels.
In this guide
You sell food into the EU. You need a nutrition table and an ingredient list with allergens in bold on every product page. So you open your theme and start building: a custom tab, an accordion, a few metafields, a Liquid snippet to print them. Or you give up and paste a photo of the label into the description.
Both routes work, but both cause trouble later. The hand-built version can break when you change themes or edit the template. The image version can’t be searched, can’t be read by a screen reader, and can’t be copied by a shopper who wants to check one ingredient.
This guide covers a simpler way to put a nutrition table on a Shopify product page: fill in one form per product, add one block to the theme, and check the live page. No Liquid involved.
What the EU expects you to show
Regulation (EU) No 1169/2011 sets out the food information that has to reach the customer, and for distance selling most of it has to be available before the purchase is made. The pieces merchants most often ask about are:
- A nutrition declaration (the nutrition table)
- The ingredient list, with allergens emphasised so they stand out from the rest of the text
- The name and address of the food business operator
This is not legal advice. If you’re unsure what your specific products need, check with your food authority or a legal advisor. Our guides to EU allergen information for online food shops and the EU nutrition declaration format go into the rules. What follows is about the display problem: getting the information you already have onto the page cleanly.
Why the DIY approaches are hard to keep working
The questions food shops ask about this are usually the same three: how to show a nutrition table in a tab or accordion, how to make allergens bold inside the ingredient text, and how to show only the allergens that belong to each product.
The usual answers involve metafield definitions, Liquid loops and custom HTML. That is fine if you enjoy theme work. If you run a small food shop, it is time you’d rather spend on production and shipping. When the values don’t show up, our guide to nutrition and allergen metafields not showing walks through the usual causes.
Image labels avoid the code, but the text inside an image is not text on your page. Search engines and assistive tools can’t reliably read it, and changing one value means making a new image.
Step 1: Fill in one form per product
Install Etiketto: EU Nutrition Labels and open the editor for a product. Each product has its own food information, so nothing is shared by accident between a chocolate bar and a jar of chutney.
On one screen you fill in:
- Nutrition per 100 g. Energy in kJ and kcal, fat, saturates, carbohydrate, sugars, fibre, protein and salt. The values come from your own specification or lab results; the app shows them, it does not calculate them from a recipe.
- Ingredients. Type the ingredient list as it appears on your packaging.
- Operator details. The name and address of the food business operator.
The same editor also has fields for net quantity, storage and origin if you want them on the page.
Step 2: Mark the allergens
In the ingredient list, wrap each allergen in asterisks:
oat flakes, honey, *butter* (*milk*), sunflower seeds
On the product page, the marked words show in bold. You decide what is emphasised. The app does not detect allergens on its own, so only the words you mark are bold. To see which of the 14 EU allergens an ingredient list contains before you mark them, check it with the free EU allergen checker. Because the ingredients belong to the product, each page shows that product’s own allergens.
Step 3: Add the Food information block to your product page
Now place the food information on the page. This needs an Online Store 2.0 theme, and no theme code changes.
- In your Shopify admin, go to Online Store > Themes > Customize.
- Open the Product template.
- Add the Food information block.
- Drag it to where you want it, for example below the description.
- Pick a layout: table, accordion, compact or card, and a style preset.
- Save.
The nutrition table and the ingredient list are plain HTML text on the page, not an image, so search engines, screen readers and translation tools read them like the rest of the page.
If you sell in more than one language, the label wording comes in 10 languages, and your own text can be translated into each published store language.
Step 4: Check the live page
Open a product page on your storefront and check three things:
- Do the nutrition values match your packaging?
- Are the allergens bold in the ingredient list?
- Is the operator information present?
Do this for one product of each kind you sell before you fill in the rest. What you enter decides what the buyer sees, so a quick check against the pack catches typos early.
A short checklist
- Nutrition per 100 g filled in for each product
- Allergens marked with asterisks in the ingredient list
- Operator name and address filled in
- Food information block added to the Product template
- Layout picked and saved
- Live page checked against the packaging
About Etiketto: EU Nutrition Labels
Etiketto: EU Nutrition Labels is an 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. You enter it once per product in one editor and add the Food information block in the theme editor, with no Liquid edits.
Ready to retire the image labels and the custom tabs? Install Etiketto: EU Nutrition Labels from the Shopify App Store, fill in your first product, and add the Food information block to your product page.