Add a WhatsApp chat button to Shopify
Build the widget here, copy one block of HTML, and paste it into Shopify. No plugin to install, no monthly fee, and no script loading from someone else's server.
Adding it to Shopify
- From your Shopify admin, go to Online Store → Themes → … → Edit code.
- Open layout/theme.liquid and find the closing </body> tag near the bottom.
- Paste the snippet immediately above </body> and save.
- Duplicate your theme before editing, so you can roll back with one click if anything looks wrong.
Why not a plugin?
A hosted chat plugin adds a third-party request to every page load, can change its own design without telling you, and usually starts asking for a subscription once your traffic grows. The snippet you build here is plain HTML, CSS and JavaScript that lives in your own template — about 11 KB, no external requests, and no one else's roadmap.
Before you paste
Build the widget in the full builder first and use "Download test page" to confirm it looks right. Then copy the snippet and follow the steps above — paste it once, into a template that every page shares, rather than onto each page separately.
Questions people ask
Will the chat widget slow my site down?
It adds roughly 11 KB of inline HTML, CSS and JavaScript and makes no network requests at all, so it costs nothing to download separately and cannot block rendering. Hosted chat widgets typically load 100 KB or more from a third party.
Is the widget accessible?
The contacts are real links, so they work without JavaScript and with a screen reader. The button reports its expanded state, the panel can be closed with Escape, focus moves into and back out of it, every target is at least 44 pixels, and animation is dropped when the visitor asks for reduced motion.