How to Manually Install Klaviyo.js for Shopify Stores

read
Last updated at:

You Will Learn

Learn how to manually install Klaviyo’s Active on Site web 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, you must first disable Klaviyo’s app embed in your Shopify theme settings, if you enabled it previously.

Klaviyo app embed for onsite tracking in Shopify toggled off

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

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/klaviyo.js?company_id=API_KEY"></script>

2. In the code snippet, be sure to replace '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 script will look like the following:

<script async type="text/javascript"
 src="//static.klaviyo.com/onsite/js/klaviyo.js?company_id=API_KEY"></script>
<script>
 var _learnq = _learnq || [];
 if ('{{ customer.email }}') {
   _learnq.push(['identify', {
       '$email' : '{{ customer.email }}'
     }]);
  }
</script>

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

Shopify Themes page with Action dropdown open showing Edit Code option

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.

Shopify edit code page with product.liquid file open showing klaviyo.js at the bottom

7. Click Save.

Test Your Klaviyo.js

1. Switch back into Klaviyo and click Setup Web Tracking in the account dropdown.

Account dropdown in Klaviyo showing Setup Web Tracking option

2. Enter the URL for your Shopify store into the box, then click Next.
Klaviyo web tracking setup with URL box and Next with blue background and waiting for data with gray background

3. Click the link that is generated, which will trigger an Active on Site event in your Klaviyo account.
Klaviyo web tracking setup with Shopify store link in blue and instructions to click

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

If your Shopify store is password-protected, this modal will not be able to detect whether the code snippet has been installed. 

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

Additional Resources

x
Was this article helpful?
127 out of 244 found this helpful