message.comDevelopers
Developers/Tutorials/Install on Shopify

Install live chat on Shopify

Add message.com live chat to a Shopify storefront by pasting one snippet into theme.liquid. Works on every Online Store 2.0 theme. About five minutes end to end. A native Built-for-Shopify app is on the roadmap, but this is the cleanest install today.

Before you begin

  • Shopify admin access with the Themes permission.
  • A message.com workspace. Sign up at app.message.com/register.
  • Your install snippet from Settings → Chats → Installation.
HTML
<!-- message.com live chat -->
<script>
  (function(d,s,o){
    var j=d.createElement(s);j.async=1;j.src='https://app.message.com/widget.js';
    j.dataset.workspace=o;
    d.head.appendChild(j);
  })(document,'script','YOUR_WORKSPACE_ID');
</script>

1. Open the theme code editor

  1. From Shopify admin, go to Online Store → Themes.
  2. Find your live theme. Click Actions → Edit code.
  3. The code editor opens with a file tree on the left.

Always duplicate the theme before editing live code. Actions → Duplicate, then edit the duplicate, then publish when verified. This gives you a one-click rollback.

2. Edit theme.liquid

  1. In the file tree, expand Layout and open theme.liquid.
  2. Scroll to the bottom. Find the closing </body> tag.
  3. Paste the snippet on the line above </body>.
  4. Click Save.

3. Identify logged-in customers (optional)

If you want agents and AI to see who is chatting (email, order count, lifetime spend), drop this block in theme.liquid right after the install snippet. Liquid renders customer data server-side, so you never expose secrets in the page source.

theme.liquid · identify
{% if customer %}
<script>
  window.MessageOnReady = function () {
    window.Message.identify({
      email: {{ customer.email | json }},
      name: {{ customer.name | json }},
      userId: {{ customer.id | json }},
      ordersCount: {{ customer.orders_count }},
      totalSpent: {{ customer.total_spent | money_without_currency | json }}
    });
  };
</script>
{% endif %}

For HMAC-signed identify (recommended for production), see Identify logged-in users.

4. Verify the install

  1. Click Preview on your theme.
  2. Wait two seconds. The chat launcher appears in the bottom-right.
  3. Open the browser console. Confirm the [message] startup log.
  4. Send a test message. Open app.message.com. You should see a fresh visitor.
  5. If everything works, publish the duplicated theme.

Common pitfalls

  • Checkout pages. Shopify renders the checkout from a separate codebase. The snippet does not load there. Cart, product, collection, and home pages are fine.
  • Hydrogen / headless storefronts. Use the React install or Next.js install instead. theme.liquid does not exist on Hydrogen.
  • Other chat apps installed. If you previously installed Tidio, Crisp, or Gorgias chat, uninstall the app first. Two launchers fighting over the bottom-right corner is a bad time.
  • App embeds. Some themes expose Theme settings → App embeds. Leave the legacy chat embed off if you are installing via theme.liquid.

Next steps