If you are here to look for a method, that allows you to add an Order on WhatsApp button right next to the Add to Cart button on your Shopify product page.
Yes, you have landed at the right place. In this article, I will guide you through increasing your conversion rate by adding a simple WhatsApp button.
Table of contents
Backup your Shopify Store Before Making any changes in the code
As we will be editing the theme code, we must save a copy of our Shopify store. If you are not tech-savvy or hate programming, you don’t have to worry about anything. I will be guiding you from the very first step to the end.
Steps for taking backup of your store
- Step 1: Go to your Shopify Admin panel and click “Themes” under “Sales Channel”.
- Step 2: Click three dots, beside the “Customize” button.
- Step 3: Select “Download theme file” and then click “Send email”.
Adding an Order on WhatsApp button in your Shopify store
The easiest method to add an Order on WhatsApp button to your product page is to place the code in your product page template. The benefit is, that you can control on which pages this button appears.
Read More about Web Development
Steps for adding custom code to the product page
- Step 1: Go to your Shopify Admin panel and click “Themes” under “Sales Channel”.
- Step 2: Click the “Customize” button. An editor will open in front of you, select the Default Product Page from the top dropdown menu.
- Step 3: From the left sidebar, add a new HTML section just below the BUY BUTTONS.
- Step 4: Paste the code below in the HTML section and replace your phone number.
<!-- WhatsApp Button -->
<div style="margin-left:10px; margin-bottom:-7px">
<a
href="https://api.whatsapp.com/send?phone=14400000000&text=Hello,%20I%20am%20interested%20in%20this%20product:%20{{ product.title }}%20({{ shop.url }}{{ product.url }})%20for%20{{ product.price | money }}"
target="_blank"
><img
src="https://scontent.whatsapp.net/v/t39.8562-34/420077459_703742575180618_3955965302853713788_n.png"
>
</a>
</div>
<style>
form.product-single__form{display:flex !important}.btn--full.add-to-cart{width:90%} @media (max-width:520px){.btn--full.add-to-cart{width:65%}}
</style>Final Look after pasting the code
You can easily adjust the layout and styling of this button using CSS. Make sure to take a backup of your theme before adding any CSS or liquid code because it can break the structure of your product page.
Never forget to change the Phone number from this code as highlighted in red.
If you face any error, or want me to set this button for you, send me a message on Facebook: www.facebook.com/devumairjaved