Guide to Integrating with Shopify

read
Last updated at:

Overview

Learn how to enable Klaviyo’s Shopify integration in order to bring your customer profile and order data into Klaviyo and reach customers with targeted messaging. This guide walks through collecting email and SMS subscribers, syncing your Shopify newsletter or signup form subscribers to a Klaviyo list, and adding Klaviyo tracking for customers and their viewed products to your Shopify store. 

 

Step by step walkthrough showing the Klaviyo integration with Shopify
 

Adding the Shopify Integration

There are two ways to get started with Klaviyo’s Shopify integration:

  • Add the Shopify integration from the Klaviyo Setup Wizard (if you’re a brand new customer)
  • Add the Shopify integration from the Integrations tab in Klaviyo 

The following instructions walk through adding the Shopify integration from the Integrations tab in your Klaviyo account.

In Klaviyo, navigate to the Integrations tab and search for Shopify. Then, click Add Integration to view the integration settings page.

Shopify’s listing on Klaviyo’s integrations page, with Add Integration

Shopify Settings

Here, we detail how to configure your Shopify settings in Klaviyo before connecting your account. If you ever want to update these settings, you can return to the integration settings page, make changes, and then click Update Settings.

Klaviyo's Shopify integration page, showing Store URL, Collect Subscribers, and Advanced Settings

Store URL

Paste the URL of your Shopify store in the box. Make sure that it is in the format mystore.shopify.com.

Klaviyo Onsite JavaScript

It’s recommended that you check the box to automatically add Klaviyo onsite JavaScript. Checking this box automatically adds Klaviyo's Active on Site tracking snippet. If you do not check this box, you can manually install Klaviyo's onsite JavaScript by following the steps in the Manually Add Onsite JavaScript section below.

Collect Email Subscribers

Check this box to automatically add all customers who accept email marketing at checkout, or sign up to your default Shopify signup form, to the list you select from the dropdown. It's important to add your Shopify subscribers automatically to your Klaviyo newsletter list in order to easily build a list of consented subscribers to send to. New newsletter subscribers will sync in real time through your Shopify integration. 

Whether or not a customer is subscribed to your newsletter does not directly correlate with Shopify’s Accepts Marketing property, which syncs to Klaviyo. In certain situations, someone may have Accepts Marketing set to false, but still be subscribed to your newsletter. These customers can still be emailed; for more information, read below about the accepts marketing property.

It is also important to note that if you use a Shopify third party theme, your theme's default signup forms must also apply the Newsletter tag to new subscribers in order for Klaviyo to automatically sync these subscribers to a Klaviyo list. Contact your theme developer, or if you're comfortable editing your theme's source code, add the following hidden input tag to your form's input group: <input type="hidden" name="contact[tags]" value="newsletter">

Collect SMS Subscribers

Check this box to automatically add all customers who accept SMS marketing at checkout to the list you select from the dropdown. Collecting SMS consent from customers during checkout allows you to drastically grow your SMS subscriber list. It is also a straightforward, non-intrusive way to gain consent. You will only be able to collect SMS consent from recipients in countries where Klaviyo SMS is available.

If you are also collecting email subscribers, assign a separate list to each channel. This ensures that consent is applied properly when subscribers sync into Klaviyo. For more information, read How to Collect SMS Consent at Checkout on Shopify

Sync Customer SMS Subscription Status to Shopify

While not required, we recommend checking this box. This setting will automatically backfill your SMS subscription data to Shopify and, in the future, sync this data from Klaviyo to Shopify whenever a Shopify customer subscribes or unsubscribes from SMS.

Update Shopify Customer Profiles with Klaviyo Data

This option will sync certain fields like first name, last name, email marketing, and more from Klaviyo to Shopify. Only select this option if you would like the Klaviyo values to overwrite the corresponding Shopify values. Read more about syncing Klaviyo data to Shopify.

For existing profiles in Klaviyo, we will start syncing those fields to Shopify the next time Shopify syncs any data about them to Klaviyo. This is because, for existing profiles, we need their Shopify ID in order to update their information in Shopify. Profiles that don't exist in Shopify but do exist in Klaviyo will not be synced back as a net-new profile. They will still need to perform an activity in your Shopify store that adds them to your Shopify account before Klaviyo will start syncing data.

After configuring your settings, click Connect to Shopify. This will take you to your Shopify account.

Installing the Klaviyo App in Shopify

