A custom field you add to a Shopify resource, such as a product, a variant, a collection or a customer, to keep information Shopify has no field for.
Shopify gives a product a title, a description, a price and a few more fields. Everything else a store needs, such as the material, the care instructions, a size chart or the products that go well together, goes into metafields.
A metafield has:
- a namespace and a key, such as
custom.material, that name it; - a type, such as single line text, number, date, color, file, rating, JSON, a reference to a product or a metaobject, or a list of any of these;
- a definition, in Shopify under Settings › Custom data, which gives every product the same field in the admin.
A headless storefront can read a metafield only when its definition has Storefront access turned on.
1 Settings › Custom data › Products › Add definition
custom.materialWithout Storefronts access, the value never reaches the page.
2 Products › Linen shirt › Metafields
custom.materialLinenreviews.rating4.5 out of 5The rating is written by a review app, in its own namespace: reviews.
3 In Webflow, inside smootify-product
Smootify reads custom unless the element has namespace.
In Webflow terms
A metafield is the Shopify twin of a custom field in a Webflow CMS collection. Smootify reads it live from Shopify, and the CMS sync can also copy it into a field of your Products collection, to bind it in the Designer like any other field.
In Smootify
An attribute shows a metafield on the page: metafield="material" inside smootify-product shows custom.material, and variant-metafield, customer-metafield and company-metafield do the same for variants, customers and companies. Every type renders, lists and references included. A metafield that holds products can also fill a list of product cards.
More in Metafields and the metafield types.