logo
Shopify Builds>Primitives>Metafields

Metafields

Definition

Metafields are typed custom fields Shopify attaches to its own resources — products, variants, collections, pages, articles, customers, the shop itself. Each one has a namespace, a key and a declared type, and merchants edit them in the admin like any other field. They extend the data model without changing it, and themes and APIs read them wherever the parent resource is available.

Documented at https://shopify.dev/docs/apps/build/metafields.

How we've used it

Metafields are the seam between merchandising and code. The recurring move: anything that varies per product, per variant or per collection comes out of Liquid and goes into a namespaced field, so a launch is an admin task instead of a deploy. Product pages read them for tab copy, ingredient lists, badge rules, breadcrumb trails and a per-product accent color. A collection banner reads its headline and artwork from the collection itself, so one section instance serves the whole catalog. Variant-level fields carry the copy, SEO and swatch data that has to swap the instant a shopper picks a shade. The section keeps layout and fallbacks; the field owns what it says.

Builds using it

47 further gated builds use it; their pages follow.

Related entities

Metaobjects · Dynamic sources · Liquid section schema and settings · Theme blocks

Builds

Alt-text driven variant media gallery with tiered matching and full-screen lightbox

The product gallery that consumes the alt-text match tiers: it builds the main slider, the thumbnail rail and a full-screen lightbox out of server-side verdicts, then re-filters the same nodes in the browser when the shopper changes variant.

LUS Brands

A collection template turned into a palette builder that carts one priced SKU

A pick-your-own palette promotion runs on a normal collection page wrapped in a `<bundle-element>` custom element, which holds a fixed tray of empty slots and posts one priced bundle product with the shopper's picks attached as line-item properties.

Nudestix

'Bundle and save' PDP block driven by a product-list metafield

One product-list metafield, one card per product, and on every card a working add-to-cart form of its own — a merchandiser-curated set sold on the product page where the shopper already is, with a carousel that only appears when there is more than one thing to scroll.

LUS Brands

A second product template whose add-to-bag switches between one cart line and several

`main-product-bundle.liquid` is a fork of the theme's product section in which one Liquid conditional wraps the buy form in either a standard `<product-form>` or a `<bundle-product-form>`, depending on which bundle metafield the product carries.

Nudestix

Product-card hover video and a reusable deferred-media playback refactor

The shared product card's hover slot can hold a short clip instead of a second still: a per-product metafield decides which, the card emits a video that fetches nothing until asked, and a pointer-only, motion-aware binder plays it on hover of the whole card — plus a refactor of Dawn's deferred-media element that handles every player kind through one function.

LUS Brands

Cart page rebuilt around loyalty points, protected gifts and a dark order summary

Dawn's single-table cart section rewritten as a two-column page: per-line loyalty points computed in Liquid, gift lines a shopper can't edit away, bundle lines that link back to the builder that made them, and a summary panel that survives every re-render.

Nudestix

Creator collab video listing driven by article metafields

A blog turned into a creator video index: each article is a creator record whose video address, platform and handle live in article metafields, rendered as a paginated grid of inline-playing cards that request no third-party iframe until someone presses play.

Nudestix

Collection grid card on a licensed theme: metafield merchandising, a badge precedence chain, a hover-swap swatch element and first-row loading hints

Palo Alto's grid item extended so the card's title, strapline, cutline and badge come from product metafields, badges resolve in one fixed order, color options become a swatch element that swaps the card image on hover, and column classes are computed from whatever section happens to be calling.

Three Ships

Collapsible desktop filter sidebar that reflows the product grid instead of squeezing it

Toggling the vertical filter rail switches the collection grid between four columns and three, keeps that choice for the browsing session, and re-applies it every time the facet pipeline replaces the grid wholesale.

LUS Brands

Main collection grid: merchandisable promo tiles, load-more and a filter blocklist

Dawn's collection grid extended in four directions: promo tiles a merchandiser places by grid position, a textarea that suppresses unwanted filter values, load-more over the Section Rendering API, and an infinite-scroll fallback.

