Add a WhatsApp button to your Shopify store
Shopify gives you two clean places to put a WhatsApp button: a custom Liquid block inside a section, or theme.liquid if you want the widget on every page including checkout-adjacent pages. Build your button or floating widget below, then follow the steps for whichever route fits your theme.
One small script tag. Renders a floating bubble with a mini chat panel.
Without the country code and without a leading zero.
The free hosted widget shows a small “by Galantis” badge.
Preview
Hi there! 👋 How can we help?
Chat on WhatsAppYour snippet
Enter your WhatsApp number to get your link.
Paste this anywhere your platform accepts custom HTML.
Everything here works on Online Store 2.0 themes (Dawn, Refresh, Craft and every theme published since) as well as older vintage themes. No app required, no monthly fee, and nothing that touches your checkout.
Install it on Shopify, step by step
- Build your button or widget above. Enter your WhatsApp number, set the welcome message and colour, and copy the snippet. The button is plain HTML; the widget is a single script tag.
- Open your theme editor. In your Shopify admin go to Online Store → Themes, find your live theme and click Customize. For the sitewide widget, use the three-dot menu → Edit code instead. 📸 Screenshot placeholder — 1600×900, step number 2 burned into the top-left.
Must show: Shopify admin, Online Store → Themes, with the Customize button highlighted - Add a Custom Liquid block (button route). In the theme editor, pick the section where the button belongs — a product page, the footer, or a landing page. Click Add block → Custom Liquid, and paste your button HTML into the box. Save. 📸 Screenshot placeholder — 1600×900, step number 3 burned into the top-left.
Must show: Theme editor sidebar with Add block open and Custom Liquid selected - Or paste the widget into theme.liquid (sitewide route). From Edit code, open Layout → theme.liquid, scroll to the closing </body> tag and paste the widget script directly above it. Save. The floating bubble now appears on every storefront page. 📸 Screenshot placeholder — 1600×900, step number 4 burned into the top-left.
Must show: Code editor showing theme.liquid with the script pasted above </body> - Preview on your phone. Open your storefront on a real phone and tap the button. It should hand off to WhatsApp with your pre-filled message ready to send. Desktop opens WhatsApp Web.
What usually goes wrong
- Duplicate your theme before editing theme.liquid. It takes ten seconds and it is the difference between a mistake and an incident.
- Do not paste the widget into a checkout template — Shopify restricts scripts there and it will not run.
- If your theme has a sticky mobile bar (add-to-cart), set the widget to the opposite side so the two do not overlap.
Frequently asked questions
Will this slow my Shopify store down?
The button is pure HTML with no scripts at all. The widget script is under 6 KB, loads deferred and does not block rendering, so the effect on Core Web Vitals is negligible.
Does it work with Online Store 2.0 themes?
Yes, on both. Use a Custom Liquid block on 2.0 themes for the inline button, and theme.liquid for the sitewide widget on any theme.
Do I need an app for this?
Not for the button or widget. You need an app when you want the conversation to continue automatically — abandoned cart recovery, order status messages, opt-in collection and a shared inbox.