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:

Name

namespace

Value

your_custom_namespace

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:

Name

metafield

Value

your_metafield_key

For example in this case, the key is subtitle

so the attribute would be:

Name

metafield

Value

subtitle

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:

Name

variant-metafield

Value

your_metafield_key

For example in this case, the key is subtitle

so the attribute would be:

Name

variant-metafield

Value

subtitle

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:

Name

separator

Value

separator you want to use

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

Color

Can be used on any element, it will set a style css variable with the value of the metafield.

By default the style variable will be --metafield-color. You can modify the variable property by adding a custom attribute

Name

property

Value

--variable-you-wish-to-set

For example if the element you wish to modify is connected to the css variable --my-background-color you should set the attribute

Name

property

Value

--my-background-color

Boolean

Can be used on any element and will show it only and exclusively if the metafield is set as true

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

Name

metaobject

Value

field_key

in order to render that specific metaobject field

Metafield visibility

If you wish to show part of your design based on if a product/variant metafield is set you can use the following attributes

Show If

If you want to show elements only if a metafield is set

For product metafields you can use

Name

if-metafield

Value

field_key

For variant metafields you can use

Name

if-variant-metafield

Value

field_key

Hide If

If you want to hide elements if a metafield is set

For product metafields you can use

Name

unless-metafield

Value

field_key

For variant metafields you can use

Name

unless-variant-metafield

Value

field_key