Bold Allergens and Nutrition in Shopify Tabs Without HTML or Liquid

You sell food into the EU and you want your product page to look like the pack: an ingredient list with the allergens in bold, and a nutrition table. You already keep the values in metafields, so you add a collapsible tab to the product template, connect it to the ingredients metafield, and save.

The tab opens, the ingredients are there, and nothing is bold. The nutrition values come out as one long line. So you start searching for “bold allergens in ingredients metafield” and find the same questions asked again and again, with answers that ask you to paste HTML, split values with a pipe character, or write Liquid.

This guide explains why that happens and shows a way to get bold allergens and a nutrition table on the product page without any of those workarounds.

Why the allergens won’t go bold

A collapsible tab in a theme such as Dawn shows whatever its content source gives it. When that source is a single-line or multi-line text metafield, the tab prints the text exactly as stored. Asterisks, capitals or any other marks you typed stay as plain characters; nothing turns them into bold.

The fixes you usually find each have a cost:

• HTML in the value. Typing <strong>milk</strong> into the metafield works in some places and shows the raw tags in others. Whoever edits the ingredients next has to keep every tag intact.
• A rich text metafield. This can hold bold text, but you format each allergen by hand for every product, and the tab still has to be connected to it in each template.
• Liquid in the theme. A snippet can search the ingredient text and wrap allergens in bold. It is custom theme code, so it needs a developer to write it and may need fixing when the theme is updated or replaced.

Why the nutrition table ends up on one line

A nutrition declaration is a table: energy in kJ and kcal, fat, saturates, carbohydrate, sugars, fibre, protein and salt, each with a value per 100 g. A text metafield holds one string, so the common trick is to store something like Energy|1650 kJ|Fat|12 g and split it on the pipe in Liquid to build rows.

That works until someone adds a space in the wrong place, forgets a pipe, or a theme update changes the tab’s markup. Then the table breaks on the live page, and you may only notice when a customer asks. Keeping one metafield per nutrient avoids the pipes, but you still need Liquid to lay them out as a table.

If your metafields show a heading but no value at all, that is a different problem: our guide to nutrition and allergen metafields not showing walks through the usual causes.

What the EU expects on the page

Regulation (EU) No 1169/2011 sets out the food information that has to reach the buyer, and for distance selling most of it has to be available before the purchase is made. On a product page that includes the nutrition declaration, the ingredient list with allergens emphasised so they stand out from the rest of the text, and the name and address of the food business operator.

This is not legal advice. Our guides to EU allergen information for online food shops and the EU nutrition declaration format cover the rules in more detail.

Step 1: Enter the food information once per product

Install Etiketto and open the editor for a product. On one screen you fill in:

1. Nutrition per 100 g. Energy in kJ and kcal, fat, saturates, carbohydrate, sugars, fibre, protein and salt, each in its own field. No pipes and no fixed format to remember. The values come from your own specification or lab results; the app shows them, it does not calculate them.
2. Ingredients. Type the list as it appears on your packaging.
3. Operator. The name and address of the food business operator.

Each product keeps its own food information, so every page shows only the ingredients and allergens of that product.

Step 2: Mark allergens with asterisks

In the ingredient list, wrap each allergen in asterisks:

oat flakes, honey, *butter* (*milk*), sunflower seeds

On the product page those words show in bold:

oat flakes, honey, butter (milk), sunflower seeds

No HTML tags and no rich text formatting. You decide what is emphasised: the app does not guess, so only the words you mark are bold. To find which of the 14 EU allergens a list contains before you mark it, check it with the free EU allergen checker.

Step 3: Add the Food information block

The block goes into the product template of an Online Store 2.0 theme, such as Dawn, with no theme code changes.

1. In your Shopify admin, go to Online Store > Themes > Customize.
2. Open the Product template.
3. Add the Food information block where you want it, for example below the description.
4. Pick a layout: table, accordion, compact or card. If you like the collapsible look of your tabs, the accordion layout keeps the information folded until the shopper opens it.
5. Pick a style preset and save.

The nutrition table and the ingredients are text on the page, not an image, so shoppers can read and copy them like the rest of the page.

Step 4: Check one product before the rest

Open a product page on your storefront and check:

• The nutrition values match the packaging.
• The allergens are bold in the ingredient list.
• The operator name and address are there.

Once one product of each kind looks right, fill in the rest. What you enter decides what the buyer sees, so a check against the pack catches typos early.

A short checklist

• Nutrition per 100 g entered in its own fields for each product
• Allergens wrapped in asterisks in the ingredient list
• Operator name and address filled in
• Food information block added to the Product template, layout picked
• Old HTML, pipe-delimited or Liquid tabs removed so the information doesn’t show twice
• Live page checked against the packaging

About Etiketto

Etiketto 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. You enter it once per product in one editor and place the Food information block in the theme editor, with no Liquid.

Done fighting with tabs and metafields? Try Etiketto: EU Nutrition Labels from the Shopify App Store, fill in your first product, and add the Food information block to your product page.