Press enter to see results or esc to cancel.

How to enable the new Messenger chat plugin on Shopify [Tutorial]

I decided to write this tutorial when a merchant that’s use our Shopify PWA asked for help to install the new version of the Facebook Messenger chat plugin (beta) because the old one has a not so good experience.

A bad User Experience

While browsing their store I soon noticed that the old Messenger plugin experience was really not so good. When I opened the chat in Safari for iPhone I came across the exchange of applications and I was literally flipped to the native Messenger app that if I din’t have installed on my device, I would be almost forced to do so. In the Chrome desktop I was thrown once again to a new tab to be able to use the chat (bye bye shopping cart).ūüėď


The Messenger plugin used in their store don’t support the new Facebook Messenger plugin so I decided to get the hands dirty and update the plugin for this merchant. That’s cool because this new features was restricted to only a few people last year.

Our lovely customer approved the new version and we saw some benefits. If you want to update the Messenger chat plugin on a Shopify store, grab a cup of coffee and read my tutorial below.


This tutorial is quite simple, but can be a bit annoying for those who do not like code. At the end of this post I share some ways to get help from experts.

1. First, make sure if the Messenger sales channel is enabled on the store. If it’s not, learn how to enable it here;

shopify messenger sales channel screenshot

2. Enable the Message Us button in the Messenger sales channel;

shopify sales channel message us button screenshot

3. Open Google Chrome Desktop and go to your store URL and then view the source code (View > Developer > View Source);

google chrome view source menu screenshot

4. Hit CMD + F (CTRL + F) and search for messenger_app_id=

5. You will be redirected to a portion of code similiar to the image below, you need to copy the two red numbers like the example:

6. The first number is the Facebook Page ID and the other is the Shopify App ID. Identify and save both on a text file for use later;

7. Go back to your Shopify Messenger sales channel configuration, and disable the Message Us button;

8. You are almost there, now edit the theme.liquid (learn how to edit the theme code) on your Shopify theme editor and copy and paste the code below right on the next line after your <body> tag;

  window.fbAsyncInit = function() {
      appId            : 'APP ID GOES HERE',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); = id;
     js.src = "";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

<div class="fb-customerchat" page_id="PAGE ID GOES HERE">

9. Now replace your saved App ID and Page ID like the example below:

Facebook Messenger Chat Plugin Code Snippet

10.  Save your theme.liquid file;

11. Finally, whitelist your store domain on your Fanpage settings.

  • Click Settings at the top of your Page;
  • Click Messenger Platform on the left;
  • Edit whitelisted store domains for your page in the Whitelisted Domains section.

whitelist a domain on a fanpage messenger settings

Great job! If you followed the steps correctly and did not remove quotation marks or commas from the code snippets, the new chat plugin are be available in your store with a new gorgeous icon. ūüėé

The Benefits

  • Get the Facebook Messenger inside an app without being switched to other apps helps to keep the user on your sales channel;
  • The desktop version of the chat plugin is a game changer because they also do not interrupt browsing with new tabs;
  • The chat UX / UI has been improved;
  • The plugin is FREE and integrated with your Messenger app;

Take a look at the plugin running on a Shopify mobile app (PWA) and running on Safari Desktop:


The Messenger plugin is still on beta, and some glitches may happen. Remember to get the help of a professional at StoreTasker if you don’t feel comfortable running this tutorial. Also, you can install our Shopify PWA¬†and we’ll be happy to help you.

Apps showed in this tutorial