Customer Fields stores custom data in two places; the app's database and Shopify’s Metafields. 

When a customer record is saved, and the data being saved contains values for custom data columns, then the app will store metafield data on the Customer resource/object in Shopify. The app's metafields use customer_fields as the namespace, and data as the key. This metafield data is accessible via the Shopify API, or on the front-end using Liquid.

The latest version of Customer Fields saves all of the metafield data in a single JSON string. The value of the string contains the app's data column keys and respective data column values. Please note that metafields are only used for custom fields; the data for standard fields is saved to the normal places within Shopify.

Liquid output

By editing the store's theme code or Shopify's email notification templates, you can display custom data collected by Customer Fields.

To display custom data on the storefront or in email notifications, you will need to use the following syntax:
{{ customer.metafields.customer_fields.data["DATA COLUMN KEY"] }}  
(Note: You'll need to replace DATA COLUMN KEY with the actual data column key you wish to use)

Since each data column in Customer Fields has its own specific 'type', you can apply data-specific filters to format the data, or even scope out certain data attributes. We've provided some specific examples of how to display metafields data below:

Specific examples

Display value for a 'text' data column with the key of pet_name:

Your pet's name: {{ customer.metafields.customer_fields.data["pet_name"] }}

<!-- Outputs:
Your pet's name: Franklin

Display value for a 'date' data column, using a Liquid date filter to control the format:

Your Birthday: {{ customer.metafields.customer_fields.data["birthday"] | date: "%b %d, %Y" }}

<!-- Outputs:
Your Birthday: February 6, 1945

Display value for 'file' data column, using just the URL attribute to embed an image:

Profile pic: <img src="{{ customer.metafields.customer_fields.data["profile_pic"].url }}" style="max-width: 150px;">

<!-- Outputs:
Profile pic: (image with 150px max width)

Looking for more technical details? 🤓

Learn more about metafields using our Developer Documentation.

Did this answer your question?