fbpx

Add WhatsApp button to Shopify Manually

This tutorial will teach you

  • How to add the WhatsApp icon to your Shopify project so your customers can click the icon and send a message to you by WhatsApp
  • How to add a field in the settings of Shopify to update the WhatsApp phone number

Disclaimer: This tutorial involves making edits to the theme file code. Please do this only if you have some experience in doing code edits. Also before starting to do this, make a duplicate of theme files in case if you have to restore them.

How to duplicate themes?

Simple Method to add WhatsApp button to Shopify Manually – Hard Coding

  • Go to Sales Channels on your left sidebar
  • Click on Online Store
  • Click on the Actions button on your selected theme
  • Click on the Edit Code option
Shopify Edit Code
  • It will open your code editor. From the left side list of files scroll down to the Assets section
  • Open your CSS file. Normally it will be theme.scss.liquid. If you have a custom theme, find your CSS file
  • Scroll all the way 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 any of the theme section. Preferably footer (footer.liquid)and add the following code unit at the beginning of the file pushing existing code down. This code unit will add the icon. You can replace the 971000000000 number with your WhatsApp number.

Points to note:

  • 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
/* 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="https://cdn.shopify.com/s/files/1/0102/3560/9184/files/whastapp-new-icon.png" width="150">
  </a>
</div>

/* Lucid Polygon WhatsApp Icon END ------------------------------------------------ */

Once the above code is added, save the file.

Your Shopify is now equipped with an icon using which your customers can contact you to send messages to the preferred WhatsApp number. You can now preview the theme to find the WhatsApp icon.

In the future, if you have to edit the number, you have to come back to this code and edit the number.

Complete Method to add WhatsApp button to Shopify Manually – Hard Coding

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 Config section of 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": "https://cdn.shopify.com/s/files/1/0102/3560/9184/files/whastapp-new-icon.png"
      },
      {
        "type": "text",
        "id": "whatsapp_icon_text",
        "label": "Whatsapp Text",
        "default": "Hi, I am interested in this."
      }
    ]
  }  
]
  • 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
<div class="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>

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

Shopify Custom Setting

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 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.

Leave a Comment