How to Add WhatsApp Chat Button to Shopify? [With & Without Coding]

By Vishal Dave|

Updated on: Jan 04,2024|

Shopify,

Easily Add WhatsApp Chat to Shopify

No-code app to add WhatsApp Chat button to your store. Totally FREE!

Install Now

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 how to add WhatsApp Chat button to Shopify?

It’s pretty straightforward.

You can do this yourself, too—no need to hire a developer.

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.

Table of Contents

What is a WhatsApp Chat Button?
How to Add WhatsApp Chat Button to Shopify?
What is the Best Way to Add WhatsApp Chat to Shopify?

Recently, we also covered an article on How to Add Facebook Chat to Shopify that you’d love checking out!

What is a WhatsApp Chat Button?

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.

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.

Generally, it is present at any of the bottom corners.

Here’s an example of a WhatsApp Chat Button:

Now, let’s learn how to add WhatsApp to Shopify.

How to Add WhatsApp Chat Button to Shopify?

In Shopify, you can add a WhatsApp Chat button in two ways:

Add Code Manually – Add a WhatsApp Chat Link button to the Shopify theme.liquid file
Using Shopify App – Install and configure Shopify WhatsApp Chat button app

You can choose either of the options; both are straightforward.

Let’s see the stepwise method to manually add a Shopify WhatsApp Chat button.

Step 1: Go to Shopify Theme > Edit

Log into your Shopify admin, and go to Sales channels > Online Store > Themes.

Now, click the [⋯] three dots beside the Customize button and Edit Code.

Edit theme option in Shopify

It will open the Shopify theme editor.

Step 2: Add WhatsApp Button Code

In the Shopify theme editor, navigate to Layout > theme.liquid file.

We will put the WhatsApp Chat button code in this file, which will apply to the entire store.

Copy this code:

{% assign whatsappNumber = "917202997997" %}
{% assign Message = "Hello Meetanshi, I need your help!" %}
{% assign buttonPosition = "right" %}
{% assign buttonColor = "#25d366" %}
{% assign closeButtonColor = "black" %}
{% assign ctaText = "WhatsApp us" %}
{% assign marginBottom = "1.25em" %}
{% assign marginLeft = "1.25em" %}
{% assign marginRight = "1.25em" %}
{% assign cornerRadius = "2.5em" %}
{% assign zIndex = "999999" %}
{% assign showCloseButton = true %}  {# Set this to false to hide the close button #}

{% if buttonPosition == "left" %}
  {% assign positionStyle = "left: 0;" %}
{% else %}
  {% assign positionStyle = "right: 0;" %}
{% endif %}

.whatsapp-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625em;
    background-color: {{ buttonColor }};
    border-radius: {{ cornerRadius }};
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
  }

.whatsapp-button img {
    height: 2em;
    width: auto;
    margin-right: 0.3125em;
  }

.close-button {
    position: absolute;
    top: -0.625em;
    right: -0.625em;
    display: {{ showCloseButton | default: true | append: "none" }};
    background-color: red;
    color: white;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    text-align: center;
    line-height: 1.25em;
    font-weight: bold;
    cursor: pointer;
  }
</style>
<script>
  function hideWhatsAppButton() {
    document.querySelector('.whatsapp-button-container').style.display = 'none';
  }
</script>
<div class="whatsapp-button-container">

<a class="whatsapp-button" href="https://api.whatsapp.com/send?phone={{ whatsappNumber }}&amp;text={{ Message | url_encode }}"> <img src="https://meetanshi.com/blog/wp-content/uploads/2023/08/whatsapp-logo-example.png" alt="WhatsApp Logo" /> Whatsapp us! </a> {% if showCloseButton %}
<div class="close-button">×</div>
{% endif %}

</div>

{% assign whatsappNumber = "917202997997" %}

{% assign Message = "Hello Meetanshi, I need your help!" %}

{% assign buttonPosition = "right" %}

{% assign buttonColor = "#25d366" %}

{% assign closeButtonColor = "black" %}

{% assign ctaText = "WhatsApp us" %}

{% assign marginBottom = "1.25em" %}

{% assign marginLeft = "1.25em" %}

{% assign marginRight = "1.25em" %}

{% assign cornerRadius = "2.5em" %}

{% assign zIndex = "999999" %}

