Metafields
Metafields help you to customize the functionality and appearance of your Shopify store by letting you save specialized information that isn’t usually captured in the Shopify admin. You can use metafields for internal tracking, or to display specialized information on your online store in a variety of ways. For example, a candle seller might want to display a burn time for candles on their product pages, whereas a grocery store might want to display a product expiration date for canned goods.
Learn more how to use metafields in Shopify by following the official guide
Using metafields in Webflow is pretty simple, Metafields are defined by 3 elements: key, namespace and type.
Namespace and Key
Those are the unique identifier for your metafield. You can use a namespace to group similar metafields together, but each namespace and key must be unique. An example is custom.color.
By default when you create a metafield definition Shopify uses “custom” as namespace, and by default is assumed as custom as well by Smootify but can be changed using the custom attribute:
Type
The type is automatically inferred by Smootify and applied automatically without needing to be explicitely defined.
Product Metafields
Smootify supports loading of product metafields inside the Product Wrapper element, you just need to select a static element of your Webflow design and add the attribute:
For example in this case, the key is subtitle
so the attribute would be:
Variant Metafields
Smootify supports loading of variant metafields inside the Product Wrapper element, you just need to select a static element of your Webflow design and add the attribute:
For example in this case, the key is subtitle
so the attribute would be:
The values will change on variant change automatically!
Supported metafield types for product and variants
Smootify supports these metafield types for the moment:
Text type of fields
The following types can all be used on text elements
- Single Line Text field
- Multi Line Text field
- Integer
- Decimal
- Dimension
- Money
- Volume
- Weight
List of Single Line text
This field type will show up a concatenated version of the texts separated by ”, ”.
E.g:
would be rendered as List item 1, List item 2, List item 3.
You can also change up the separator by using the attribute:
Date / Date Time
Can be used on any text element and will display dates using local browser format;
Url
Can be used on any link element and will change the href attribute automatically;
File Reference
Can be used on image elements to show up images, on div elements to show up background images or video players, and on links to create download links
List of File Reference
As the previous type it can be used on image elements to show up images, on div elements to show up background images or video players, and on links to create download links, with the only difference that the element with that attribute on will be duplicated once for each file inside the metafield
Metaobjects Reference / Multireference
It can be used on any div element, the div element will be rendered / duplicated only and exclusively if the metafield is set inside the product element. Inside this div you have to use attributes like
in order to render that specific metaobject field