After being brought into Shopify, review the permissions and click Install app. This begins syncing your Shopify data with Klaviyo and takes you back into your Klaviyo account.

Shopify’s Klaviyo app permissions page, with the data that Klaviyo will see, Install app, and Cancel

A green success callout will indicate that your data is syncing with Klaviyo.

When your sync finishes depends on the amount of data; see the section below on Monitoring the Historical Data Sync for more detailed information.

Your Shopify integration is now enabled.

How to Manually Add Onsite JavaScript

Klaviyo’s onsite JavaScript, known as Klaviyo.js or Active on Site tracking, tracks when customers visit your site. We recommend installing this snippet by checking the box labeled “Automatically add Klaviyo onsite JavaScript” on your Shopify Integration settings page in your Klaviyo account. To manually install this snippet instead, follow the instructions in our guide to manually installing klaviyo.js.

Testing the Onsite JavaScript

After integrating with Shopify and having Klaviyo’s onsite JavaScript added automatically, or after adding it manually, you can test that it’s working in your Klaviyo account. 

In Klaviyo, click the account dropdown in the upper right, and select Setup Web Tracking. This takes you to a page with Klaviyo's web tracking snippets.

Scroll down to Step 3, and enter the URL for your Shopify store into the box. Click Next.

Klaviyo’s web tracking page with box to test your URL, Next, and Waiting for data in a gray box

Click the link that is generated where you previously input your URL. This triggers an Active on Site event in your Klaviyo account.

Klaviyo’s web tracking page with test store URL and Data Received. Continue in a green box with an arrow

A green Data Received button confirms that your onsite tracking is set up correctly.

How to Add Viewed Product Tracking 

Because pasting this code requires access to your site's HTML and ecommerce platform, our support team is unable offer hands-on assistance. If you don't have a developer on your team and aren't comfortable adding the code yourself, consider reaching out to a Klaviyo partner for assistance.

Klaviyo’s Viewed Product snippet tracks when customers view specific products on your site, and it must be manually installed on your Shopify store. Instructions for installing this snippet are described below.

The Viewed Product snippet is:

<script type="text/javascript">
  var _learnq = _learnq || [];
  var item = {
    Name: {{ product.title|json }},
    ProductID: {{ product.id|json }},
    Categories: {{ product.collections|map:'title'|json }},
    ImageURL: "https:{{ product.featured_image.src|img_url:'grande' }}",
    URL: "{{ shop.secure_url }}{{ product.url }}",
    Brand: {{ product.vendor|json }},
    Price: {{ product.price|money|json }},
    CompareAtPrice: {{ product.compare_at_price_max|money|json }}
  };
  _learnq.push(['track', 'Viewed Product', item]);
  _learnq.push(['trackViewedItem', {
    Title: item.Name,
    ItemId: item.ProductID,
    Categories: item.Categories,
    ImageUrl: item.ImageURL,
    Url: item.URL,
    Metadata: {
      Brand: item.Brand,
      Price: item.Price,
      CompareAtPrice: item.CompareAtPrice
    }
  }]);
</script>

For Shopify 2.0 Themes

If your Shopify store uses a Shopify 2.0 theme, you’ll need to add the Viewed Product code snippet via a Custom Liquid block.

  1. In Shopify, navigate to your theme and click Customize
  2. At the top of the page, click the Home page dropdown, and select Products > Default product to be brought to your default product page. 
  3. Click Add section in the left sidebar, and then select Custom Liquid.
  4. Paste the snippet from the above section into the Custom Liquid text box.

    Shopify custom liquid block page with Klaviyo Viewed Product snippet pasted in text box

  5. Click Save in the upper right. 
  6. In the left bar, your new Custom Liquid block should automatically have been placed below the other sections on the page. 
    1. If it needs to be moved, hover over the block and click the six dots to drag it below your other sections. 
      Shopify product page section hierarchy with custom liquid option showing six gray dots, below product recommendations section which is below product information section

Viewed Product tracking has now been added to all your product pages.

For All Other Themes

The Viewed Product snippet will need to be pasted at the bottom of your product.liquid file. 

       1. From your Klaviyo account, click the account dropdown in the upper-right and select Setup Web Tracking. This takes you to a page with Klaviyo's web tracking snippets.

Klaviyo’s Shopify integration settings page, with account dropdown and Setup Web Tracking selected

       2. Beneath step 2, copy the code snippet. Alternatively, you can copy it from this article.

