Shopify Installation

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.

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. Note that it also contains optional calls to identify API and addUserProperties API with some common Shopify user variables.

<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 }}';
    heap.identify(customerEmail);
    heap.addUserProperties({'Name': '{{ customer.name }}','email': customerEmail,'CustomerID':'{{ customer.id }}','TotalSpent':'{{ customer.total_spent }}'});   
</script>

In your checkout settings, in the Thank You/Additional Snippets section, use the following snippet, which also includes the above options, plus a Purchase event with various event properties brought in as well (Uncomment to use these API calls).

Note: This is not required if you are already using our Shopify Integration.

<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 }}';
    heap.identify(customerEmail);
    heap.addUserProperties({'Name': '{{ customer.name }}','email': customerEmail,'CustomerID':'{{ customer.id }}','TotalSpent':'{{ customer.total_spent }}'});   
{% if first_time_accessed %}
    // heap.track('Purchase', {'Total Price': '{{ checkout.total_price | money }}','Order Email': '{{ customer.email }}','Order ID': '{{ checkout.id }}','Order Name': '{{ checkout.order_name }}','Discount': '{{ checkout.discount_code }}','Discount Amount': '{{ checkout.discounts_amount | money }}','Order Count': '{{ customer.orders_count }}','Tags': '{{ customer.tags }}','Shipping Method': '{{ checkout.shipping_method.title }}','Shipping Address': '{{ checkout.shipping_address }}'});
{% endif %}
</script>

📘

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.

📘

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 2 months 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.