/Docs
Start free

Shopify

Add the chat widget to a Shopify storefront through theme.liquid, so it shows on every page of the store.

Where it goes

On Shopify the snippet lives in theme.liquid, just above the closing </body> tag. It is one script tag; it loads asynchronously and never blocks the page.

index.html
<script>
  window.sellioSettings = { widgetKey: "your-widget-key" };
  (function (w, d) {
    w.SellioWidget = w.SellioWidget || [];
    var s = d.createElement("script");
    s.src = "https://sellio.chat/widget/embed.js";
    s.async = true;
    d.head.appendChild(s);
  })(window, document);
</script>

Replace your-widget-key with the key from Settings, then Install. The key is public and safe to commit: it names the workspace and carries no permissions.

Steps

  1. 1
    In Sellio, open Settings, then Install, and copy the snippet with your widget key.
  2. 2
    Shopify admin, then Online Store, then Themes.
  3. 3
    On the live theme, open the three-dot menu and choose Edit code.
  4. 4
    Under Layout, open theme.liquid.
  5. 5
    Paste the snippet above </body> and click Save.
  6. 6
    Open the storefront; the launcher should be in the bottom corner on every page, including product and cart pages.
✦
Shopify's checkout pages do not load theme code on most plans, so the widget will not appear there. That is Shopify's limit, not a missing step.
ℹ
When you switch themes, the snippet has to be added to the new theme's theme.liquid.

Identify visitors

When your site knows who is signed in, tell the widget so the inbox shows a name and email instead of a visitor id. Safe to call before the loader has finished; commands queue until it is ready.

identify.js
window.SellioWidget = window.SellioWidget || [];
window.SellioWidget.push(["setVisitor", {
  id: "your-user-id",
  name: "Ada Lovelace",
  email: "ada@example.com",
}]);

To stop anyone spoofing a name, sign the id on your server and pass it as userHash; see Identity verification.

Verify

Open the live site, send a message from the launcher, and check your inbox. If the launcher does not appear, the usual causes are a cache that still serves the old page, a visibility rule in Settings, then Visibility that hides it on this page or device, a domain missing from Allowed domains under Settings, then Install, or a snippet pasted into a page-level box rather than the site-wide one.

What the widget does on Shopify, and why teams use it there, is on the Shopify live chat page.

Updated . Something wrong or missing? Tell us.