Add WhatsApp button to Shopify Manually

This tutorial will teach you the following things:

How to add a WhatsApp icon to your Shopify website
Your customers can click this icon and send a message to you via WhatsApp
How to add a new field to the theme settings to update the WhatsApp phone number without having to edit the code

Disclaimer: This tutorial involves code editing. Proceed with caution. Create a copy of your theme before making code changes. How to create a copy of your theme?

Simple Method to add WhatsApp button to Shopify Manually (Hardcoding)

Go to Sales Channels > Online Store > Themes > Actions > Edit Code

Shopiy Dawn Theme Edit Code Screenshot

It will open your code editor.
From the left side list of files scroll down to the Assets section.
Open your CSS file. Generally, it will be named theme.scss.liquid. If you have a custom theme, find your CSS file.
Scroll to the bottom and add the following code unit and save the file.

/* Lucid Polygon WhatsApp Icon BEGIN */
.lp-whatsapp-icon-bar {
  position: fixed;
  top: 90%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 99;
}
.lp-whatsapp-icon-bar a {
  display: block;
  text-align: center;
  transition: all 0.3s ease;
}
/* Lucid Polygon WhatsApp Icon END */

Adding the code for Shopify Icon / Button

Open the footer section file of the theme (footer.liquid).
Add the following code at the beginning of the file pushing the existing code down.
This code unit will add the icon.

/* Lucid Polygon WhatsApp Icon BEGIN */
<div class="lp-whatsapp-icon-bar">
    <a href="https://api.whatsapp.com/send?phone=971000000000&text={{canonical_url}}%20I'm%20interested%20in%20this!">
        <img src="LINK" width="150">
    </a>
</div>
/* Lucid Polygon WhatsApp Icon END */

You can replace the 971000000000 number with your WhatsApp number.
- Use international code with country code at the beginning.
- Do not add a + in the beginning. If your country code is +971 use only 971 without a plus symbol.
Here is the image of the icon we will be using. You can download this icon and upload it to your Shopify website in the files sections (Settings > Files )
You can copy that link and use it in the code above. Replace the LINK in <img src="LINK" width="150"> with the link you get from Shopify file upload.

Once the above code is added, save the file.
Done. Now your Shopify theme has a WhatsApp icon.
Preview the theme to see if everything works as expected.
In the future,
- if you have to edit the number, you have to come back to this code and edit the number.
- If you want to change the icon image, you can upload the new icon to Shopify and replace the link.

Add a field to the theme settings to update the WhatsApp number

Having to edit code every time you have to edit/update your WhatsApp number is not a great practice. Instead, it would be better if we have a place in the Shopify Settings to update the phone number without editing the code. Isn’t it?

Adding a Settings Option to Update WhatsApp phone number

Scroll down to the Config ****section of the code editor
Open a file named settings_schema.json
Scroll all the way down to the end
The last line will be a closing square bracket – ]. Just before that will be a closing flower brack – }

}
    ]

Add a comma after the flower bracket and copy-paste the following code

},
     {
     "name": "WhatsApp",
     "settings": [
     {
     "type": "text",
     "id": "whatsapp_icon_number",
     "label": "Whatsapp Number",
     "default": "971000000000"
     },
     {
     "type": "text",
     "id": "whatsapp_icon_image",
     "label": "Whatsapp Image Link",
     "default": "LINK"
     },
     {
     "type": "text",
     "id": "whatsapp_icon_text",
     "label": "Whatsapp Text",
     "default": "Hi, I am interested in this."
     }
     ]
     }
    ]

Replace the LINK with the image link you got earlier.
Save the file.
Now let us amend the icon code that we did earlier in the footer section.
Find that piece of code and replace it with the following code.

/* Lucid Polygon WhatsApp Icon BEGIN */
<div class="lp-whatsapp-icon-bar">
 <a href="https://api.whatsapp.com/send?phone={{settings.whatsapp_icon_number}}&text={{canonical_url}}{{settings.whatsapp_icon_text}}">
     <img src="{{settings.whatsapp_icon_image}}" width="150">
    </a>
</div>
/* Lucid Polygon WhatsApp Icon END */

As you can see we have now replaced the hard-coded sections with the variables from settings.

Your Shopify is now equipped with an icon using which your customers can contact you to send messages to the preferred WhatsApp number. And you have the option in theme settings to change the WhatsApp phone number, the icon image, and text anytime you wish.

You can now preview the theme to find the WhatsApp icon and go view the theme settings to find the option.

Lucid Polygon – Shopify Expert Developer in Dubai, UAE

I am a Shopify Expert with experience in building many successful stores in Dubai, UAE. I can set it up from the idea till launch including the payment gateway. Read more about my Shopify Service.