Metafields

Extending your Customer Account's Data

Shopify metafields are a powerful feature that allows you to store custom data associated with your products, variants, collections, customers, orders, and more. They provide a flexible way to add information beyond the standard fields provided by Shopify.

What are Metafields?

Metafields are essentially custom fields that you can create and attach to various Shopify resources. They allow you to store data that's specific to your business and products, enabling you to:

  • Add detailed product specifications: Store information like material, dimensions, or technical details that aren't available in standard product fields.
  • Enhance product filtering and search: Use metafields to create custom filters and improve search functionality.
  • Personalize customer experiences: Store customer preferences or loyalty program information.
  • Manage complex product variations: Store specific data for each variant, such as size charts or care instructions.
  • Create dynamic content: Display metafield data on your storefront using Liquid or the Storefront API.
  • Integrate with third-party apps: Share custom data with other apps and services.

Key Concepts

  • Namespace: A namespace is a container for your metafields. It helps organize your metafields and prevent naming conflicts with other apps or custom code. For example, custom.product_details.
  • Key: The key is a unique identifier for your metafield within its namespace. For example, material or size.
  • Value: The value is the actual data stored in your metafield. It can be text, numbers, dates, booleans, or JSON objects.
  • Type: The type defines the format of the value. Common types include:
    • string: Text data.
    • integer: Whole numbers.
    • decimal: Numbers with decimal places.
    • boolean: True or false values.
    • date: Date values.
    • date_time: Date and time values.
    • json: JSON objects.
    • file_reference: References to files stored in Shopify's Files section.
    • product_reference: References to Shopify products.
    • variant_reference: references to shopify variants.

How to create Metafields

You can create metafields in the Shopify admin panel, from Settings > Custom Data > Metafields When creating a metafield, you'll need to specify the namespace, key, value type, and optionally a description. Be sure to set the metafield as Visible on storefront, there is a checkbox that you must select at the end of the metafield creation page.

key_casing

Avoid changing the casing of the key that Shopify uses by default. Leave it as snake_case otherwise it will not be neither usable in the store and neither it can be imported into Webflow if necessary

Avoid special chars

Avoid using special chars and non utf-8 chars inside metafields labels otherwise matching could fail

How to render metafields inside Webflow

Without needing any import you can render all your metafields directly on static elements of Webflow. You just need to add the Custom Attribute:

Name
customer-metafield
Value
key_of_your_metafield

So for example if you created a metafield with Namespace and Key: custom.my_field you have to add the attribute

Name
customer-metafield
Value
my_field

You can also render metafields outside of the custom namespace, by adding an additional attribute

Name
namespace
Value
namespace_of_the_field

So for example if you created a metafield with Namespace and Key: global.my_field you have to add the attributes

Name
customer-metafield
Value
my_field
Name
namespace
Value
global

You do not need to specify the type of the metafield. Smootify scripts are smart enough to understand the context of your element and how to render them.

Supported Metafields

Shopify TypeWebflow ElementsInfo
Single Line Text
Any text element
Will output the text of the metafield
Multi Line Text
Any text element
Will output the text of the metafield
Integer Number
Any text element
Will output the number of the metafield
Double Number
Any text element
Will output the number of the metafield, the number of digits to output can be customized with the attribute
Name
data-digits
Value
2
URL
Any link element
Will output the selected link
File / Generic File
Any link element
If you select generic file you can output the link of it
File / Image File
Any link, image and div element
If you use it on a link element the link to the image will be rendered, while on all other elements you will see the image or the background image
File / Video File
Any div element
Will output a video player of the file
Date / Date Time
Any text element
Will output the date / date time in the current browser format
Dimension / Volume / Weight
Any text element
Will output the selected value
Money
Any text element
Will output the money using the shopify currency format
True or False
Any element
Will hide/show the element based on that value
List of Single Line Text
Any text element
Will show all texts concatenated by a comma.
You can change the separator by using the attribute
Name
separator
Value
,
If you use the attribute
Name
separator
Value
repeat
the element itself will be repeated
List of File / Generic File
Any link element
The link element will be duplicated once for each file, the text content of the link will be the "alt" of the file and the link will be connected to the file link
List of File / Image File
Any image element
The image element will be duplicated once for each file
Metaobjects / List of Metaobjects
Any Div Element
The div element you use will be duplicate once for each metaobject inserted in the metafield and inside the metaobject context you created you have to use
Name
metaobject
Value
key
on any element you want to connect to your metaobject

Only for metafields of type Single Line Text you can use an additional attribute:

Name
data-attr
Value
attribute-to-modify

This will ask Smootify to output the value inside the attribute explained in the attribute instead of setting the value as the text of the element.

E.g:

Name
data-attr
Value
data-id

Will set the value of the metafield in the attribute data-id of the element.

Metafields Visibility

Learn how to show or hide elements based on whether a metafield exists and what its value is.

To control visibility of an element you have principally 2 custom attributes to use:

Name
if-customer-metafield
Value
metafield_key

This attribute will show the element if the metafield exists with 2 exceptions:

  1. In the case you used a metafield of type True / False it will be shown if the metafield is set and is set as True;

  2. In the case of metafields of type Integer Number, the element will be shown if the metafield is set and the value is higher than 0;

The second custom attribute is:

Name
unless-customer-metafield
Value
metafield_key

This attribute will act in the opposite way of the first one, so the element will show only if the metafield doesn't exists.

Check for Value

By default metafields visibility attributes will just check for the existence of the metafield. If you wish instead to check for the value that is inside the metafield add also the attribute:

Name
data-check-value
Value
Desired Value

For example if you created a metafield of type Single Line Text with key my_option and you want to show an element only when the metafield value is for example Option 1.

You have to use the custom attributes:

Name
if-customer-metafield
Value
my_option
Name
data-check-value
Value
Option 1

Previous

Conditional Visibility

Next

Order Listing

On this page