{"id":2345,"date":"2023-09-27T09:36:43","date_gmt":"2023-09-27T09:36:43","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/how-to-add-whatsapp-share-button-to-shopify\/"},"modified":"2025-11-20T18:05:24","modified_gmt":"2025-11-20T12:35:24","slug":"how-to-add-whatsapp-share-button-to-shopify","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/how-to-add-whatsapp-share-button-to-shopify\/","title":{"rendered":"How to Add a WhatsApp Share Button to Shopify?"},"content":{"rendered":"<div class=\"meetanshi-cta\">\r\n<div class=\"cta-content-wrapper\">\r\n<span>MIT WhatsApp Widgets<\/span>\r\n<p>Get 4 powerful WhatsApp widgets in one unified Shopify app.<\/p>\r\n<a href=\"https:\/\/apps.shopify.com\/mit-whatsapp-widgets\" target=\"_blank\" class=\"btn-primary\" rel=\"noopener\">Get App 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\/mit-whatsapp-widgets-4-in-1.png\" alt=\"MIT WhatsApp Widgets: 4 in 1\">\r\n<\/div>\r\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The WhatsApp Chat button makes product sharing easier for customers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this tutorial, you\u2019ll find the step-by-step method to add a WhatsApp Share button in Shopify.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-shopify-whatsapp-share-button\">What is Shopify WhatsApp Share Button?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In Shopify, the&nbsp;WhatsApp share button&nbsp;or link helps the customer quickly share the product via WhatsApp. It takes them to WhatsApp, where they can share the product with their contacts within a few clicks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Generally, the message contains product information such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Product Name<\/li>\n\n\n\n<li>Product Price<\/li>\n\n\n\n<li>Product Page URL<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">It makes product sharing a lot easier for customers. They can share the products with their family &amp; friends within a few clicks.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-add-whatsapp-share-to-shopify\">How to Add WhatsApp Share to Shopify \u2013 2 Methods<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are two ways you can add a WhatsApp Share button in Shopify:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Using an App:<\/strong>&nbsp;Use an app to add WhatsApp Share to Shopify. It is a quick and efficient method that does not require any coding expertise.<\/li>\n\n\n\n<li><strong>Manually:<\/strong>&nbsp;Add the WhatsApp Share code to your Shopify theme. It involves some basic coding.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let\u2019s go through each of the methods one by one.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-whatsapp-share-in-shopify-using-an-app\">Method #1: Add WhatsApp Share in Shopify Using an App<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can use a Shopify app to add the WhatsApp Share functionality.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And there are a lot of apps to do that.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use the MIT WhatsApp Widgets: 4 in 1 for Shopify, which includes a WhatsApp share widget. A simple and lightweight app that is fully customizable as per your requirements.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Install the app and activate the <strong>Share on WhatsApp Button widget<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"108\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/Activate-the-MIT-WhatsApp-Share-Widget-700x108.png\" alt=\"Activate the MIT WhatsApp Share Widget\" class=\"wp-image-17546\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/Activate-the-MIT-WhatsApp-Share-Widget-700x108.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/Activate-the-MIT-WhatsApp-Share-Widget-250x38.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/Activate-the-MIT-WhatsApp-Share-Widget-768x118.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/Activate-the-MIT-WhatsApp-Share-Widget-403x62.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/Activate-the-MIT-WhatsApp-Share-Widget-964x148.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/Activate-the-MIT-WhatsApp-Share-Widget-120x18.png 120w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/Activate-the-MIT-WhatsApp-Share-Widget.png 1456w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Then, within the app dashboard, add different settings and conditions to make your share button accessible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For the WhatsApp Share button settings:&nbsp;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set a default message that goes along with the product details<\/li>\n\n\n\n<li>Add the button color<\/li>\n\n\n\n<li>Select the type of WhatsApp icon with font style and position<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"542\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-Settings--700x542.png\" alt=\"WhatsApp Share button Settings\" class=\"wp-image-17554\" style=\"width:562px;height:auto\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-Settings--700x542.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-Settings--250x193.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-Settings--768x594.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-Settings--403x312.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-Settings--964x746.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-Settings--120x93.png 120w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-Settings-.png 1326w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Then, for the display conditions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the pages where you want to display the widget<\/li>\n\n\n\n<li>Enter the URL to exclude the page<\/li>\n\n\n\n<li>Add product-specific and customer-specific conditions&nbsp;<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"633\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-conditions-700x633.png\" alt=\"WhatsApp Share button conditions\" class=\"wp-image-17556\" style=\"width:520px;height:auto\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-conditions-700x633.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-conditions-250x226.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-conditions-768x695.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-conditions-403x365.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-conditions-964x872.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-conditions-120x109.png 120w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-conditions.png 1114w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Save all the settings and conditions, and you can see the WhatsApp Share Button on the set product page.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"348\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-on-product-page-700x348.png\" alt=\"WhatsApp Share button on product page\" class=\"wp-image-17548\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-on-product-page-700x348.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-on-product-page-250x124.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-on-product-page-768x382.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-on-product-page-1536x765.png 1536w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-on-product-page-403x201.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-on-product-page-964x480.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-on-product-page-120x60.png 120w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/09\/WhatsApp-Share-button-on-product-page.png 1828w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">The Shopify WhatsApp Share button will be displayed on the product pages. It lets the user easily share the products on WhatsApp.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Try&nbsp;<a href=\"https:\/\/apps.shopify.com\/mit-whatsapp-widgets\" target=\"_blank\" rel=\"noopener\">Meetanshi WhatsApp Share Widget<\/a> now!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"manually-add-whatsapp-share-button-to-shopify\">Method #2: Manually Add WhatsApp Share Button to Shopify<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can manually add the WhatsApp Share code to the Shopify theme. But you\u2019ll need some basic technical knowledge and liquid coding skills to customize the button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s the step-wise method to add the WhatsApp Share button to Shopify.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In your Shopify admin, go to&nbsp;<strong>Sales Channels &gt; Online Store Themes<\/strong>.<\/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\/09\/5_Go-to-online-store.png\" alt=\"Go to online store\" class=\"wp-image-35481\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">In the themes, click the [<strong>\u22ef<\/strong>] three dots left to the Customize button, and click \u201c<strong>Edit code<\/strong>\u201d from the menu.<\/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\/09\/6_Edit-theme-code.png\" alt=\"Edit Shopify theme code\" class=\"wp-image-35482\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">This will open the Shopify theme editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, find the liquid template file for the product page. Its name may vary as per the theme, but generally its product.liquid or product-page.liquid.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Copy the following code:<\/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=\"\">      &lt;!-- WhatsApp Share Button HTML -->\n      &lt;div>&lt;a class=\"btn btn-small\" href=\"https:\/\/api.whatsapp.com\/send?text=Check%20out%20this%20product:%20{{ product.title | url_encode }}%20for%20{{ product.price | money_with_currency }}%20at%20{{ shop.url }}{{ product.url }}\" target=\"_blank\" rel=\"noopener\">\n  Share on WhatsApp&lt;\/a>\n      &lt;\/div><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">And paste it at the appropriate place in the liquid file to add the WhatsApp Share button to Shopify.<\/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\/09\/7_Add-whatsapp-share-button-code.png\" alt=\"Add WhatsApp Share button to Shopify\" class=\"wp-image-35483\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">For example, here we are adding it below the section containing product tags, category, and SKU information.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Click \u201c<strong>Save<\/strong>\u201d to make the changes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Shopify WhatsApp Share button will be displayed on all product pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s what it looks like:<\/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\/09\/8_Shopify-whatsapp-share-button-on-frontend.png\" alt=\"Shopify WhatsApp Share button on Front end\" class=\"wp-image-35484\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">You can customize the code by changing the button class or declaring a new one in the theme.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-whatsapp-share-to-shopify-best-method\">Add WhatsApp Share to Shopify: Which is the Best Method?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The ultimate choice of option to add a WhatsApp Share button to Shopify depends on your specific needs and technical expertise.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is important to be cautious while adding a WhatsApp Share button manually via code. A little mishap can lead to broken layouts or chaos on the front end. The best way is to use the Meetanshi WhatsApp Share Button app.<\/p>\n\n\n<div class=\"meetanshi-cta\">\r\n<div class=\"cta-content-wrapper\">\r\n<span>MIT WhatsApp Widgets<\/span>\r\n<p>Get 4 powerful WhatsApp widgets in one unified Shopify app.<\/p>\r\n<a href=\"https:\/\/apps.shopify.com\/mit-whatsapp-widgets\" target=\"_blank\" class=\"btn-primary\" rel=\"noopener\">Get App 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\/mit-whatsapp-widgets-4-in-1.png\" alt=\"MIT WhatsApp Widgets: 4 in 1\">\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The WhatsApp Chat button makes product sharing easier for customers. In this tutorial, you\u2019ll find the step-by-step method to add a WhatsApp Share button in&#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-2345","post","type-post","status-publish","format-standard","hentry","category-shopify"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2345","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=2345"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2345\/revisions"}],"predecessor-version":[{"id":24410,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2345\/revisions\/24410"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=2345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=2345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=2345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}