How to Add a WhatsApp Share Button to Shopify?
Free WhatsApp Share App
Quickly add WhatsApp Share button to Shopify. No coding required!
The WhatsApp Chat button makes product sharing easier for the customers.
In this tutorial, you’ll find the step-by-step method to add a WhatsApp Share button in Shopify.
Table of Contents:
- What is Shopify WhatsApp Share Button?
- How to Add WhatsApp Share to Shopify – 2 Methods
- Method #1: Add WhatsApp Share in Shopify Using an App
- Method #2: Manually Add WhatsApp Share Button to Shopify
- Add WhatsApp Share to Shopify: Which is the Best Method?
But first, let’s start with some basics.
What is Shopify WhatsApp Share Button?
In Shopify, the WhatsApp share button 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.
Generally, the message contains product information such as:
- Product Name
- Product Price
- Product Page URL
It makes product sharing a lot easier for customers. They can share the products with their family & friends within a few clicks.
How to Add WhatsApp Share to Shopify – 2 Methods
There are two ways you can add WhatsApp Share button in Shopify:
- Using an App: Use an app to add WhatsApp Share to Shopify. It is a quick and efficient method that does not require any coding expertise.
- Manually: Add the WhatsApp Share code to your Shopify theme. It involves some basic coding.
Now, let’s go through each of the methods one by one.
Method #1: Add WhatsApp Share in Shopify Using an App
You can use a Shopify app to add the WhatsApp Share functionality.
And there are a lot of apps to do that.
Meetanshi WhatsApp Share app is a simple and lightweight app to do that. It is totally free to install and use. Here’s the quick way to use it:
Install the Meetanshi WhatsApp Share from the Shopify app store.
To allow the app to display WhatsApp Share button, you’ll need to enable it from the theme editor.
In the app configuration, click “Go to Theme Editor” and enable the WhatsApp Button app as shown below.
Click “Save” and move back to the configuration part.
In the app configuration, enable the app and configure the following settings:
- Custom Message: Enter a custom message that is sent when the customers click the WhatsApp share button.
- Include Product Name: Select “Yes” to include the product name in the message.
- Include Product Description: Select “Yes” to include the product description in the message.
- Include Product Price: Select “Yes” to include the product price in the message.
Click “Save.”
The Shopify WhatsApp Share button will be displayed on the product pages. It lets the user easily share the products on WhatsApp.
Try Meetanshi WhatsApp Share app now, for free!
Method #2: Manually Add WhatsApp Share Button to Shopify
You can manually add the WhatsApp Share code to the Shopify theme. But you’ll need some basic technical knowledge and liquid coding skills to customize the button.
Here’s the step-wise method to add the WhatsApp Share button to Shopify.
In your Shopify admin, go to Sales Channels > Online Store Themes.
In the themes, click the [⋯] three dots left to the Customize button, and click “Edit code” from the menu.
This will open the Shopify theme editor.
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.
Copy the following code:
1 2 3 4 |
<!-- WhatsApp Share Button HTML --> <div><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"> Share on WhatsApp</a> </div> |
And paste it at the appropriate place in the liquid file to add the WhatsApp Share button to Shopify.
For example, here we are adding it below the section containing product tags, category, and SKU information.
Click “Save” to make the changes.
The Shopify WhatsApp Share button will be displayed on all product pages.
Here’s what it looks like:
You can customize the code by changing the button class or declaring a new one in the theme.
If you need any help with customization, feel free to reach out to our Shopify expert developers.
Related Reads:
Add WhatsApp Share to Shopify: Which is the Best Method?
The ultimate choice of option to add WhatsApp Share button to Shopify depends on your specific needs and technical expertise.
It is important to be cautious while adding a WhatsApp Share button manually via code. 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.
It’s simple, easy, and completely free to install. Try now!
Prev
How to Solve “There Was a Category Move Error” in Magento 2
Solved: Magento Newsletter Unsubscribe Link Not Working
Next