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.
<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
- 1In Sellio, open Settings, then Install, and copy the snippet with your widget key.
- 2Shopify admin, then Online Store, then Themes.
- 3On the live theme, open the three-dot menu and choose Edit code.
- 4Under Layout, open theme.liquid.
- 5Paste the snippet above </body> and click Save.
- 6Open the storefront; the launcher should be in the bottom corner on every page, including product and cart pages.
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.
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.