Nudestix

Tabbed collection product slider and the shared merchandising card

One section renders every configured collection at once and switches between them with a class, so moving from Serums to Cleansers waits on nothing — and one card snippet backs the shelf, the blog and the rewards page.

Three Ships

Merchandisable homepage product carousel with a tag-driven badge engine and inline add-to-bag

A two-column row — optional linked lifestyle image, Swiper rail — where every label, color, badge and product is a theme-editor setting, and each card can add to bag without leaving the page.

LUS Brands

Kids FAQ page: single-level variant of the FAQ engine

A second FAQ page for the kids sub-brand that shares the help center's content model — the same page metafield, the same accordion contract — but drops the category layer, so a shorter list of questions reads as one flat, keyboard-operable accordion with its own tone and its own way out.

LUS Brands

Featured-collection product card with metafield hero/hover media and a tag-driven badge stack

The card that renders inside the homepage's main merchandising rail: hero and hover art chosen in the Shopify admin, a responsive image ladder built by hand, and a badge stack resolved from tags, price and block settings at render time.

LUS Brands

Metafield-driven two-level FAQ accordion grafted into a help-center app's shell

The help-center page kept the app's shell. The answers inside it moved into a Shopify page metafield, and a two-level accordion we wrote renders them — deep-linkable, keyboard-operable and reusable elsewhere in the theme.

LUS Brands

Four selectable How-To step layouts from a single metaobject step list

One list of `how_to_use` step metaobjects renders as a card grid, a slider, a numbered timeline or an image-and-text split, chosen per product, with a desktop and a mobile asset per step and video that plays only while in view.

LUS Brands

A-Z ingredient glossary with scroll-spy letter navigation and product cross-sell

An ingredient encyclopedia authored as theme-editor blocks across 14 section instances on one page template, joined to a sticky letter bar by a single shared attribute, with every entry an accordion that links out to the products it appears in — education page as cross-sell surface.

Three Ships

Metafield-driven breadcrumbs across product, collection, page, blog and article

One breadcrumb snippet whose ancestor trail is authored per product and per collection through a `custom.breadcrumbs` collection-list metafield, with a three-level fallback for products and natural trails for pages, blogs and articles — rendered as a real navigation landmark from a single argument-free `{% render %}`.

LUS Brands

Per-collection hero banner driven entirely by collection metafields

One section instance in the collection template serves every collection: its heading, copy and two separately cropped artworks are bound to collection metafields through dynamic sources, and it renders two independent breakpoint layouts from them, so launching a collection is a merchandising task rather than a theme edit.

LUS Brands

Tabbed mobile Shop menu with featured banner panel

A custom `<shop-tabs>` element turns the drawer's first-level Shop menu into horizontal tabs with panels of category links, merges a theme-editor banner block into the tab order by position, and leaves every other drawer item on the vendor's accordion.

Three Ships

Rebuilt 2026 PDP section with merchandiser-composable blocks and per-product ATC color

A custom product section for LUS Brands that declares 26 block types beyond Dawn's set, resolves title and subtitle copy per variant, and paints the add-to-cart button from a product metafield.

LUS Brands

Configurable PDP block system on the Palo Alto theme (Recharge widget placement, size charts, siblings, quick view)

Merchandiser-orderable buy-box blocks on Three Ships' licensed theme, with the subscription app block captured and re-emitted inside the buy box, plus metafield-driven size charts, a product-family switcher and a sticky add-to-cart bar.

Three Ships

"Save With Sets": shade-selectable kit contents on the component product's page

A metafield-linked list of kits renders as an accordion on the product pages of the products inside them, and each kit opens a modal where every component gets its own shade picker before a single add-to-bag.

Nudestix

Variant-aware PDP hero banner driven by a 'heroic' metaobject

An editorial hero below the buy box that resolves its art, headline and copy from a per-variant metaobject, and refetches its own content through the Section Rendering API when the shopper switches variant.

