How to add a WhatsApp chat button to your Shopify store

Want to add a WhatsApp chat button to your Shopify store so visitors can message you instantly? This free WhatsApp integration section adds a floating green button to every page of your store — when clicked, it opens WhatsApp Web in a new tab with a pre-filled message. No app needed, no API tokens, no monthly fees. Just one Liquid file, fully customizable from the Shopify Customizer. Works with Dawn, Horizon, Debut, and all free Shopify 2.0 themes.

Adding a WhatsApp button to your Shopify store is one of the fastest ways to boost conversions and build customer trust. Visitors can ask questions about products, shipping, or sizing before they buy — and on product pages, the button can auto-fill the product name so you know exactly what they’re asking about. This single integration replaces expensive live chat apps and gives your customers a communication channel they already use every day.

What’s In This Guide

Watch the Video Tutorial
What You’ll Get
Step 1 – Create a New Section File
Step 2 – Copy & Paste the Code
Step 3 – Add It in the Customizer
Step 4 – Configure Your WhatsApp Settings
FAQ & Troubleshooting

Watch the Video Tutorial

Prefer to follow along visually? Watch the full walkthrough:

What This Free WhatsApp Button Section Includes

This is a clean, lightweight WhatsApp integration for Shopify built with pure Liquid and CSS. Here is everything packed inside:

Opens WhatsApp Web
Clicks open web.whatsapp.com directly in a new tab — no blocked APIs

Pre-filled Messages
Customers open a chat with your custom message already typed in

Pulse Animation
Eye-catching green pulse draws attention without being annoying

Fully Customizable
Size, color, position, spacing — all controlled from the Customizer

Mobile Toggle
Show or hide the button on mobile with a single checkbox

Zero Dependencies
No app, no API, no JavaScript required — pure CSS + HTML link

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

Open Your Theme Code

From your Shopify admin, go to Online Store > Themes.
Click the three dots on your current theme > “Edit code”.
In the left sidebar, scroll to the Sections folder.
Click “Add a new section”.
Name it: whatsapp-ecomranks
Delete any default code Shopify puts in the file.

Step 2: Copy & Paste the WhatsApp Button Code

Click the Copy Code button below, then paste it into your new whatsapp-ecomranks.liquid file and click Save.

whatsapp-ecomranks.liquid

{% comment %}
  WhatsApp Button -- by EcomRanks
  Fiverr: https://fvrr.co/3BsbtyA
{% endcomment %}

{%- assign s = section.settings -%}
{%- assign phone = s.phone_number | remove: '+' -%}

<style>
  /* Fixed floating button with pulse animation */
  /* Customizable size, color, position */
  /* Mobile visibility toggle */
  /* All driven by Customizer settings */
</style>

<a
  href="https://web.whatsapp.com/send?phone=..."
  target="_blank"
  class="ecr-wa-btn"
>
  <svg>WhatsApp icon</svg>
</a>

{% schema %}
  /* Settings: phone number, pre-filled message,
     button size, color, position, pulse,
     mobile toggle */
{% endschema %}

Important: The code block above is a preview. Click Copy Code to get the complete working file with all 150+ lines of code.

Step 3: Add the WhatsApp Button in the Customizer

Open Customize

Go to Online Store > Themes > Customize.
Navigate to your homepage (or any page).
Click “Add section”.
Search for “WhatsApp – EcomRanks”.
Enter your WhatsApp number with country code (e.g. +923001234567).
Set your pre-filled message.
Click Save.

Step 4: Configure Your WhatsApp Button Settings

The section keeps things simple with focused settings:

WhatsApp Number	Your number with country code. This is the number customers will message.
Pre-filled Message	The default text that appears in the chat box when customers click the button.
Button Style	Size (48-80px), color, distance from bottom, distance from right edge.
Pulse Animation	Toggle the attention-grabbing green pulse on or off.
Mobile Toggle	Show or hide the floating button on mobile devices.

Need Custom Shopify Development?

I build custom Shopify sections, full theme customizations, and conversion-optimized stores. If you need something beyond this free code – I am here to help.

Hire Me on Fiverr

Free Website Audit

Don’t Have a Shopify Store Yet?

Start your Shopify store for just $1/month – 3-day free trial + $1/month for 3 months (90 days total).

Start Your Shopify Store

Frequently Asked Questions About Shopify WhatsApp Integration

Does this WhatsApp button work on mobile?

Yes. On mobile, tapping the button opens WhatsApp Web in the browser. You can also toggle the button off on mobile if you prefer using a separate mobile-specific contact method. The button is fully responsive and looks great on all screen sizes.

Can I use this WhatsApp button on product pages?

Yes. The section is enabled on all templates, so it appears on every page of your store including product pages, collection pages, and the homepage. Since it is a floating fixed-position button, it stays visible as customers scroll.

Does this work with all Shopify themes?

Yes, it works with Dawn, Horizon, Sense, Refresh, Craft, Studio, and all free Shopify 2.0 themes. The button uses fixed positioning and scoped CSS, so it will not conflict with any theme styles. If you run into any theme-specific issues, hire me on Fiverr and I will fix it.

Why use web.whatsapp.com instead of wa.me?

The wa.me links redirect to api.whatsapp.com on desktop browsers, which gets blocked by many networks and firewalls. Using web.whatsapp.com/send opens WhatsApp Web directly without any redirect, so it works reliably on both desktop and mobile browsers.

Do I need a WhatsApp Business account?

No. This works with any regular WhatsApp number. However, WhatsApp Business is recommended for stores because it gives you business profiles, quick replies, and automated greetings for free.

Can I change the position of the button?

Yes. You can adjust the distance from the bottom and from the right edge using the range sliders in the Customizer. This lets you position the button so it does not overlap with other floating elements like chat widgets or scroll-to-top buttons.

I need help setting this up or want more custom features.

Reach out on WhatsApp for a quick chat, or hire me on Fiverr for custom Shopify development. I can add multi-agent support, business hours detection, inline contact cards, and more.