Product data
Show the SKU, vendor, stock left, savings, add-on labels or metafields 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 text, number, date, URL or colour metafield. 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.
Add data to a spot
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.
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.
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 its value.
The preview follows as you type or pick.
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.
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 +.
Where the spots are
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.
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
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.
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 freeText block: a paragraph per line, with line breaks kept
Variables you can use
Type these in a text, around your own words:
{vendor}
The product's vendor
{type}
The product's type
{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:
{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.
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.
Announce add-ons on the card
Give an add-on a Short label ("Personalise") in Offer → 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.
Metafields need Storefront access
Supported types: text, number, date, URL and colour metafields. That is single- and multi-line text, integer, decimal, date, URL and colour, plus lists of any of these. Other types don't appear when you Add metafield: true/false, rich text, JSON, money, weight, volume, dimension, rating, date and time, and references. Values show as stored in Shopify; for a number, put its unit in the line's text: {metafield.custom.calories} kcal.
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 → Custom data → Products, open the definition and turn on Storefront access.
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, turn on Storefront access, and the metafield becomes available.
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 value, shows as stored in Shopify.
Last updated
Was this helpful?