Docs

Shopify Integration Guide

Add Heyo live chat to your Shopify store to increase conversions and reduce cart abandonment.

Try Heyo for Shopify →

This guide shows you how to add Heyo to your Shopify store. Works with all Shopify plans including Shopify Plus.

Installation

Step 1: Access Theme Code

From your Shopify admin, go to Online Store > Themes
Find your active theme and click Actions > Edit code
In the left sidebar, locate and click on theme.liquid under Layout

Step 2: Add Heyo Script

Add this code before the closing </head> tag:

<script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>

Step 3: Save

Click Save in the top right corner. The chat widget will now appear on your store!

Advanced Integration

Pass Customer Data

Show customer information in your support inbox:

<script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>

{% if customer %}
<script>
window.addEventListener('load', function() {
  if (window.HEYO) {
    window.HEYO.init({
      projectId: 'YOUR_PROJECT_ID',
      user: {
        name: '{{ customer.name | escape }}',
        email: '{{ customer.email | escape }}',
        customerId: '{{ customer.id }}'
      }
    });
  }
});
</script>
{% endif %}

Show Chat on Specific Pages Only

Only on Product Pages

{% if template contains 'product' %}
<script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>
{% endif %}

Only on Cart and Checkout

{% if template contains 'cart' or checkout %}
<script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>
{% endif %}

Hide on Checkout Pages

{% unless checkout %}
<script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>
{% endunless %}

Track Product Views

Send context about what products customers are viewing:

<!-- Add to product pages -->
{% if template contains 'product' %}
<script>
window.addEventListener('load', function() {
  if (window.HEYO) {
    window.HEYO.trackEvent('viewing_product', {
      product: '{{ product.title | escape }}',
      price: '{{ product.price | money }}',
      url: '{{ product.url }}'
    });
  }
});
</script>
{% endif %}

Custom Trigger Button

Add a "Chat with us" button to your product pages:

<button 
  onclick="window.HEYO?.show()" 
  class="btn btn-primary"
  style="margin: 20px 0;">
  Questions? Chat with us!
</button>

Use Cases for Shopify

Cart Abandonment Recovery

Message customers who are hesitating at checkout:

Set up visitor alerts in Heyo dashboard
Trigger when users spend more than 2 minutes on cart page
Reach out proactively: "Need help with your order?"

Product Recommendations

Help customers find the right product:

Monitor visitor activity
See what products they're viewing
Offer assistance and recommendations

Post-Purchase Support

Help with order tracking and questions:

{% if template contains 'thank-you' %}
<script>
window.addEventListener('load', function() {
  if (window.HEYO) {
    window.HEYO.init({
      projectId: 'YOUR_PROJECT_ID',
      user: {
        name: '{{ customer.name | escape }}',
        email: '{{ customer.email | escape }}',
        orderNumber: '{{ order.name }}'
      }
    });
  }
});
</script>
{% endif %}

Customization

Match Your Brand Colors

Customize the widget to match your store's theme:

Go to your Heyo dashboard
Navigate to Project Settings > Appearance
Set colors to match your Shopify theme

Position

Control where the chat button appears:

<script>
window.addEventListener('load', function() {
  if (window.HEYO) {
    window.HEYO.config({
      position: 'bottom-right', // or 'bottom-left'
    });
  }
});
</script>

Shopify Plus Features

Checkout Page Integration

For Shopify Plus merchants with access to checkout.liquid:

<!-- In checkout.liquid -->
<script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>

Multi-Language Stores

Auto-detect customer language:

<script>
window.addEventListener('load', function() {
  if (window.HEYO) {
    window.HEYO.config({
      language: '{{ request.locale.iso_code }}'
    });
  }
});
</script>