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.

🚧

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

Note that this snippet also contains optional calls to identify API and addUserProperties API with some common Shopify user variables.

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.

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 11 days 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.