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 and save the change.

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>

1. In the code snippet, be sure to replace PUBLIC_API_KEY with your 6-character Klaviyo Public API Key (site ID).
2. If you've enabled Customer Accounts for your store, use the full set of scripts below instead of the first snippet to identify logged-in customers with their email address. Replace PUBLIC_API_KEY in this version with your Public API Key too:

<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>

1. Open your Shopify theme’s code editor using Shopify’s instructions for editing theme code.

2. Open the Liquid template or section for the pages where you want Klaviyo forms and tracking. If a page uses a JSON template, add the snippet to a Liquid section referenced by that template, not to the JSON file. See Shopify’s JSON template documentation for details.
3. Paste your snippet below the existing HTML in the Liquid file, outside any {% schema %}, {% javascript %}, or {% stylesheet %} blocks. Include Klaviyo.js only once on each page.

4. 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 a page on your store where you installed the snippet. If your store requires tracking consent for your visit, provide it before testing.
2. On that page, add the following to the end of the URL, replacing example@gmail.com with your email address:
   ?utm_email=example@gmail.com
   
   If the URL already contains a question mark (?), append &utm_email=example@gmail.com instead, using your email address.

3. Reload the page.
4. Search in Klaviyo for your email address and open your profile.
   

You should see a Klaviyo profile for your email address (created if one didn’t exist already). In its Activity log, look for an Active on Site event for your test visit.

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