> For the complete documentation index, see [llms.txt](https://docs.elitebundleapp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.elitebundleapp.com/customize-and-publish/product-data.md).

# Product data

Show the SKU, vendor, stock, savings, review stars or any metafield on bundle cards, quick view, the cart and bundle items, from the live preview.

**Product data** puts your product information in fixed spots on a bundle: badges in a corner of the image, a line under the title or price, a text block, a line or a badge on each cart item. Each spot has a set look, so you only choose what goes in it: your own text with variables for product data such as the SKU or vendor, or a metafield, shown the way its type reads: stars for a rating, a dot for a colour, an image for a file. There is no settings page for it: you fill each spot right in the editor's live preview. It works on all three bundle types.

<figure><img src="https://1636628623-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F803Sm8MKSqVH5ol6hROo%2Fuploads%2Fgit-blob-aaae30c07e6da68c92344c32b7112539afb95d02%2Fproduct-data.png?alt=media" alt="A product card in the editor preview with its Under the price popover open"><figcaption><p>① The spot under the price, ② variables you can add to the text, ③ Add metafield</p></figcaption></figure>

## Add data to a spot

{% stepper %}
{% step %}
In the editor's preview, hover a product card or the cart. On a multi-option bundle, hover an option; on a fixed bundle, "In this bundle". A small **+** appears at each empty spot, taking no space in the layout; point at one to see its name. Spots that already show data display real values, with a thin outline when you point at them.
{% endstep %}

{% step %}
Click a **+** or a spot, or focus it and press **Enter**. A popover opens beside it with the spot's name and where it applies, for example **Above the title** and *On every product card · Lines*.
{% endstep %}

{% step %}
Choose what to show:

* **Add text**: your own words, with variables for each product's data. Type `By {vendor}` and every card shows its own vendor. The variables sit under the text box: click one to add it to the end of the text.
* **Add metafield**: pick a product metafield, and the spot shows it the way its type reads (see [How each metafield type shows](#how-each-metafield-type-shows)).
* **Add tags**: the product's tags, one badge each in a badge spot, or on one line elsewhere. To show only some of them, see [Show only some tags](#show-only-some-tags).

The preview follows as you type or pick.
{% endstep %}

{% step %}
Add up to 3 lines per spot; each line's settings stay open in the popover, and its bin icon removes it. Close the popover with the **X** button, **Esc** or a click outside, then save with the save bar.
{% endstep %}
{% endstepper %}

The preview's cart starts with two of your products, so its spots show real data, followed by at least two placeholders (rows, or empty squares in the **Slots** item style) that show where more picks land; remove the products or add others as you like, it changes nothing in the bundle. A line with nothing to show on a product (no vendor there, stock above its limit, no next discount) still appears in the preview, faded, so you always see what you added; shoppers don't see it there. While a popover is open, every copy of its spot is outlined. The **Design** tab's list shows a **Product data** hint as a reminder: hover the preview, click **+**.

{% hint style="info" %}
**Quick view spots** (build your own bundles): switch the preview from **Bundle** to **Quick view** with the switch above it, or open a product's quick view from its card in the preview, then hover the quick view.
{% endhint %}

## Where the spots are

{% tabs %}
{% tab title="Build your own bundle" %}

| Where                                                     | Spots                                                                                                                                                                                                                                                      |
| --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Product card                                              | Badges, top left; Badges, bottom left; Above the title; Under the title; Under the price; Notes under the price; Above the add button. The image's right side is kept for the quick view button and the slideshow arrows                                   |
| Quick view                                                | Badges on the image, Under the title, Under the price, Under the description, Above the add button                                                                                                                                                         |
| Cart item, **Rows** item style (and the mobile cart)      | Badge on the item image, Above the item name, Under the item name, Under the item price. The product-page drawer has the same rows                                                                                                                         |
| Cart item, **Slots** item style                           | Badge on the item image, on each square. Under the item name shows on hover only, so not on touch screens                                                                                                                                                  |
| Bundle cart (side cart, mobile cart, product-page drawer) | Under the cart title (side cart only), Under the items, Above the cart button. These are about the whole bundle, so they take cart variables instead of product ones (see below), like `Add {remaining} more for {next}`; no metafields or stock condition |

Quick view spots reach shoppers only while quick view is on (**Design → Steps → Quick view button**) or the bundle has product add-ons. When it's off, the popover says so.
{% endtab %}

{% tab title="Multi-option bundle" %}

| Spot                             | Where                                                                                                                                                    |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Badge on the picked item's image | On the image in each option's header, when the header shows the item image. One badge fits                                                               |
| Under the picked item            | In each option's header, for the item the shopper picked                                                                                                 |
| On each product choice           | On each choice, only in options that list products. It shows on label buttons and on image or colour dropdowns, not on swatches or a plain text dropdown |
| Under the choices                | Under each option's choices, for the item the shopper picked                                                                                             |
| Above the total                  | Once, above the bundle's total: your own text with the cart variables (see below), no metafields                                                         |
| {% endtab %}                     |                                                                                                                                                          |

{% tab title="Fixed bundle" %}

| Spot                     | Where                                                                                                        |
| ------------------------ | ------------------------------------------------------------------------------------------------------------ |
| Badge on each item image | In "In this bundle", on each product's picture, in every layout. One badge fits                              |
| Above each item name     | Above each product's name in the list, grid and collapsible layouts. The thumbnail strip shows it on hover   |
| Under each item          | Under each product's name in the list, grid and collapsible layouts. The thumbnail strip shows it on hover   |
| Under the list           | Once, under the whole list: your own text, like "Ships together in one box", with no variables or metafields |

The editor preview shows each item's real data. The list's heading ("In this bundle") is a shop text: click it in the preview to open its field in **Settings → Language & Texts**.
{% endtab %}
{% endtabs %}

Each spot has one of three looks, which its popover names after where it applies:

* **Badges**: one badge per value, over the image. Up to 2 show per corner of a grid card, 1 per corner of a list-layout thumbnail and 4 in quick view; any more show as "+N". A cart item's image has room for 1
* **Lines**: each text on a line of its own, so 3 texts show as 3 lines; a list's values share their line, joined with " · ": `Vegan · Gluten free`
* **Text block**: a paragraph per line, with line breaks kept

## Variables you can use

Type these in a text, around your own words:

| Variable                    | Shows                                                                                                                                            |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `{vendor}`                  | The product's vendor                                                                                                                             |
| `{type}`                    | The product's type                                                                                                                               |
| `{tags}`                    | The product's tags: every one, only the ones the line picks, or all but those                                                                    |
| `{sku}`                     | The SKU of the selected variant: the one the shopper picked on a card, each item's own in the cart                                               |
| `{inventory}`               | How many of the selected variant are left, when Shopify tracks its inventory                                                                     |
| `{savings}`                 | How much the compare-at price saves, like `25%`                                                                                                  |
| `{addon.label}`             | The **Short label** of each add-on on the product (build your own bundles)                                                                       |
| `{metafield.namespace.key}` | A metafield's value inside your own words, like `{metafield.custom.calories} kcal`. For the value on its own, **Add metafield** picks it for you |

The bundle's own spots (the bundle cart's, and **Above the total** on multi-option bundles) use cart variables instead:

| Variable      | Shows                                                                    |
| ------------- | ------------------------------------------------------------------------ |
| `{count}`     | How many items are in the bundle                                         |
| `{total}`     | The bundle's total, after its discount, add-on charges included          |
| `{saved}`     | How much the discount saves                                              |
| `{remaining}` | What's left to the next discount: items or an amount, as the tiers count |
| `{next}`      | The next discount, like `10% OFF`                                        |

`Add {remaining} more for {next} · You save {saved}` reads "Add 2 more for 10% OFF · You save $2.00", and once the top discount is reached only "You save $4.00" is left.

{% hint style="info" %}
**Each part of a line hides on a product where its data is empty.** Parts are split by a separator with spaces around it (`·`, `|`, `/`, `-`), a comma, or the space between two variables. `By {vendor} · SKU {sku}` reads `SKU RB-12` on a product without a vendor, so a shopper never sees a lone "By", and a line with nothing left hides. Plain text with no data, like `Free shipping`, always shows.
{% endhint %}

**Lists repeat the line.** A list metafield such as `Vegan, Gluten free`, or a product with several add-on labels, repeats the line once per value: two badges in a badge spot, two values on the line in a **Lines** spot (joined with " · "), or in a **Text block** (joined with ", ").

There is no **Show SKU** switch. To show each item's SKU in the bundle cart, add a text with `{sku}` to the cart's **Under the item name** spot. For quick view, add it to one of its spots, such as **Under the title**.

## Show a line only when stock is low

Turn on **Only when stock is low** in a line's settings, then set **Show while stock is at most** (it starts at 5). The line shows only while the selected variant has between 1 and that many left. `Only {inventory} left` at 5 reads "Only 3 left" on a variant with 3 in stock, and shows nothing on one with 40, one that's sold out, or one whose inventory Shopify doesn't track.

## Show only some tags

Stores often keep tags for their own use, like `sale-2024` or an app's tag. In a line that uses `{tags}`, set **Tags to show**:

* **Only these**: pick the tags meant for shoppers. A product shows the picked tags it has, and the line hides on a product with none of them.
* **All except these**: pick the tags to hide. A product shows every other tag, and the line hides on a product that has only these.

Click a tag under the search to pick it, and click a picked tag to remove it. With more than 8 tags on your products, type in the search to find the rest. With nothing picked, every tag shows.

{% hint style="info" %}
Tags need a permission added to the app in October 2026. If they don't show on your store, open the app once and approve the updated permissions.
{% endhint %}

## Announce add-ons on the card

Give an add-on a **Short label** ("Personalise") in [Offer → Add-ons](/create-bundles/build-your-own-bundle.md#offer-tab-add-ons), then add a text with `{addon.label}` to a badge spot such as **Badges, top left**. Only products the add-on applies to show the badge. The add-on's own fields always show in quick view, under the variant picker.

## Show review stars from Judge.me or another reviews app

Reviews apps such as Judge.me write each product's average rating and review count to Shopify's standard metafields **Product rating** (`reviews.rating`) and **Product rating count** (`reviews.rating_count`). A spot can show both, with no app key or extra setup:

{% stepper %}
{% step %}
Hover a product card in the preview and click the **+** at **Under the title** (or a quick view or cart spot).
{% endstep %}

{% step %}
Choose **Add text** and type `{metafield.reviews.rating} ({metafield.reviews.rating_count})`.
{% endstep %}

{% step %}
Save. Each card shows its stars, filled to its rating, then its review count: ★★★★½ (128).
{% endstep %}
{% endstepper %}

A product with no reviews yet shows nothing there. For stars alone, **Add metafield** and pick **Product rating**.

{% hint style="info" %}
**Product rating isn't in the Metafield list?** Your reviews app hasn't written ratings to Shopify yet: check its settings or ask its support. If it shows **(no Storefront access)**, see [Metafields need Storefront access](#metafields-need-storefront-access).
{% endhint %}

## Restyle a spot with custom CSS

Each spot has a fixed look, but **Settings → Custom CSS** can change it. Every spot carries its own class, each value in it is its own element, and each value carries `data-value`, so you can turn a list into pills or give one value its own colour.

| Spot on the product card | Class                      |
| ------------------------ | -------------------------- |
| Badges, top left         | `eb_data-cardImageTopLeft` |
| Badges, bottom left      | `eb_data-cardImage`        |
| Above the title          | `eb_data-cardAboveTitle`   |
| Under the title          | `eb_data-cardBelowTitle`   |
| Under the price          | `eb_data-cardBelowPrice`   |
| Notes under the price    | `eb_data-cardBlock`        |
| Above the add button     | `eb_data-cardAboveAdd`     |

Every other spot has one too: find it with your browser's **Inspect**. Inside a spot, a badge is `.eb_badge`, a value on a line or in a text block is `.eb_val`, and the " · " or ", " between two values is `.eb_sep`.

```css
/* A list metafield under the title as outlined pills */
.eb_data-cardBelowTitle .eb_sep { display: none; }
.eb_data-cardBelowTitle .eb_val {
  display: inline-block;
  margin: 4px 4px 0 0;
  padding: 2px 8px;
  border: 1px solid #ccc;
  border-radius: 99px;
}

/* One colour per value, in a badge or on a line */
.eb_badge[data-value="Women"] { background: #000; color: #fff; }
.eb_val[data-value="Woody"] { border-color: #8a5a2b; }

/* "Save {savings}" under the price as a green tag */
.eb_data-cardBelowPrice {
  width: max-content;
  padding: 2px 6px;
  border-radius: 4px;
  background: #3a9d5d;
  color: #fff;
}
```

A metafield drawn as a picture has its own class: stars are `.eb_mf-stars`, a colour dot `.eb_mf-swatch` and a file's image `.eb_mf-img`. Stars take your bundle's brand colour; set `--eb-star` for another:

```css
/* Gold stars, and bigger file icons */
.eb_mf-stars { --eb-star: #f5a623; }
.eb_mf-img { height: 32px; }
```

Custom CSS applies to every bundle in your store. To style one bundle alone, start the rule with its selector, `[data-eb-bundle="…"]` with the bundle's product ID. **Settings → Custom CSS** shows it, ready to copy, under **Only this bundle**:

```css
[data-eb-bundle="10524819128603"] .eb_data-cardBelowPrice { background: #000; }
```

{% hint style="info" %}
`data-value` is the text the shopper sees, so match it as written in Shopify, in each language you sell in. The editor preview applies your custom CSS as you type it, except rules inside `@media`, which follow your screen's width rather than the mobile preview's: check those on your store.
{% endhint %}

## How each metafield type shows

A metafield shows the way its type reads, with nothing to set:

| Type                                               | Shows                                                                                                                                                                                                                                                             |
| -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Single- and multi-line text, integer, decimal, URL | The value as stored in Shopify. Put a number's unit in the line's text: `{metafield.custom.calories} kcal`                                                                                                                                                        |
| True or false                                      | Nothing itself: the words around it show only while it's true. `Vegan {metafield.custom.vegan}` reads "Vegan" on vegan products and hides on the rest. Picking one under **Add metafield** writes this line for you, led by the metafield's name, ready to reword |
| Rating                                             | Stars, filled to the rating, on any scale                                                                                                                                                                                                                         |
| Colour                                             | A dot in that colour                                                                                                                                                                                                                                              |
| Date, date and time                                | The date in the shopper's language, like "Feb 2, 2022"                                                                                                                                                                                                            |
| Money                                              | The amount in its own currency, like "CA$5.99". It isn't converted to the shopper's currency                                                                                                                                                                      |
| Weight, volume, dimension                          | The value with its unit, like "250 g" or "30 cm"                                                                                                                                                                                                                  |
| Rich text                                          | Its words, as one paragraph                                                                                                                                                                                                                                       |
| Link                                               | Its text                                                                                                                                                                                                                                                          |
| File                                               | The image, as a small icon. A file that isn't an image (a PDF) shows nothing                                                                                                                                                                                      |

Lists of any of these show one value each (see **Lists repeat the line** above). JSON, product and metaobject references don't appear when you **Add metafield**.

## Metafields need Storefront access

{% hint style="warning" %}
**The metafield's definition needs Storefront access**, or shoppers see nothing. The **Metafield** list marks a metafield without it **(no Storefront access)**, and a line that uses one shows a note. In Shopify go to **Settings → Metafields and metaobjects → Products**, open the definition and select **Storefronts**.

Metafields that other apps created without a definition ("unstructured") don't appear in the list. On the same Shopify page choose **View unstructured metafields → Add definition**, select **Storefronts**, and the metafield becomes available.
{% endhint %}

## Translate the text

Each text's box has its own **Translate** button. Keep the `{variables}` in each translation: the editor warns when one is missing. The data itself, such as the vendor or a metafield's text, shows as stored in Shopify; dates and amounts follow the shopper's language.