Adding WhatsApp Chat Button to Shopify (With Coding or Without)

Certainly! Here's a rewrite that adheres to Google Content Policy:

"A WhatsApp Chat button on your Shopify store facilitates direct messaging from customers without the need to save your number. This feature is particularly beneficial for mobile users.

Adding a WhatsApp Chat button to Shopify is simple and doesn't require hiring a developer. You can do it yourself.

In this tutorial, we'll walk you through the step-by-step process of integrating WhatsApp Chat into your Shopify store. Feel free to use the provided code to easily add the WhatsApp Chat button."

What is a WhatsApp Chat Button?

A WhatsApp Chat Button is a tool that allows website visitors to start a conversation with a business directly on WhatsApp. It typically appears as an icon or text button containing a link to initiate a WhatsApp chat, including the business's number and a pre-set message.

The primary advantage is that visitors can engage in a chat without needing to save the business's number. When clicked, the button opens the WhatsApp Chat screen with the business's number and the predefined message.

Typically, you'll find this button positioned at one of the bottom corners of the webpage.

Below is an example of a WhatsApp Chat Button:

Now, let's discover the process of integrating WhatsApp into Shopify.

How to Add WhatsApp Chat Button to Shopify?

In Shopify, there are two methods to add a WhatsApp Chat button:

1. Adding Code Manually: This involves inserting a WhatsApp Chat Link button into the Shopify theme.liquid file.

2. Using Shopify App: You can also opt to install and configure a Shopify WhatsApp Chat button app.

Both options are simple to implement, and you can choose whichever suits your preference.

Now, let's explore the step-by-step process of manually adding a WhatsApp Chat button to Shopify.

Step 1: Go to Shopify Theme > Edit

To begin, log in to your Shopify admin account, then navigate to Sales channels > Online Store > Themes.

Next, click on the three dots [⋯] located next to the Customize button, and select Edit Code.

This action will open the Shopify theme editor.

Step 2: Add WhatsApp Button Code

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

This file is where we'll insert the WhatsApp Chat button code, ensuring it applies to the entire store.

Copy code:

{% assign whatsappNumber = "923064846269" %}
{% 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 us!  {% if showCloseButton %}
×
{% endif %}
 

Paste the code before the </body> tag inside the theme.liquid file.

Step 3: Customize WhatsApp Button in Shopify

Before saving, ensure to customize the code with your preferred phone number and message. You can also adjust other variables to personalize the Shopify WhatsApp Chat Button.

These variables are declared at the top of the code.

You have the flexibility to customize various aspects of the Shopify WhatsApp Chat Button:

1. WhatsApp number (including country code without +)

2. Message text

3. Button position (left or right)

4. Button color

5. Close button color

6. Button call-to-action (CTA) text

7. Show button or not (true or false)

Additionally, within the code, you can modify the logo image of WhatsApp by adjusting the source in this snippet:

<img src="https://meetanshi.com/blog/wp-content/uploads/2023/08/whatsapp-logo-example.png" alt="WhatsApp Logo">

We strongly recommend uploading a logo image to your Shopify Content Delivery Network (CDN) and replacing the above link with it.

After making these adjustments, save the file. The Shopify WhatsApp Chat Button will then be visible on the frontend. Similarly, you can also explore adding a WhatsApp Share Button to Shopify.

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

Manually adding the code for Shopify WhatsApp Chat may not be the optimal method. While it's simple, it demands some technical know-how, making it less suitable for novice store owners. 

Instead, consider Meetanshi WhatsApp Chat app for Shopify. It's a superior alternative, offering seamless integration at no cost. With this app, you can effortlessly:

- Add WhatsApp Chat Button to Shopify

- Customize the admin mobile number

- Set a personalized WhatsApp message text

- Adjust the button's position on the frontend

Install and try the app now for free to enhance your Shopify store's communication capabilities!