Add live chat to your Shopify store

Setup

1. 1

   Step 1: Copy your embed code

   In the Lunachat panel, open Websites, pick your site and copy the embed snippet. The public key inside it belongs to that one site.

   <script>
     window.lunachat = window.lunachat || function () {
       (lunachat.q = lunachat.q || []).push(arguments);
     };
     lunachat('init', 'pk_live_YOUR_KEY');
   </script>
   <script async src="https://cdn.lunachat.co/w.js"></script>

2. 2

   Step 2: Open your theme code

   In the Shopify admin choose Online Store, then Themes. Click the three-dot button next to your published theme and pick Edit code. Editing an unpublished copy means the code never reaches your storefront.

3. 3

   Step 3: Paste into theme.liquid

   Open the Layout folder in the file list and click theme.liquid. Find the </head> tag, paste the code directly above it and hit Save. This file runs on every storefront page, so one edit covers the store.

4. 4

   Step 4: Check your storefront

   Open any page of your store in a new tab and the chat bubble appears in the bottom right. If it doesn't, make sure the theme you edited is the published one.

Worth knowing

• The code lives inside the theme. Switch themes, or reinstall one from scratch, and you have to add it again.
• Shopify's checkout pages don't use theme files, so the widget doesn't appear during checkout. That is a deliberate boundary rather than a gap: Shopify closed script injection there outside Plus and has ended checkout.liquid support.
• Customer events (Web Pixels) is not the right home for this either. Code there runs in a sandbox and cannot draw UI on the page; it is built for measurement scripts.
• You can register several sites in the panel, each with its own key, and track store and blog separately.
• If you sell in several languages through Shopify Markets, you can pin the box's language to the page's language.

Two additions specific to your store

Once setup is done an agent sees which page the visitor is on. Shopify's Liquid variables can add what is in the cart and who the logged-in customer is. Both go in theme.liquid, DIRECTLY BELOW the embed snippet.

<script>
  lunachat('set', {
    cartTotal: {{ cart.total_price | money_without_currency }},
    cartItems: {{ cart.item_count }}{% if customer %},
    customerName: {{ customer.name | json }},
    orderCount: {{ customer.orders_count }}{% endif %}
  });
</script>

<script>
  lunachat('init', 'pk_live_YOUR_KEY', {
    lang: {{ request.locale.iso_code | json }}
  });
</script>

Frequently asked