How to Add Live Chat to Shopify – Userlike & Shopify

Turn instant conversations into valuable leads. Live chat is the most effective way for you to connect with your customers in real time, directly on your Shopify site.

Shopify is one of the leading ecommerce platforms. With live chat you get more people into your sales funnel and clear up their questions at an earlier stage. That translates to happier customers and higher conversions.

Adding live chat to Shopify is simple. Follow our 3-step process and be up and running in just a few minutes. In this tutorial, we will show you how adding live chat to Shopify works with Userlike.

1
Create a Userlike account

Userlike is one of the most popular chat software solutions that brands like BMW and Merck trust for their customer communications.

It comes with lots of benefits, like a comprehensive free version that gives you unlimited chats and all the features you need for live chat support in a small business. For medium to larger businesses, the premium plans provide many advanced options like customization, smart routing, integrations with messaging apps like WhatsApp and more.

The first thing you do is head over to the Userlike website and create a new account. No need to add any billing information. When you sign up for Userlike, you get a 14-day free trial which allows you to experience the features from our premium plan. After the trial, your account automatically switches back to the free plan. So you can try it out with zero risk.

1
Adjust your chat settings

So, this is the Userlike Dashboard, your cockpit for setting up every detail of the chat.

Before adding live chat to your website, you probably want to make sure it looks and behaves how you want it to. So let's quickly set up the basics.

We’ll set up our operator profile first. I upload a photo – it’s always nice to put a face to a name. Okay, looks good!

Now we take a look at the Userlike Website Messenger. That’s the chat box your customers see on your site and that they’ll use to get in touch with you.

You probably invested a good amount of time into designing a beautiful Shopify site. Of course, you want the Website Messenger to fit in smoothly as well. Adjust the colors to tailor the chat to your brand. You see your changes in this little preview. Alright, that should fit perfectly!

You can also adjust the texts in the Website Messenger. I think they already sound friendly and inviting so I’ll just choose another emoji :)

Those were the most important tweaks. You can always go back and adjust your settings. But for now, I’m happy with the messenger which means I’m ready to add it to my site!

3
Add the code to Shopify

In this final step, we add the Userlike code to Shopify. No worries, it's incredibly easy. Let me show you.

  1. Log in to your Userlike account. If you don't have one yet, you can create a free account .
  2. In the Userlike Dashboard, go to "Channels > Website widgets", select your widget and head to the "Install > Javascript code" tab.
  3. What you see here is your Userlike Widget code. That's your unique Javascript code that allows you to connect Userlike with Shopify. Copy the code.
  4. Open another browser tab and log in to your Shopify account.
  5. On your home screen, go to “Online store” under the Sales channels menu on the left side.
  6. Then click “Actions” and select "Edit Code" in the dropdown menu.
  7. Select the "theme.liquid" template from the layout folder and move to the bottom of the editor.
  8. Now we need the Userlike widget code that you copied in step 3. Just paste it right before the closing body tag. Hit "Save"...

...and that’s that! Userlike live chat is now integrated and visible on your Shopify site.

To start chatting with your visitors, log in to the Userlike Message Center, set yourself to online – and chat away!

Adding chat to your website is the first step for getting started with live chat support, optimizing your customer experience and boosting lead generation.

For more tips and best practices on working with Userlike, take a look at our product demo.

And if you have any questions, just reach out to us in the chat on our website. We’re always glad to help. Happy chatting!