The WhatsApp Chat button makes product sharing easier for customers.
In this tutorial, you’ll find the step-by-step method to add a WhatsApp Share button in Shopify.
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 a 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.
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.
Install the app and activate the Share on WhatsApp Button widget.
Then, within the app dashboard, add different settings and conditions to make your share button accessible.
For the WhatsApp Share button settings:
- Set a default message that goes along with the product details
- Add the button color
- Select the type of WhatsApp icon with font style and position
Then, for the display conditions:
- Select the pages where you want to display the widget
- Enter the URL to exclude the page
- Add product-specific and customer-specific conditions
Save all the settings and conditions, and you can see the WhatsApp Share Button on the set product page.
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 Widget now!
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:
<!-- 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.
Add WhatsApp Share to Shopify: Which is the Best Method?
The ultimate choice of option to add a 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.
