HAL on Shopify in three steps.

Step 1 — copy your widget code

In HAL: Settings → Widget → Install. Copy the snippet (it contains your project ID):

<script
  src="https://api.chatwithhal.com/widget.js"
  data-project-id="YOUR_PROJECT_ID"
  async
></script>

Step 2 — add it to your theme

1. Shopify admin → Online Store → Themes.
2. On your live theme: ⋯ → Edit code.
3. Open Layout/theme.liquid.
4. Paste the snippet just before </body>.
5. Save — the launcher appears on every page that uses the theme.

Prefer not to touch theme code? Most theme editors accept custom HTML/liquid blocks in the footer section — the snippet works anywhere raw HTML renders.

Step 3 — make it feel native

• Set the primary color to your store's accent (Settings → Widget).
• Pick bottom-left if your theme puts badges bottom-right.
• Add a teaser bubble: "Question about sizing or shipping? Ask away."

Identify logged-in customers

If your theme exposes the customer object, identifying logged-in shoppers turns their chats into contact records — with order history context one identify away:

<script>
  {% if customer %}
  window.addEventListener('load', function () {
    if (window.HalWidget) {
      HalWidget.identify({
        email: {{ customer.email | json }},
        name: {{ customer.name | json }}
      });
    }
  });
  {% endif %}
</script>

Verify identities for extra safety — see identity verification.

Store-specific tips

• Pre-sales questions convert — a page-visit automation on collection pages ("Want a hand picking?") beats a generic greeting.
• Track add-to-cart — Shopify's events can map to HAL tracking for attribution from first visit to order.
• Test on mobile — most storefront traffic is mobile; check the launcher clears your sticky bar.
• Hide on specific templates? Wrap the snippet in a template conditional if you truly need it gone somewhere.