How to Add Live Chat to Shopify – Userlike & Shopify

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

Video Transcription

In this video, we’ll look at the different steps for adding live chat to your Shopify online store. 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 how adding live chat to Shopify works using our solution, Userlike.

Userlike is one of the most popular chat software solutions that brands like BMW and Lufthansa 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.

Create a Userlike account

In our example, we just have a small Shopify store, so we’re good with the free version for now.

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.

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 Website Messenger. That’s the chat box your customers see on your site and that they’ll use to get in touch with you.

Looking for better customer relationships?

Test Userlike for free and chat with your customers on your website, Facebook Messenger, and Telegram.

Read more

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.

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 :)

Alright, 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!

Add the code to Shopify

For this final step, we go to the installation tab in the Userlike Dashboard. What you see here is your unique Javascript code. I know, this might look a bit scary. But no worries, it really is incredibly easy. Let me show you.

Just copy the code and head over to Shopify now.

  • Log in to your Shopify account.
  • On your home screen, go to “Online store” under the Sales channels menu on the left side.
  • Then click “Actions” and select "Edit Code" in the dropdown menu.
  • Select the "theme.liquid" template from the layout folder and move to the bottom of the editor. This is quite techy again, but like I said, it looks more intimidating than it actually is.
  • Now we need the Userlike javascript code that you copied earlier. 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!

Integrating chat on your website is the first and most important step for getting started with live chat support.

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!