{% assign showCloseButton = true %} {# Set this to false to hide the close button #}

{% if buttonPosition == "left" %}

{% assign positionStyle = "left: 0;" %}

{% else %}

{% assign positionStyle = "right: 0;" %}

{% endif %}

<style>

.whatsapp-button-container {

position: fixed;

bottom: {{ marginBottom }};

margin: 0 {{ marginLeft }} {{ marginRight }};

z-index: {{ zIndex }};

cursor: pointer;

}

.whatsapp-button {

display: flex;

align-items: center;

justify-content: center;

padding: 0.625em;

background-color: {{ buttonColor }};

border-radius: {{ cornerRadius }};

text-decoration: none;

font-weight: bold;

color: #FFFFFF;

}

.whatsapp-button img {

height: 2em;

width: auto;

margin-right: 0.3125em;

}

.close-button {

position: absolute;

top: -0.625em;

right: -0.625em;

display: {{ showCloseButton | default: true | append: "none" }};

background-color: red;

color: white;

width: 1.25em;

height: 1.25em;

border-radius: 50%;

text-align: center;

line-height: 1.25em;

font-weight: bold;

cursor: pointer;

}

</style>

function hideWhatsAppButton() {

document.querySelector('.whatsapp-button-container').style.display = 'none';

}

</script>

<a class="whatsapp-button" href="https://api.whatsapp.com/send?phone={{ whatsappNumber }}&text={{ Message | url_encode }}"> <img src="https://meetanshi.com/blog/wp-content/uploads/2023/08/whatsapp-logo-example.png" alt="WhatsApp Logo" /> Whatsapp us! </a> {% if showCloseButton %}

{% endif %}

</div>

And paste it before the </body> tag inside the theme.liquid file.

Step 3: Customize WhatsApp Button in Shopify

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.

These variables are declared at the top of the code.

You can customize the following in the Shopify WhatsApp Chat Button:

WhatsApp number (including country code without +)
Message text
Button position (left or right)
Button color
Close button color
Button CTA text
Show button or not (true or false)

In the code, you can also change the logo image of WhatsApp by modifying the source in this snippet:

We strongly recommend uploading a logo image to your Shopify CDN and replacing the above link.

Once you’re done with the changes, save the file. The Shopify WhatsApp Chat Button will appear on the frontend. Likewise you can also learn to add Whatsapp Share Button to Shopify.

Here is how it looks:

Voila! 🥳 You’ve successfully added the WhatsApp Chat Button to your Shopify store.

What is the Best Way to Add WhatsApp Chat to Shopify?

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, or else things can get messy. Not an advisable method for ordinary store owners.

Meetanshi WhatsApp Chat app for Shopify is the best alternative.

It is FREE to use & enables easy Shopify WhatsApp Chat integration.

The app allows you to quickly:

Add WhatsApp Chat Button to Shopify
Customize the admin mobile number
Set a custom WhatsApp message text
Change the position of the button on the frontend

Install and try the app now for free!

Related Post:

(based on 12 Reviews)

Vishal Dave

He is a Content Writer at Meetanshi with 3+ years of experience. His main responsibility is to simplify complex subjects using an easy-to-understand language. Digital marketing, E-commerce, and Technology are his domains of expertise.

How to Edit CSS In Shopify – A Complete Guide

Ecommerce Mobile App Development: What Is It & Best Companies

How to Add WhatsApp Chat Button to Shopify? [With & Without Coding]

What is a WhatsApp Chat Button?

How to Add WhatsApp Chat Button to Shopify?

Step 1: Go to Shopify Theme > Edit

Step 2: Add WhatsApp Button Code

Step 3: Customize WhatsApp Button in Shopify

What is the Best Way to Add WhatsApp Chat to Shopify?

Prev

Next

8 Best Shopify Automation Apps [Maximize Efficiency]

9 Best Shopify Apps For Retargeting [Top Choice]

Leave a Reply Cancel reply

Customer Service

Quick Links

Address

Client's Love

How to Add WhatsApp Chat Button to Shopify? [With & Without Coding]

What is a WhatsApp Chat Button?

How to Add WhatsApp Chat Button to Shopify?

Step 1: Go to Shopify Theme > Edit

Step 2: Add WhatsApp Button Code

Step 3: Customize WhatsApp Button in Shopify

What is the Best Way to Add WhatsApp Chat to Shopify?

Prev

Next

8 Best Shopify Automation Apps [Maximize Efficiency]

9 Best Shopify Apps For Retargeting [Top Choice]

Leave a Reply Cancel reply

Customer Service

Quick Links

Address

Client's Love

Share

Copy short link