Show metafields on product cards in Shopify bundles

To show metafields on product cards in a Shopify bundle, you need two things: a product metafield definition with storefront access turned on, and a bundle builder that reads it. Elite Bundle Builder does the second part under Config, then Custom data, where each metafield becomes a badge on the image, a line under the price, or a short text block. This post covers the setup end to end, the metafield types that work, and the one reason a field shows nothing.

Why product cards need more than a title and price

A bundle card is small and the shopper is choosing between a dozen of them at once. For a snack box, the deciding fact is often "is this vegan" or "how much protein". For a skincare routine it is the skin type. For a fashion set it is the fabric or the care instruction. None of that fits in a product title, and a shopper who has to open each product to find it will stop after the third one.

Shopify already has a home for this data: product metafields. If you have filled in calories, allergens or materials for your product pages, the values exist and just need surfacing on the card. If you have not, the setup below takes ten minutes for the definition and then a value per product.

Step 1: create the metafield definition with storefront access

In Shopify admin, go to Settings, then Custom data, then Products, and add a definition. Give it a clear name (Dietary tags, Calories, Care instructions), pick a type, and save. The type matters for the next step, so the list of supported types is below.

Then open the definition and turn on Storefront access. This is the step people miss. A metafield without storefront access is invisible to anything that renders on the storefront, including the bundle page, because Shopify's Storefront API only returns metafields that have been exposed. The rule is in Shopify's documentation on metafields in the Storefront API.

The editor helps here. When you add a field whose definition is not exposed yet, Elite shows a note under it. If a card is blank, this is the first thing to check.

Step 2: fill in the values on each product

Open each product in Shopify admin and scroll to the Metafields section at the bottom. Enter the value exactly as you want it to appear, including units. The card shows the value as stored, so "320 kcal" in the metafield becomes "320 kcal" on the card, and "320" becomes "320" with no unit.

For a list type, add each entry separately. "Vegan" and "Gluten free" as two entries in a list of single-line text will become two chips on the card. Products with no value simply show nothing for that field, so you can fill the catalogue gradually.

If you have many products, Shopify's bulk editor is faster than opening each one.

Step 3: add the field in Elite under Config, then Custom data

Open the bundle in the editor and go to the Config tab, then Custom data. Click Add field and choose two things:

• Select metafield: a list of your store's product metafield definitions.
• Show as: where the value appears on the card.

The three placements are:

Badge on image. Small chips over the product image. Best for short labels a shopper scans in a second: Vegan, New, Spicy, Organic. A list metafield becomes one chip per entry.

Line under price. One compact line. Several fields joined with a dot, so Calories and Protein together read "320 kcal · 24g protein". Best for numbers.

Text block. A short paragraph under the price. Line breaks are kept. Best for care instructions, a one-line description or an ingredient note.

Add fields until the card looks right in the live preview. A couple of badges and one meta line is the combination that reads best; a text block on every card makes the grid tall and slow to scan. The same values also appear in the quick view modal, so a longer text block can live there and the card can stay short. The full reference is in the Config tab custom data section of the docs.

Step 4: save and check the storefront

Save from the editor's save bar, then open the bundle page on your store. The live preview uses the same components as the storefront, so what you saw in the editor is what shoppers get. Check one product with values and one without, and check a phone width, because chips over a small image are the first thing to get cramped.

Which metafield types work on cards

The picker in Elite lists definitions of these types, and lists of any of them:

• Single-line and multi-line text
• Integer and decimal
• Date
• URL
• Colour

A list shows one entry per value, which is what makes badges from a list of tags work.

Types that do not appear in the picker: true/false, rich text, JSON, money, weight, volume, dimension, rating, date and time, and references to products, files, metaobjects or other resources. If your allergen data is in a metaobject reference, the quickest route is a second definition of type list of single-line text that holds the plain names, filled in alongside.

My advice on types: use list of single-line text for anything that is a label, and single-line text for anything that is a number with a unit. A decimal type looks tidy in admin but you then cannot store "24g", and the card will not add the unit for you.

Why a metafield shows nothing on the card

There are three causes, in order of how often they happen:

1. The definition does not have Storefront access turned on. Open it in Settings, Custom data, Products and switch it on. The editor shows a note under the field until you do.
2. The metafield is unstructured. Metafields created by other apps without a definition do not appear in the picker at all. On the same Custom data page choose View unstructured metafields, then Add definition for the one you want, then enable Storefront access. The field then appears in Elite.
3. The product simply has no value. Nothing is wrong; fill it in.

If the field is in the picker, has storefront access and the product has a value, and it still shows nothing, contact support from the app. That is the whole checklist.

Where this helps most

Food and drink stores get the most from it: calories, protein and dietary tags on a snack box or meal kit builder do the work a product page used to do. Beauty stores use skin type and key ingredient badges. Fashion and homeware use fabric, care and origin as a text block. Every one of these is a build your own bundle with the same four-step setup, and the features page lists the other card controls that sit beside it.

Frequently asked questions

Can I show metafields on product cards without a bundle app?

Only if your theme has been customised to read them, which usually means editing Liquid in the product card snippet. Inside a bundle page the cards are rendered by the bundle app, so the theme edit would not apply there anyway. Elite reads the metafield directly once the definition has storefront access.

Do list metafields show as separate badges?

Yes. A list of single-line text with "Vegan" and "Gluten free" as two entries becomes two chips over the image. Add each tag as its own list entry rather than one comma-separated value, or you get a single long chip.

Do the metafield values also show in the quick view?

Yes. Any field you add under Custom data appears in the quick view modal as well as on the card, so a shopper who opens the modal sees the same tags and numbers next to the gallery and description.

Custom data on cards is included in the free plan with everything else. See the pricing page or install Elite Bundle Builder from the Shopify App Store.