When the Klaviyo app for Shopify is installed on a store, Klaviyo will automatically sync all of the customers who have subscribed to the store's email newsletter, and any new subscribers will be automatically added to their system.

Although Customer Fields is not directly integrated with Klaviyo at the moment, you can use both apps together without any issues. This help article is meant to provide some tips and tricks to get the most value out of both apps.

Automatically import customers to a list in Klaviyo

Getting customer profiles into Klaviyo is the most important piece of the puzzle, and luckily this is handled automatically by the Klaviyo app for Shopify. Klaviyo's help center has lots of information on how their system integrates with Shopify (see docs here), but the main thing we'd like to point out is an integration setting inside of Klaviyo that allows you to automatically sync your Shopify customers to a specific list:

Note: Customer records in Shopify must have email_marketing_consent.state set to SUBSCRIBED or RESUBSCRIBED (also known as accepts_marketing set to TRUE). Klaviyo's app will not sync a customer profile unless the customer has given marketing consent.

'Email marketing consent' in Customer Fields

Customer Fields has a pre-built field type for 'Email marketing consent', which is found in the Standard fields section of the app's form builder:

When the email marketing consent field is added to a form, and a customer uses this field to give consent for email marketing, then the customer record will have 'Email marketing consent' set to the proper value. This value will be reflected in both Shopify and Customer Fields, and if the customer has given consent it will also be shown in Klaviyo.

Sync customer metafield data with Klaviyo

It's important to understand that Customer Fields saves all custom data into Shopify using customer metafields, and Klaviyo uses custom properties for additional customer data. With this in mind, you can easily push custom data from Customer Fields into Klaviyo by enabling Klaviyo's onsite JavaScript tracking and adding a small amount of code to your store's theme.

💡 Pro-tip: This frontend approach is great for use cases where you want to sync custom data whenever a customer is logged in on the storefront. If you have a use case that requires syncing data on the backend instead, then we suggest connecting Customer Fields to Klaviyo using our Zapier integration (learn more here).

Enable onsite JavaScript tracking

Follow these steps to enable Klaviyo's onsite JavaScript tracking on the storefront:

If you haven't already, install the Klaviyo app for Shopify on the store in question
Open up the theme editor in Shopify, and enable Klaviyo's app embed (named "Klaviyo Onsite Javascript")
Save your changes and exit the theme editor

Add tracking code to theme

Once Klaviyo's app embed has been enabled, you can use Klaviyo's frontend Javascript object to push data into custom properties. The steps below explain how to accomplish this using a small amount of Liquid and JavaScript:

Step 1:

Open up the theme code editor in Shopify and create a new snippet named something like klaviyo-identify-cf.liquid

Step 2:

Add the following code to the snippet:

{% if customer %}
  <script>
    window.addEventListener("load", (event) => {
      klaviyo.push(['identify', {
        $email: '{{ customer.email }}',
          // Add customer metafield(s) here        
          'DATA COLUMN LABEL': '{{ customer.metafields.NAMESPACE.DATA_COLUMN_KEY.value }}'
        },
      ]);
    });
  </script>
{% endif %}

Step 3:

Swap out the placeholders in the code from Step 2 with your desired data column labels, and namespaces and keys.

The example below shows what this would look like when syncing three custom data columns using the app's default namespace app--960624--helium and the keys favorite_color, birthday, and gender:

{% if customer %}
  <script>
    window.addEventListener("load", (event) => {
      klaviyo.push(['identify', {
        $email: '{{ customer.email }}',
          // Add customer metafield(s) here       
          'Favorite Color': '{{ customer.metafields.app--960624--helium.favorite_color.value }}',
'Birthday': '{{ customer.metafields.app--960624--helium.birthday.value }}', 'Gender': '{{ customer.metafields.app--960624--helium.gender.value }}'
        },
      ]);
    });
  </script>
{% endif %}

Step 4:

Globally render the new snippet in the store's theme.

For most themes, this is possible by editing layout/theme.liquid and adding the following code before the closing HTML head tag (be sure to reference the snippet name you defined in Step 1):

{%  render 'klaviyo-identify-cf' %}

Step 5:

Save your changes in the code editor, and then test to make sure all is working as expected.

The code provided in this help article is designed to run whenever a customer is logged in to their account on the storefront, so to properly test you'll need to act like a customer who is using the Online Store. We suggest using a Customer Fields form that has been installed somewhere on the store's theme to create or update a test customer record. When acting as a customer who is submitting a form, make sure to save a value for at least one of the custom data columns you specified in Step 3. After you submit and the data has been saved into Shopify, you should be able to find the custom data directly in Klaviyo:

Need help?

Have questions, concerns, or just need some help? Feel free to reach out to us via chat or email and we'll be happy to assist 👍