Adding a WhatsApp button to your website
Fifteen minutes, no app to install, and it catches the visitors who would otherwise have left with a question.
A WhatsApp button on your website turns a visitor with a question into a conversation instead of a bounce. It is configured in your settings, it produces a piece of code you paste into your theme once, and it needs no app and no developer.
It is also one of the few things on your storefront that costs nothing to run — a customer who taps it messages you first, which opens the free 24-hour customer service window described in Meta's sending messages documentation.
Set it up
- Open Settings → Self-serve.
- Enter the WhatsApp number the button should open a chat with.
- Fill in the pre-filled first message — the text that appears already typed in the customer's chat.
- Set the button text, colour and position (bottom right or bottom left).
- Optionally add a ref tag, so your automation knows the person came from your website.
- Save. The code for your button appears underneath.
Everything on that screen is a preference except the number. If you are unsure, leave the colour and position alone — the defaults are the ones customers expect.
Put it on a Shopify store
Two routes, and the second involves no code editing at all.
The theme file route:
- Copy the code from the settings page.
- In Shopify admin, go to Online Store → Themes.
- On your current theme, click ⋯ → Edit code.
- Open theme.liquid, under "Layout".
- Paste the code just before the closing
</body>tag. - Click Save. The button now appears on every page.
The no-code route: go to Online Store → Themes → Customize → Add section → Custom Liquid and paste the same code there.
If editing a theme file makes you nervous, take the second one. It does the same job and it is easier to undo.
On any other website
The code is self-contained — a single link with its styling built in, no external scripts to load — so it works on any site where you can add HTML before the closing body tag. That covers WordPress, Wix, Squarespace, a custom site, and most page builders, though each calls the place to paste it something different.
Because nothing loads from elsewhere, it also does not slow your site down, and it cannot break if something outside your site changes.
The pre-filled message is the interesting part
Most businesses leave this empty, and it is the setting with the most upside. The text you put here appears already typed in the customer's chat, so it does two things: it removes the small hesitation of composing an opening line, and it tells your automation what the conversation is about before anybody types.
| Pre-fill | What it buys you |
|---|---|
| "Hi, I have a question" | Better than nothing — removes the blank-page moment |
| "Hi, a question about delivery" | Your flow can answer delivery immediately |
| "Hi, is this in stock?" | Routes straight to whoever knows |
| "Hi, about my order" | Triggers your order-status flow |
Pick the one that matches what your visitors actually ask. If your inbox is mostly "where is my order", make the button say so.
The ref tag
An optional short label that rides along with the pre-filled message, so a flow can tell a website visitor from someone who scanned a QR code on a delivery note.
One thing to know: it appears as part of the visible message text rather than as
hidden tracking. The customer can see it. Keep it short, keep it boring —
site or shop — and never put anything in it you would not
want read.
Make sure something answers
A button that opens a chat nobody replies to is worse than no button, because the customer has now been ignored rather than merely unserved.
Before you publish it, have at minimum a greeting flow that says what you can help with and when a person is available. That costs nothing to run and it is the difference between a good first impression and a bad one — the build is in how to build your first automation.
Where else the same link goes
The settings page also gives you a direct chat link, a downloadable QR code and a short public landing page. All three point at the same conversation, and they cover the places a button cannot reach — email signatures, printed material, social bios. The full set is in getting your first customers to message you.
Frequently asked
Will it slow my site down?
No. It is a single link with inline styling and no external scripts.
Can I show it only on some pages?
Pasting it into your main theme layout puts it everywhere. To limit it, paste it into the specific template or section instead.
Can I change the wording later?
Yes — change it in Settings and paste the new code over the old one.
Does a chat from the button cost anything?
No. The customer messages you first, and replies inside the window are free and unlimited under Meta's pricing documentation.
Where to put it, beyond "every page"
The default is a floating button on the whole site, which is right for most stores. Two pages are worth thinking about separately, because a tailored pre-fill on either is worth more than the button everywhere else combined:
| Page | Why it matters | Pre-fill |
|---|---|---|
| Product page | The question that stops a sale is asked here | Name the product |
| Out of stock | A visitor about to leave for good | "When will this be back?" |
| Checkout or cart | Last-moment hesitation about delivery or returns | "A question before I order" |
| Contact or FAQ | They already decided to ask something | Anything — they will type |
The second row is the one most stores never build and the one with the clearest return: an out-of-stock page currently converts nobody, and a conversation converts some of them.
What good looks like a week later
- The button is live on every page and you have tapped it yourself from a phone.
- The pre-filled message matches what your visitors actually ask.
- A greeting flow answers within seconds, at any hour.
- There is a visible way to reach a person.
- You have checked the conversations it produced and adjusted the pre-fill.
Step five is the one that compounds. The first pre-fill you write is a guess; the second one is based on what people actually said.
Troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| No button appears | Pasted in the wrong place, or the theme was not saved | Check it sits before the closing body tag |
| Button opens an empty chat | No pre-filled message set | Add one in Settings and re-copy the code |
| Button opens the wrong number | An old copy of the code is still in the theme | Replace it — the number is baked into the code |
| It covers a "buy" button on mobile | Position clash | Switch it to the other side |
| Nothing replies to the customer | No greeting flow published | Build one before you publicise it |
The third row is worth knowing before you change anything: the settings you pick are written into the code you copy, so changing the number, wording or colour means pasting the new code over the old one.
What it costs
Nothing to run. Every conversation it starts is one the customer began, which opens the free 24-hour customer service window — replies inside it have been free and unlimited since 1 November 2024 under Meta's pricing documentation.
That makes the button one of only a handful of things you can add to a storefront where more usage costs you nothing at all, which is a decent reason to put a few minutes into the pre-filled message rather than accepting the default.
The short version
1 number, 1 pre-filled message, 1 paste into your theme, and 1 greeting flow behind it. Fifteen minutes, no app, no developer, and it works on any website rather than just Shopify.
If you do only one thing on this page, set the pre-filled message. It is the difference between a visitor who has to think of an opening line and one whose question is already halfway asked.
Common questions
Does it work on mobile?
Yes, and that is where most of its use comes from. On a phone the button opens the WhatsApp app directly; on a desktop it opens WhatsApp Web.
Do I need a Shopify app for this?
No. That is the point of pasting code rather than installing something — nothing to review, nothing to keep updated, and it works identically on a site that is not Shopify at all.
Will it appear on my checkout pages?
On most Shopify plans the checkout is a separate, locked-down part of the store, so treat the button as covering your storefront rather than literally every page.
Can I use a different number from the one in my inbox?
You can point it anywhere, but you almost certainly should not. A button that opens a chat with a number nobody is watching is the worst version of this, and it is a common mistake in businesses where the owner's phone was the original contact number — see running one number across a team.