Klaviyo’s web tracking page with three steps including adding the web tracking JavaScript snippet and entering the URL of your Shopify store

       3. From your Shopify Admin click Online Store > Themes. From the dropdown, click Edit Code.

Shopify themes page showing espresso shot glasses on right bottom corner with Actions dropdown open and Edit Code selected

       4. Search for the product.liquid file. Click the file to open it in the editor.

Shopify’s Edit Theme page grayed out with the product.liquid file selected and highlighted

       5. Paste the second code snippet at the bottom of the file, after all the existing code, and click Save.

Shopify’s edit code page with the product.liquid file open, showing Klaviyo’s Viewed Product snippet amended to the bottom of the file

If you are using custom product pages, you may need to add this snippet to a different theme file, or to your individual custom product pages.

Monitoring the Historical Data Sync

When you first integrate with Shopify, Klaviyo will sync the last 90 days of your Shopify data so you can start engaging your most recent customers. After the sync of the last 90 days of data, Klaviyo will begin your complete historical data sync. Depending on how many orders, customers, and products your store has, it can take anywhere from a few minutes to several days to sync all of your data, and a green progress bar will show the progress of your sync.

Once this historical sync is complete, new data will sync to Klaviyo in real time. To check the progress of the initial sync, navigate to the Analytics tab and then click into Metrics. Find the Placed Order metric and change the date range of the graph to see which dates have been fully synced. When the sync is complete, the Shopify integration in the Integrations tab will be marked complete. To verify for yourself that all data from Shopify is synced, you can cross check the total orders for a few days or a week. Before you start validating, make sure your account's timezone matches the settings in Shopify.

To check or update your account's timezone, go to the Account Settings page (found by clicking your account dropdown, then clicking Account) and check the Contact Information > Organization section.

Klaviyo limits the number of unique metrics you can create to 200. When you approach this threshold, you will be alerted via a warning in your account, along with an email to the account owner.

About Signup Forms with Shopify

Klaviyo’s Shopify integration provides three options for syncing your signup forms to Klaviyo:

If you checked the box to automatically add Klaviyo onsite JavaScript (recommended) on your Shopify Integration settings page, or followed the guide to do so manually, then you have already installed klaviyo.js and your Klaviyo forms are enabled. You can jump right to the signup form editor, found in the Signup Forms tab, and start building out a form.

About the Accepts Marketing Property

When you integrate your Klaviyo account with Shopify, one of the properties synced from your store is whether each customer accepts email marketing or not. The property can be either true or false. Below is an example of how the property appears on a customer's profile in Klaviyo. To find a list of profiles in Klaviyo and view their details, navigate to the Profiles tab. You can also use the search bar at the top of your dashboard to search for individual profiles. 

Klaviyo’s profile property information, with First Active, Last Active, Custom Properties, Accepts Marketing, Profile Created, and Profile Updated

To learn more about how the Accepts Marketing property is managed in Shopify, view their documentation. This property always syncs to Klaviyo, but is set by Shopify, and so it might not always match whether a customer is subscribed to your newsletter.

There are a few situations which can cause someone to have Accepts Marketing set to false, but they're still subscribed to your newsletter:

  • If a customer checks out and decides not to accept email marketing at that time, but later subscribes through a signup form, they'll still be added to your newsletter list.
  • If a customer checks out and does accept email marketing, they'll be added to your newsletter list. If they check out again, they'll probably decide to not subscribe again since they're already subscribed. Depending on your checkout configuration, Shopify might see this as not accepting marketing (Accepts Marketing = false.) You probably don't want to treat this customer as an unsubscribe. Rather, you'll want to keep this customer on your newsletter list. 

Klaviyo will not automatically sync historical subscribers to a list when a customer checks Subscribe new customers to a Klaviyo list. If you need to add historical subscribers to your newsletter list, you can do so with property and flow editing as outlined in How to Add or Combine Lists Without Triggering a Flow. You can also add subscribers to a list manually by following How to Add Subscribers to an Existing List

Additionally, it's important to note that a customer who has Accepts Marketing set to false won't automatically be suppressed. To learn more about suppression, check out our article About Suppressed Profiles in Klaviyo

Troubleshooting

If you are having trouble with your Shopify integration, check out our article Troubleshooting Your Shopify Integration

Additional Resources

x
Was this article helpful?
1792 out of 2771 found this helpful