{"id":2297,"date":"2023-08-22T09:44:46","date_gmt":"2023-08-22T09:44:46","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/how-to-add-whatsapp-chat-button-to-shopify\/"},"modified":"2026-03-16T11:50:27","modified_gmt":"2026-03-16T06:20:27","slug":"how-to-add-whatsapp-chat-button-to-shopify","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/how-to-add-whatsapp-chat-button-to-shopify\/","title":{"rendered":"How to Add WhatsApp Chat Button to Shopify? [With &#038; Without Coding]"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A Shopify WhatsApp Chat button helps customers message you directly (without saving your number.) It is a helpful feature, especially for mobile phone users.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But&nbsp;how to add WhatsApp Chat button to Shopify?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s pretty straightforward.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can do this yourself, too\u2014no need to hire a developer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this tutorial, we will go through the step-by-step method of adding WhatsApp Chat to Shopify. You can use the ready-made code here to add a WhatsApp Chat button to your store.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is a WhatsApp Chat Button?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A WhatsApp Chat Button is a tool that enables site visitors to initiate a chat with the business on WhatsApp directly. It is an icon or text button with a WhatsApp chat link that contains a number and message.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The main benefit here is that visitors can start a chat without saving the number. The button directly opens the WhatsApp Chat screen with the business number and the preset message.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Generally, it is present at any of the bottom corners.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s an example of a WhatsApp Chat Button:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/08\/whatsapp-chat-button-example-1-1.png\" alt=\"whatsapp chat button example\" class=\"wp-image-51018\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Now, let\u2019s learn how to add WhatsApp to Shopify.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add WhatsApp Chat Button to Shopify?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In Shopify, you can add a WhatsApp Chat button in two ways:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Add Code Manually \u2013<\/strong>&nbsp;Add a WhatsApp Chat Link button to the Shopify theme.liquid file<\/li>\n\n\n\n<li><strong>Using Shopify App \u2013<\/strong>&nbsp;Install and configure the Shopify WhatsApp Chat button app<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You can choose either of the options; both are straightforward.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s see the stepwise method to manually add a Shopify WhatsApp Chat button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"go-to-shopify-theme-edit\">Step 1: Go to Shopify Theme &gt; Edit<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Log into your Shopify admin, and go to&nbsp;<strong>Sales channels &gt; Online Store &gt; Themes<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, click the [<strong>\u22ef<\/strong>] three dots beside the Customize button and Edit Code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/08\/edit-theme-option-in-shopify-1-1.png\" alt=\"edit theme option in shopify\" class=\"wp-image-51022\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It will open the Shopify theme editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Add WhatsApp Button Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In the Shopify theme editor, navigate to&nbsp;<strong>Layout &gt; theme.liquid<\/strong>&nbsp;file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We will put the WhatsApp Chat button code in this file, which will apply to the entire store.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Copy this code:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% assign whatsappNumber = \"11234567890\" %}\n{% assign Message = \"Hello Meetanshi, I need your help!\" %}\n{% assign buttonPosition = \"right\" %}\n{% assign buttonColor = \"#25d366\" %}\n{% assign closeButtonColor = \"black\" %}\n{% assign ctaText = \"WhatsApp us\" %}\n{% assign marginBottom = \"1.25em\" %}\n{% assign marginLeft = \"1.25em\" %}\n{% assign marginRight = \"1.25em\" %}\n{% assign cornerRadius = \"2.5em\" %}\n{% assign zIndex = \"999999\" %}\n{% assign showCloseButton = true %}  {# Set this to false to hide the close button #}\n \n{% if buttonPosition == \"left\" %}\n  {% assign positionStyle = \"left: 0;\" %}\n{% else %}\n  {% assign positionStyle = \"right: 0;\" %}\n{% endif %}\n \n&lt;style>\n  .whatsapp-button-container {\n    position: fixed;\n    bottom: {{ marginBottom }};\n    {{ positionStyle }}\n    margin: 0 {{ marginLeft }} {{ marginRight }};\n    z-index: {{ zIndex }};\n    cursor: pointer;\n  }\n \n  .whatsapp-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0.625em;\n    background-color: {{ buttonColor }};\n    border-radius: {{ cornerRadius }};\n    text-decoration: none;\n    font-weight: bold;\n    color: #FFFFFF;\n  }\n \n  .whatsapp-button img {\n    height: 2em;\n    width: auto;\n    margin-right: 0.3125em;\n  }\n \n  .close-button {\n    position: absolute;\n    top: -0.625em;\n    right: -0.625em;\n    display: {{ showCloseButton | default: true | append: \"none\" }};\n    background-color: red;\n    color: white;\n    width: 1.25em;\n    height: 1.25em;\n    border-radius: 50%;\n    text-align: center;\n    line-height: 1.25em;\n    font-weight: bold;\n    cursor: pointer;\n  }\n&lt;\/style>\n&lt;script>\n  function hideWhatsAppButton() {\n    document.querySelector('.whatsapp-button-container').style.display = 'none';\n  }\n \n  \/\/ Wait for the DOM to load\n  document.addEventListener('DOMContentLoaded', function() {\n    \/\/ Add click event listener to the close button\n    document.querySelector('.close-button').addEventListener('click', hideWhatsAppButton);\n  });\n&lt;\/script>\n&lt;div class=\"whatsapp-button-container\">\n \n&lt;a class=\"whatsapp-button\" href=\"https:\/\/api.whatsapp.com\/send?phone={{ whatsappNumber }}&amp;amp;text={{ Message | url_encode }}\"> &lt;img src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/08\/whatsapp-logo-example.png\" alt=\"WhatsApp Logo\" \/> Whatsapp us! &lt;\/a> {% if showCloseButton %}\n&lt;div class=\"close-button\">\u00d7&lt;\/div>\n&lt;span style=\"display: none;\">Powered by &lt;a href=\"https:\/\/meetanshi.com\/blog\/how-to-add-whatsapp-chat-button-to-shopify\/\">Meetanshi Shopify WhatsApp Chat Solution&lt;\/a>&lt;\/span>\n{% endif %}\n \n&lt;\/div><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">And paste it before the &lt;\/body&gt; tag inside the&nbsp;<strong>theme.liquid<\/strong>&nbsp;file.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/08\/paste-whatsapp-button-code-in-shopify-1-1.png\" alt=\"paste whatsapp button code in shopify\" class=\"wp-image-51031\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Customize WhatsApp Button in Shopify<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure to modify the code with your number and preferred message before saving. You can also change other variables to customize the Shopify WhatsApp Chat Button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These variables are declared at the top of the code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"354\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2026\/03\/Shopify_Whatsapp_chat_attributes_-1-1024x354.png\" alt=\"Shopify WhatsApp Chat attributes\" class=\"wp-image-26137\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2026\/03\/Shopify_Whatsapp_chat_attributes_-1-1024x354.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2026\/03\/Shopify_Whatsapp_chat_attributes_-1-300x104.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2026\/03\/Shopify_Whatsapp_chat_attributes_-1-768x265.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2026\/03\/Shopify_Whatsapp_chat_attributes_-1.png 1054w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can customize the following in the Shopify WhatsApp Chat Button:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>WhatsApp number (including country code without +)<\/li>\n\n\n\n<li>Message text<\/li>\n\n\n\n<li>Button position (left or right)<\/li>\n\n\n\n<li>Button color<\/li>\n\n\n\n<li>Close button color<\/li>\n\n\n\n<li>Button CTA text<\/li>\n\n\n\n<li>Show button or not (true or false)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In the code, you can also change the logo image of WhatsApp by modifying the source in this snippet:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&lt;img src=\u201dhttps:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/08\/whatsapp-logo-example.png\u201d alt=\u201dWhatsApp Logo\u201d&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We strongly recommend uploading a logo image to your Shopify CDN and replacing the above link.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once you\u2019re done with the changes, save the file. The Shopify WhatsApp Chat Button will appear on the frontend. Likewise you can also learn to&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/how-to-add-whatsapp-share-button-to-shopify\/\">add Whatsapp Share Button to Shopify<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is how it looks:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/08\/shopify-whatsapp-chat-button-768x478-1-1.png\" alt=\"shopify whatsapp chat button\" class=\"wp-image-51035\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Voila!   You\u2019ve successfully added the WhatsApp Chat Button to your Shopify store.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-the-best-way-to-add-whatsapp-chat-to-shopify\">What is the Best Way to Add WhatsApp Chat to Shopify?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Is manually adding the code the best method for Shopify WhatsApp Chat? Probably not. The reason is that although it is easy, it requires basic technical knowledge; otherwise, things can get messy. Not an advisable method for ordinary store owners.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Integrating the WhatsApp chat app enables you to offer real-time customer support, boosting engagement and conversion rates by providing instant assistance directly through the platform millions already use daily.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The&nbsp; <a target=\"_blank\" href=\"https:\/\/apps.shopify.com\/mit-whatsapp-widgets\" rel=\"noreferrer noopener\">MIT WhatsApp Widgets: 4 in 1 <\/a>app for Shopify is the best alternative.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It comes with a fully customizable WhatsApp chat widget, which you can add without any coding or technical requirements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The app allows you to quickly:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add WhatsApp chat button to Shopify<\/li>\n\n\n\n<li>Add a dedicated agent to manage the conversations<\/li>\n\n\n\n<li>Customize the color and add a pre-defined WhatsApp text<\/li>\n\n\n\n<li>Hide the WhatsApp chat icon on specific product pages<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Install and try the app now!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div class=\"meetanshi-cta\">\r\n<div class=\"cta-content-wrapper\">\r\n<span>Shopify WhatsApp Chat<\/span>\r\n<p>Connect with shoppers on WhatsApp to offer real-time solutions and manage queries.<\/p>\r\n<a href=\"https:\/\/meetanshi.com\/shopify-whatsapp-chat.html\" target=\"_blank\" class=\"btn-primary\">Connect Now <\/a>\r\n<\/div>\r\n<div class=\"cta-image-new\">\r\n<img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/shopify-whatsapp-chat.png\" alt=\"Shopify WhatsApp Chat\">\r\n<\/div>\r\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A Shopify WhatsApp Chat button helps customers message you directly (without saving your number.) It is a helpful feature, especially for mobile phone users. But&nbsp;how&#8230;<\/p>\n","protected":false},"author":32,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[787],"tags":[],"class_list":["post-2297","post","type-post","status-publish","format-standard","hentry","category-shopify"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=2297"}],"version-history":[{"count":16,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2297\/revisions"}],"predecessor-version":[{"id":26138,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2297\/revisions\/26138"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=2297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=2297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=2297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}