Integrate with Shopify

read

Overview

This article walks through enabling the Shopify integration in your Klaviyo account. You can optionally add web tracking to your Shopify store, and sync a Shopify signup form to a Klaviyo list.

Enable the Shopify Integration

This section walks through enabling the Shopify integration in your Klaviyo account.

    1. In your Klaviyo account click the Integrations tab and click on the Shopify integration.
    2. Paste in the URL of your Shopify store and click Connect to Shopify. This takes you to your Shopify account.

      Note

      For most integrations we recommend checking off the box to add customers who accept marketing to a list in Klaviyo. Read more about Shopify's "Accepts Marketing" property below.
    3. Click Install App. This begins syncing your Shopify data with Klaviyo and takes you back to your Klaviyo account.
    4. A green success callout indicates that your data is syncing with Klaviyo. You can view this data at the bottom of the screen.

Note

If you're syncing a large amount of data a green progress bar will indicate the status of your sync. See the section below on Monitoring the Historical Data Sync for more detailed information.

Your Shopify integration is now enabled.

Add Web Tracking to Your Shopify Store

Add web tracking to your Shopify store by pasting two Klaviyo code snippets into your Shopify theme.

  1. From your Klaviyo account click the Account dropdown and select Setup Web Tracking. This takes you to a page with two code snippets. You will paste each snippet into a different location in your Shopify theme files.
  2. From your Shopify Admin click Online Store > Themes. From the dropdown click Edit Code.
    shopifyEditCode.png
  3. Search for the theme.liquid file. Click on the file to open it in the editor.
    themeLiquid.png
  4. Scroll to the bottom of the file and locate the closing </body> tag. Paste the first code snippet directly before the closing </body> tag. Click Save.
  5. Switch back to your Klaviyo account, and copy the second snippet.
  6. Switch back to your Shopify account, search for the product.liquid file. Click the file to open it in the editor.
    productLiquid.png
  7. Paste the second code snippet at the bottom of the file, after all the existing code. Click Save.
  8. Switch back to your Klaviyo account. Enter the URL for your Shopify store into the box. Click Next.

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

Sync a Shopify Signup Form to a Klaviyo List

You have your Shopify store synced, and you're ready to hit the ground running with Klaviyo. Now is a good time to consider any signup forms you have on your website or any landing pages you use.

You will want to make sure that all these forms point to Klaviyo, so that new subscribers begin to flow effortlessly into Klaviyo and get added to the right Klaviyo lists. Check out these guides as a next step:

Shopify's "Accepts Marketing" Property

When you connect Shopify, one of the properties synced from your store is whether each customer accepts marketing or not. It can be either true or false. To learn more about how the "Accepts Marketing" property is managed in Shopify, view their documentation. This property is always synced whether you subscribe customers who accept marketing to a list or not.

The Accepts Marketing property that's synced to Klaviyo doesn't mean someone is or isn't subscribed to your newsletter. There are a few situations which can cause someone to haveAccepts Marketing set to false, but they're still subscribed to your newsletter:

  • If a customers checks out and decides not to accept marketing then, but subscribes through a signup form later, they'll still be added your newsletter list.
  • If a customer checks out and does accept 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 them not accepting marketing, but you probably don't want to treat not subscribing twice as an unsubscribe. In this case, we'll keep them on your newsletter list.

Monitoring the Historical Data Sync

Depending on how many orders, customers and products your store has, it can take from a few minutes to several hours to sync all of your data. Once the initial sync is complete, new data will sync to Klaviyo in real-time. To check the progress of the initial sync, click on the Metrics tab in the sidebar.

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. If you want 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 and check the Contact Information > Organization section.

Klaviyo's Web Tracking Snippets

Klaviyo's web tracking snippets are included below for your convenience. You can also access these snippets from your Klaviyo account by clicking the account dropdown and clicking Setup Web Tracking.

The Active on Site Metric

In the script below, be sure to replace 'API_KEY' with your Public API Key from your Klaviyo account.

<script type="text/javascript"> 
     var _learnq = _learnq || [];
      {% if customer %}
        _learnq.push(['identify', {
        '$email' : "{{customer.email}}"
        }]);
      {% else %}
      {% endif %}
      
     _learnq.push(['account', 'API_KEY']); 
     (function () { 
     var b = document.createElement('script'); b.type = 'text/javascript'; b.async = true; 
     b.src = ('https:' == document.location.protocol ? 'https://' : 'http://') +     'a.klaviyo.com/media/js/analytics/analytics.js'; 
     var a = document.getElementsByTagName('script')[0]; a.parentNode.insertBefore(b, a);
     })(); 
</script>

The Viewed Product Metric

<script text="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>

Manually Testing Web Tracking

To test that tracking is set up properly, go to a product page for your store, and add the following to the end of the URL, replacing example@gmail.com.com with your email address:

 ?utm_email=example@gmail.com.com

Click enter to reload the page. Now, when you search in Klaviyo for your email address. You should see a profile has been created and has tracked your product view.

Reverting to a Previous Version Theme Files

If you think you have made an error inserting the code into any of your theme files, or you would like to revert to a previous version of the file in order to undo any changes you can do so within the Shopify HTML/CSS editor.
shopify_undoChanges.png

Learn more

Learn more about the data Klaviyo pulls from Shopify.
Was this article helpful?
17 out of 24 found this helpful