LUS Brands

Metafield-driven PDP content system: auto-built accordions, need-to-know strip and campaign widgets

A layered content resolver on the Nudestix product page: legacy description HTML parsed into accordions at render time, three of them overridden per shade from metafields, with icon strips, badges and campaign widgets assembled from 29 metafield keys around them.

Nudestix

On-model shade carousel bound two ways to the Dawn variant picker

A Flickity carousel of one on-model shot per shade, rendered below the product gallery from a variant metafield; each cell carries the id of its Dawn variant radio, a tap on a face resolves to a click on that radio, a click on a radio moves the carousel — and the carousel itself never touches the product form.

Nudestix

Grouped shade swatch picker with shade-finder dialog and GA4 shade-finder events

Finish became a variant metafield instead of a second product option, which is what lets forty shades group into Matte, Matte Lux and Bloom without touching the SKU matrix — and the shade quiz beside them is bought, wrapped in a native dialog and measured on our side of the boundary.

Nudestix

Price snippet with a bundle 'value' metafield line and opt-out labelled price links

Dawn's price snippet on Nudestix, extended in two small ways: a product metafield adds a "worth" line beside a kit's price, and the price text becomes a labelled link to the product unless the caller says otherwise.

Nudestix

Product card with award badges, per-variant content payload and per-card structured data

One snippet renders the whole Nudestix grid card: tag and award badges, quick view, wishlist, comparison, an in-grid add to bag, and a per-variant data payload the shade switcher reads without a fetch.

Nudestix

Side-by-side product comparison drawer and modal table

A compare-products flow with no app behind it: card checkboxes write the selection to localStorage, a drawer pinned to the bottom of the viewport carries it from collection to product page and back, and the modal table fetches each product's long-form copy from that product's own page section at the moment the shopper asks to compare.

Nudestix

Metafield-driven product information tabs with mobile accordion and variant refresh

How To, Ingredients, FAQs and Tips render below the buy box from metafields — as tabs on desktop, as a native accordion on mobile, and re-resolved from the server every time a shopper picks a different variant.

LUS Brands

Color-accurate shade swatches driven by a merchandiser-editable hex registry

Roughly 250 `Shade Name:#hex` pairs live in one theme setting. The product section resolves every option value against them in Liquid, groups the results by finish, and paints each swatch server-side.

Nudestix

Subscription bundle grid with tiered unlock progress

Two custom elements on the subscription landing page: a card whose two-step button reveals a frequency choice and then posts the variant with that `selling_plan` to the cart, and a wrapper that fetches the live cart after every add and drives a merchandiser-defined tier bar from what it finds there.

Three Ships

Metafield-driven editorial article template (TSB blog)

A long-form article template assembled entirely from article metafields — deck, takeaways, science callouts, references, FAQ, author credentials, related reading and in-content commerce — in a single section with no theme-editor settings, so an editor never touches the theme to publish a fully structured post.

Three Ships

Variant-aware price snippet with percentage + value savings badge

Dawn's price snippet extended so a caller can hand it any variant object ahead of the snippet's own lookup, and so a savings badge — a percentage computed in Liquid plus a merchandiser-written value sentence — renders whenever the compare-at price is higher than the price.

LUS Brands

Shade swatch rendering and per-variant content payload

The swatches are the visible half. The other half is a hidden input per variant carrying that shade's copy, ingredients, SEO fields and badges — a data contract three separate features read without asking the server anything.

Nudestix

Shade-level collection grid hydrated from an external faceting service

A Shopify collection template that lists shades instead of products: the section renders an empty grid shell, then builds every card, facet and count in the browser from a bespoke faceting service outside the theme.

Nudestix

Pill variant picker with merchandiser-named size labels

Dawn prints an option value and nothing else. We extended its picker so a size pill carries two lines — a merchandiser's word for that size above the size itself — and falls back to positional defaults when nobody has written one.

LUS Brands