Shopify Installation

We offer two options for installing Shopify. Option #1 is recommended for eCommerce businesses who do not intend to use Heap for any other platform (only applicable if you haven’t installed Heap before). Option #2 is recommended for all other use cases.

For both options, to track events on the checkout page, you will need to have Shopify Plus. You will also need to request access to edit checkout.liquid from Shopify support and then modify checkout.liquid to include the Heap snippet. If you do not have Shopify Plus, the one-click installation will set up Heap to use a checkout button click as proxy for initiating checkout.

Option #1: One-Click Shopify Installation

If you’ve never installed Heap before, you can use this simple process to install Heap to your Shopify store with a single click. Doing so sets up the Shopify source along with an eCommerce dashboard loaded with useful reports using Shopify and autocaptured data. This allows you to quickly get actionable insights with no engineering resources needed.

🚧

Identify

The one-click install automatically sets identity to Shopify Customer ID. Do not use this method if you have already installed Heap via another platform, such as on your website or mobile app. Note that this method will automatically set your identity to Shopify Customer ID.

When you first sign up for Heap, you’ll be directed to our installation flow. To install Heap via Shopify, select Shopify as the installation method.

You will be guided to enter your Shopify store name. Click Authorize Heap to connect with Shopify.

Once installed, you’ll automatically land on your new eCommerce dashboard. Learn more about what this dashboard provides and how to use it in our Reports, Dashboards, Playbooks guide.

To collect additional types of data, such as the customer's name or the total amount they spent, you can use our heap.addUserProperties() or heap.addEventProperties() APIs by adding them into the theme.liquid page like the example snippet below. You can add as many calls as you want to this snippet.

heap.addUserProperties({'Name': '{{ customer.name }}', 'TotalSpent':'{{ customer.total_spent }}'});

Shopify Plus

Note that this installation flow does not add the Heap snippet to the checkout page. To capture interactions during checkout, you must have permission to edit the checkout.liquid file, which is only available for Shopify Plus customers. Contact Shopify support about enabling checkout.liquid to add the Heap snippet to this layout file.

Once you have edit access, add the following Heap snippet to your checkout.liquid template.

<script type="text/javascript">
    window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=t.forceSSL||"https:"===document.location.protocol,a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=(r?"https:":"http:")+"//cdn.heapanalytics.com/js/heap-"+e+".js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n);for(var o=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","removeEventProperty","setEventProperties","track","unsetEventProperty"],c=0;c<p.length;c++)heap[p[c]]=o(p[c])};
    heap.load("YOUR_APP_ID");
    var customerId = '{{ customer.id }}';
    var customerEmail = '{{ customer.email }}' || '{{ checkout.email }}';
    heap.identify(customerId);
    heap.addUserProperties({'Name': '{{ customer.name }}','email': customerEmail,'CustomerID':'{{ customer.id }}','TotalSpent':'{{ customer.total_spent }}'});   
</script>

🚧

It may take up to 24 hours for data to sync from Shopify to Heap.

Option #2: Standard Shopify Installation

You can use the installation flow below if you already have Heap installed on another platform and are adding Heap to Shopify.

Shopify offers two different store types: Shopify and Shopify Plus. The Heap installation snippet collects different information based on which type of store you have.

Shopify

In a standard Shopify store, where Heap is installed on the theme.liquid page, the Heap snippet will autocapture the following:

  • All interactions on your store page
  • All client-side order information (interactions on the thank you page, plus any additional scripts run)

To capture interactions during checkout, you must have permission to edit the checkout.liquid file, which is only available for Shopify Plus customers. Contact Shopify support about enabling checkout.liquid to add the Heap snippet to this layout file.

Shopify Plus

In a Shopify Plus store, where Heap is installed on the theme.liquid and the checkout.liquid pages, the Heap snippet will autocapture the following:

  • All interactions on your store page
  • All client-side order information (interactions on the thank you page, plus any additional scripts run)
  • All interactions during checkout

📘

To pull in server-side order data directly from Shopify’s API, reach out to your Account Manager to activate our Shopify Integration.

To install Heap on your Shopify site, add this snippet to your theme.liquid and checkout.liquid (Shopify Plus only) files.

<script type="text/javascript">
    window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=t.forceSSL||"https:"===document.location.protocol,a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=(r?"https:":"http:")+"//cdn.heapanalytics.com/js/heap-"+e+".js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n);for(var o=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","removeEventProperty","setEventProperties","track","unsetEventProperty"],c=0;c<p.length;c++)heap[p[c]]=o(p[c])};
    heap.load("YOUR_APP_ID");
    var customerEmail = '{{ customer.email }}' || '{{ checkout.email }}';
    var customerId = '{{ customer.id }}';
    /* heap.identify(customerEmail); */
    heap.addUserProperties({'Name': '{{ customer.name }}','email': customerEmail,'CustomerID':'{{ customer.id }}','TotalSpent':'{{ customer.total_spent }}'});   
</script>

You have the followkng options for identifying your users based on your use case:

  • customerEmail which represents the email address that the user inputs.
  • customerID which represents the Shopify customer ID associated with the user.

Update line 6 of the snippet above based on which one you want to use. Note that this snippet also contains optional calls to identify API and addUserProperties API with some common Shopify user variables.

📘

If you have not yet installed Heap, you’ll find your snippet on our install page. If using the snippet above, remember to replace YOUR_APP_ID with the ID of the environment to which you want to send data. You can find this ID on the Account > Manage > Projects page.

If you are using Shopify’s domain and your site uses SSL, you can embed an iframe on the thank you page to track how many people are completing their purchase.

  1. Starting at your Shopify admin, click Settings, and then Checkout.

  2. Scroll down to the Order processing section and select Additional content & scripts.

  3. Insert the following code. It will vary based on your site, but the iframe should look something like this:

<iframe src="https://your_site_url.com/store?thank-you" style="display: none"></iframe>
  1. In Heap, create a View page event and add a filter for query contains thank-you.

You’re ready to check out how many users are purchasing items from your site! For more help customizing your Shopify page, visit Shopify’s documentation on customizing the order status page.

Identity

Shopify liquid variables like {{ customer.email }} can be used to call Identify. Before implementing the call below, please work with your team internally and your Heap contact to ensure that you standardize on the proper identity convention for your use case.

var customerEmail = '{{ customer.email }}' || '{{ checkout.email }}';
   heap.identify(customerEmail);

📘

For customers using ReCharge Apps app with Shopify

Subscriptions by ReCharge is a popular eCommerce app that integrates with Shopify. To successfully track the entire customer journey across both Shopify checkout and ReCharge checkout, contact ReCharge support for assistance setting up ReCharge on your own domain. If you have any questions, feel free to contact [email protected]!

Updated about a month ago

Shopify Installation


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.