Product colors and food facts

Platter shows the facts food shoppers check before they buy, next to the price: origin, ingredients, allergens, size and more. It also gives every product its own field color. All of this comes from product metafields you fill in in Shopify admin. No app is needed.

This guide lists each metafield, shows how to create it, and says where it appears.

1. Create the definitions

Do this once per store.

1. In Shopify admin, go to Settings → Custom data. On some stores this page is called Metafields and metaobjects.
2. Click Products, then Add definition.
3. Enter a name, such as “Field color”. The name is only for you.
4. In Namespace and key, enter the value from the list below, such as platter.field_color.
5. Select the type from the list below. For a list type, choose the type and then List of values.
6. Save. Repeat for each metafield you want.

You only need the ones you will use. A product with no value for a fact simply leaves that row out.

2. The product metafields

• Field color: platter.field_color, type Color. The product’s field color.
• Origin: platter.origin, type Single line text. Where it comes from, for example “Nariño, Colombia”.
• Measure: platter.measure, type Single line text. The headline number, for example “72%”.
• Tasting notes: platter.tasting_notes, type Single line text. Three or four notes, separated by commas.
• Allergens: platter.allergens, type Single line text, List of values. One allergen per entry.
• Contains no allergens: platter.allergen_free, type True or false. Shows “Contains: None” when the product has no allergens.
• Size: platter.size, type Single line text. Net weight or volume, for example “70 g”.
• Ingredients: platter.ingredients, type Multi-line text. In order of weight.
• Batch: platter.batch, type Single line text. A line about the current batch.
• Nutrition: platter.nutrition, type Multi-line text. See step 5 for the format.

To fill them in, open a product in Shopify admin and scroll to the Metafields card at the bottom.

3. Where each fact shows

Field color is the background of the product’s field on the home page and its product page. It also colors the product’s row in collections and search, its chip in the range index and the mega menu, its swatch in recipes and the build-a-box list, and the space behind its photo in the bag. Without a value, Platter uses Theme settings → Colors → Default field color.

Measure shows large beside the product name. It also shows in collection rows, the range index, the mega menu, recipe lists and the build-a-box list. If the product name already contains the measure, Platter doesn’t repeat it.

Origin, tasting notes, allergens and size show in the facts list beside the price, on the product page and in home page fields. Collection and search rows show origin, tasting notes and allergens, with the size beside the price.

Ingredients show in the facts list on the product page. On the home page, see the Show ingredients setting in Set up your home page in Platter.

Batch shows under the product name on the product page. On the home page it shows when Show batch line is on, in the Feature composition and wherever the photo bleeds off the page edge.

Nutrition shows only on the product page, as a table below the main field.

4. Allergens

Allergens are always written as text, never shown by color or icon alone. Platter labels them “Contains” and joins them with commas. It starts the list with a capital letter and sets the rest in lower case, so “Milk, Tree nuts” shows as “Milk, tree nuts”.

If a product has no allergens, leave Allergens empty and set Contains no allergens to true. Platter then shows “Contains: None”. If both are empty, the row is left out.

The Allergens list can also be a collection filter. See Collections and allergen filters.

5. Nutrition format

Write one row per line, as a label, a colon and a value. A line without a colon is a note. Notes before the first row show above the table, and notes after the last row show below it.

Per 100 g
Energy: 2,280 kJ / 548 kcal
Fat: 41 g
of which saturates: 25 g
Carbohydrate: 32 g
Protein: 9 g
Salt: 0.02 g

When a product has nutrition, its description moves below the main field, beside the nutrition table. Without nutrition, the description sits in the field above the facts.

6. Food facts settings

Go to the editor, then Theme settings → Food facts.

• Measure label names the measure, for example Cacao, Roast or Heat. It heads the measure column in the range index and labels the measure in the facts list. Leave it empty to use “Strength”.
• Kitchen note shows under the facts on every product page, for example a shared-kitchen allergen note. Home page fields show it when Show kitchen note is on.

7. Collection colors

Collections can have a field color too. Create a second definition under Settings → Custom data → Collections, with platter.field_color and type Color. See Collections and allergen filters for where it shows.

8. The rest of the product page

The product template has more than the facts:

• Product is the main field. Its blocks are Text, Collapsible row and Share links, and apps can add their own blocks. Show accelerated checkout buttons is on by default. Details color scheme sets the colors of the description and nutrition area.
• Local pickup has no setting. When a location offers local pickup in Settings → Shipping and delivery, the product page shows whether the selected option can be picked up there, with the pickup time.
• Recipes for this product lists recipes that use the product. See Recipes and Add all to bag.
• Product recommendations appears twice. One shows complementary products, headed “Goes well with”. You choose those in Shopify’s Search & Discovery app. The other shows related products, headed “More from the range”. Shopify picks those.