How to manually install Klaviyo.js for Shopify stores

You will learn

Learn how to manually install Klaviyo’s Active on Site tracking snippet, also known as Klaviyo’s onsite JavaScript or Klaviyo.js, on your Shopify store. You should only do this if you experience very high web traffic or your site suffers from slow loading time for any other reason (though Klaviyo has recently improved load times and thus may not be the cause). Otherwise, we recommend you install Klaviyo.js by enabling Klaviyo’s Shopify app embed.

Before you begin

If you choose to manually install Klaviyo.js and previously had it enabled via Klaviyo's app embed, you must first disable the app embed in your Shopify theme settings.

Install Klaviyo.js on your Shopify store

1. Copy the code snippet below:

   <script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>

2. In the code snippet, be sure to replace PUBLIC_API_KEY with your six-digit Klaviyo Public API Key.
3. If you've enabled Customer Accounts for your store, add an extra script to identify your customers with the email they use to log in to your store. The full set of scripts will look like the following:

   <script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>
   <script type="text/javascript"> 
   //Initialize the Klaviyo object on page load
   !function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}(); </script>
   <script type="text/javascript">
   //Customer accounts
   var klaviyo = window.klaviyo || [];
   if ("{{ customer.email }}") {klaviyo.identify({"$email" : "{{ customer.email }}"})};
   </script>
   

4. From your Shopify Admin click Online Store > Themes. From the dropdown click Edit Code.
   
5. Search for the files you want to add the snippet to and click to open it in the editor. You can add the snippet to any page templates where you want to enable Klaviyo forms and tracking on the corresponding pages. 
6. Scroll to the bottom of the file and paste your snippet below the other code.
   
7. Click Save.

Test your Active on Site tracking

To test that your Active on Site tracking is set up properly, follow these steps:

1. Navigate to your website.
2. On your homepage, add the following to the end of the URL, replacing example@gmail.com with your email address:
   ?utm_email=example@gmail.com
   
   
3. Reload the page.
4. Search in Klaviyo for your email address.
   

You should see that a Klaviyo profile has been created for you (if one didn't exist already) and that this activity has been tracked on your activity feed.

Now that you've installed Klaviyo.js, you'll be able to utilize Active on Site tracking, Klaviyo sign-up forms, and more. 

Additional resources

• Getting started with Shopify
• Getting started with Klaviyo onsite tracking
• Getting started with sign-up forms