Install on Shopify

Connect your store

In the Kerabie dashboard, go to Channels → Shopify, enter your your-store.myshopify.com domain, and approve the install on Shopify's consent screen. You're sent back to Kerabie with the store connected; there's no API key to copy.

Every Online Store 2.0 theme (the default for new stores) includes a Custom Liquid block, so you never have to open theme.liquid.

Copy your install code

In Kerabie, go to Settings → Widget Settings and click Get Install Code, then open the Shopify tab and copy the snippet.

Open the theme editor

In Shopify admin go to Online Store → Themes and click Customize on your live theme.

Add a Custom Liquid block to the footer

Switch to the Footer group so the widget loads on every page, click Add section (or Add block), and choose Custom Liquid.

Paste and save

Paste the snippet into the Liquid box and click Save. The chat bubble appears across your storefront.

The snippet looks like this:

<script>
  window.KERConfig = {
    widgetKey: "wk_yourkey_here",
  };
</script>
<script async src="https://cdn.kerabie.com/widget.js"></script>

Using an older theme without Custom Liquid? Send the snippet to whoever manages your theme code and have them paste it before the closing </body> tag in Layout → theme.liquid.

Identify logged-in customers

Because the snippet lives in a Liquid block, you can pass the signed-in customer's name and email so agents know who they're talking to:

<script>
  window.KERConfig = {
    widgetKey: "wk_yourkey_here",
    {% if customer %}
    user: {
      name: "{{ customer.name | escape }}",
      email: "{{ customer.email | escape }}"
    }
    {% endif %}
  };
</script>
<script async src="https://cdn.kerabie.com/widget.js"></script>

Show on specific pages only

Wrap the snippet in a Liquid condition, for example, cart and checkout only:

{% if template contains 'cart' or template contains 'checkout' %}
<script>
  window.KERConfig = { widgetKey: "wk_yourkey_here" };
</script>
<script async src="https://cdn.kerabie.com/widget.js"></script>
{% endif %}