Step-by-Step Tutorial to Set Up Facebook Messenger Chat On Shopify Without App
Did you know you can add Facebook Messenger on Shopify? Adding Facebook Messenger live chat Shopify can benefit your store in a number of ways. Here are a few of them:
Increase Customer Service
In brick-and-mortar stores, shoppers love talking with helpful sales associates. The online world is much different in this respect. If your store is not as intuitive and information is hard to find, your customer may just go to a different site.
With a Shopfiy live chat app, your customers can reach you instantly to ask questions about a product.
People make purchase decisions in seconds, and their ability to have their questions answered with the click of a button may make the sale for you.
Chat with Multiple Shoppers at Once
With live chat, you can talk to several customers at a time. You wouldn’t be able to do this on the phone. So no one has to wait on hold to talk to you, and you won’t miss chatting with any of your customers.
Chat Feature is Easy to See
The Shopify Messenger app appears on every page of your store and is very prominent on the screen. So it’s easier to find than a contact form, which is only on one page.
Increase Sales and Conversions
According to the American Marketing Association, stores that use live chat increase their conversions by 20 percent. You have the opportunity to speak to customers while they are in your store and guide them through making purchase decisions. A report by eMarketer indicates that, after using live chat, 35% more shoppers made purchases.
Build Trusting Relationships with Your Customers
Facebook Messenger Shopify would allow you to have a conversation and build rapport with your customers that you couldn’t do otherwise. If your customers trust you, they’re more likely to buy from you. Even just knowing they can get what they need by clicking the chat icon may be enough to make a sale and build a relationship for future sales.
Competitive Edge
Despite its proven effectiveness, only 9 percent of online businesses use live chat to support their customers. You can stand out from all of the other stores by offering live chat.
Preferred Mode of Communication
For customer service, shoppers prefer live chat over phone or email, according to an eDigital research paper.
This tutorial will show you how to add Facebook chat to Shopify.
How to Add Facebook Messenger to Shopify- Copy the code below.
- From your Shopify admin, go to Online Store > Theme.
- Find the theme you want to edit and then click Action > Edit code.
- In the Layout section, click theme.liquid to open the file in the online code editor.
- Find </body> and paste code just above it.
- Done
<!-- Dev-EE codes -->
<style>.fb-livechat,.fb-widget{display:none}.fb_chat.fb-button,.fb_chat.fb-close{position:fixed;right:24px;cursor:pointer}.fb_chat.fb-button{z-index:1;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff;width:60px;height:60px;text-align:center;bottom:24px;border:0;outline:0;border-radius:60px;-webkit-border-radius:60px;-moz-border-radius:60px;-ms-border-radius:60px;-o-border-radius:60px;box-shadow:0 1px 6px rgba(0,0,0,.06),0 2px 32px rgba(0,0,0,.16);-webkit-transition:box-shadow .2s ease;background-size:80%;transition:all .2s ease-in-out}.fb_chat.fb-button:focus,.fb_chat.fb-button:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,.09),0 4px 40px rgba(0,0,0,.24)}.fb-widget{background:#fff;z-index:2;position:fixed;width:360px;height:435px;overflow:hidden;opacity:0;bottom:0;right:24px;border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;box-shadow:0 5px 40px rgba(0,0,0,.16);-webkit-box-shadow:0 5px 40px rgba(0,0,0,.16);-moz-box-shadow:0 5px 40px rgba(0,0,0,.16);-o-box-shadow:0 5px 40px rgba(0,0,0,.16)}.fb-credit{text-align:center;margin-top:8px}.fb-credit a{transition:none;color:#bec2c9;font-family:Helvetica,Arial,sans-serif;font-size:12px;text-decoration:none;border:0;font-weight:400}.fb_chat.fb-overlay{z-index:0;position:fixed;height:100vh;width:100vw;-webkit-transition:opacity .4s,visibility .4s;transition:opacity .4s,visibility .4s;top:0;left:0;background:rgba(0,0,0,.05);display:none}.fb_chat.fb-close{z-index:4;padding:0 6px;background:#365899;font-weight:700;font-size:11px;color:#fff;margin:8px;border-radius:3px}.fb_chat.fb-close::after{content:'x';font-family:sans-serif}</style>
<div class="fb-livechat">
<div class="fb_chat fb-overlay"></div>
<div class="fb-widget">
<div class="fb_chat fb-close"></div>
<div class="fb-page" data-href="https://www.facebook.com/ecomeeexperts.io/" data-tabs="messages" data-width="360" data-height="400" data-small-header="true" data-hide-cover="true" data-show-facepile="false">
<blockquote cite="https://www.facebook.com/ecomexperts.io/" class="fb-xfbml-parse-ignore"> </blockquote>
</div>
<div class="fb-credit">
<a href="https://www.ecomexperts.io/" target="_blank">Facebook Chat Widget by EcomExperts.io</a>
</div>
<div id="fb-root"></div>
</div>
<a href="https://m.me/ecomexperts.io" title="Send us a message on Facebook" class="fb_chat fb-button"></a>
</div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.3&appId=364831677646201&autoLogAppEvents=1"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>$(document).ready(function(){var t={delay:125,overlay:$(".fb-overlay"),widget:$(".fb-widget"),button:$(".fb-button")};setTimeout(function(){$("div.fb-livechat").fadeIn()},8*t.delay),$(".fb_chat").on("click",function(e){e.preventDefault(),t.overlay.is(":visible")?(t.overlay.fadeOut(t.delay),t.widget.stop().animate({bottom:0,opacity:0},2*t.delay,function(){$(this).hide("slow"),t.button.show()})):t.button.fadeOut("medium",function(){t.widget.stop().show().animate({bottom:"30px",opacity:1},2*t.delay),t.overlay.fadeIn(t.delay)})})});</script>
<!-- Dev-EE codes -->
Facebook Messenger Marketing Shopify
Now you know how to add messenger chat on Shopify. Your customers can reach out to you in real time and you can experience all of the advantages live chat has to offer, such as increased sales and conversions and improved customer relationships.
We hope you have benefited from this blog post about how to install Facebook chat to Shopify. As always, feel free to contact us with questions.

About Andrew Durot
He is the co-founder of Ecom Experts, a Shopify focused development agency.
Ecom Experts and Andrew's team have been focused on speed optimization - increasing the speed of over 300 stores in last year alone.
Speed Optimization is a repetitive & time-consuming task that most veteran Shopify experts try to avoid.
Andrew and his team has taken it upon themselves to maser the subject and become the largest speed optimization team on he Shopify platform even building out the only Shopify specific speedchecker tool!
Guides
- Add A Multiple Currency Selector to Your Shopify Store Using Code Tutorial
- Unlimited Bundles and Discounts Shopify App Review and Tutorial
- How to Create A Page of Collections on Shopify Using Code
- Show The Number of Products Left in Stock on Your Shopify Product Page
- Change the Number of Products in the Collection Page- Shopify Tutorial
- DIY Guide to Embed A YouTube Video in Shopify Product Page Tutorial
- Add a Message to the Shopify Product Pages by Using Product Tags - 2021 Easy Tutorial
- How to Add a Delivery Date Picker to Your Cart Page - Easy Step-By-Step Shopify Tutorial
- How To Create A Stunning Parallax Scrolling Section In Your Shopify Store Tutorial
- 6-step Tutorial on How to Add Wholesale To Shopify Store Without Shopify Plus
- How to Add Banner Image to Product Pages Without The App - Quick Shopify Tutorial
- How to add Hover Effect on Main Navigation Bar In Shopify
- How to Add A Gallery Page to Your Shopify Store without the App
- Disable Right-click to Protect Your Images on Shopify Using Code - Tutorial
- How to Auto Hide Sold Out Products on Shopify: DIY Tutorial
- DIY Code: How To Add Continue Shopping Button To Your Shopify Cart Page
- How to Create Custom Product Options on Shopify Without the App in 2021
- How to Select Variants By Clicking Their Images on Shopify
- How to Create a Custom Note Field on Your Shopify Cart Page
- How to Enable Custom File Upload Product Options on Shopify
- How To Show An Alternate Product Image On Your Shopify - Easy Step-By-Step Tutorial
- Step-by-Step Tutorial to Set Up Facebook Messenger Chat On Shopify Without App
- DIY Code To Add a Size Chart to Shopify Product Pages
- How To Redirect Shopify Customers After Login, Logout & Account Creation
- 4 Steps to Create a Sticky Header on Shopify: DIY Code
- How to Add Featured Product Slider To Your Shopify Store: Step-By-Step Tutorial
- Shopify Product Description Tabs: 5 easy steps to create your own collapsable descriptions
- Shopify Quick ADD TO CART Button On Collection Page Without The App
- How To Add a CUSTOM FONT To Your Shopify Store Without The App