How to Add a Floating WhatsApp Chat Button to Your Shopify Store

Adding a WhatsApp chat button to your Shopify store is a great way to improve communication with your customers, answer questions quickly, and boost conversions.

In this tutorial, we’ll create a floating WhatsApp button that stays visible as visitors browse your site — all editable right inside the Shopify Theme Editor.

🧩 Step 1: Create a New Section in Your Shopify Theme

1. From your Shopify Admin, go to Online Store → Themes → Edit Code
2. Under the Sections folder, click Add a new section
3. Name it something like: zhd-whatsapp.liquid
4. Paste the following complete code into your new section file:

{% raw %}
{% schema %}
{
  "name": "ZHD WhatsApp",
  "tag": "section",
  "class": "whatsapp-chat-section",
  "settings": [
    {
      "type": "text",
      "id": "whatsapp_number",
      "label": "WhatsApp Number (with country code)",
      "default": "61400000000"
    },
    {
      "type": "text",
      "id": "default_message",
      "label": "Default Message",
      "default": "Hi eStoresMaker, I have a question about your products."
    },
    {
      "type": "image_picker",
      "id": "icon_image",
      "label": "WhatsApp Icon"
    }
  ],
  "presets": [
    {
      "name": "ZHD WhatsApp"
    }
  ]
}
{% endschema %}

{% if section.settings.icon_image != blank %} {% else %} {% endif %}

{% endraw %}

⚙️ Step 2: Customize the WhatsApp Button in Theme Editor

1. Go to Online Store → Customize
2. Click Add Section → ZHD WhatsApp
3. Fill out the following fields:
   • WhatsApp Number: Enter your number with the country code (e.g. 61400000000)
   • Default Message: This text will appear automatically when someone clicks the button
   • WhatsApp Icon: Upload a custom icon (optional — a default one is included)

💡 Pro Tip: Use an SVG icon for the sharpest display quality on all devices.

📱 Step 3: Test on Desktop and Mobile

Preview your store and test:

• Does the button appear fixed on the right side?
• Does it open WhatsApp with your default message?
• Is it positioned correctly on both desktop and mobile?

If yes — your setup is complete! 🎉

🌟 Why This Setup Is Better Than Apps

• ✅ No monthly cost — it’s 100% custom code
• ✅ Fully editable via Shopify’s Theme Customizer
• ✅ Lightweight and fast, with no extra scripts
• ✅ Easy to reposition or disable anytime

🧾 Final Thoughts

This lightweight, responsive WhatsApp integration helps you connect with customers instantly — without relying on third-party apps. It’s simple, customizable, and perfect for stores that want to keep communication open and frictionless.

Whether you’re offering support, sales help, or order updates — this floating WhatsApp button is a must-have for modern Shopify stores.

Created by Zahidul Islam – Shopify Developer

Written by Zahidul Islam | Shopify Custom Design Tutorials