How to Add a Free WhatsApp Chat Button to Shopify (No App Needed)

Short answer: Create a free WAButton widget, copy its embed code, and paste it just above the closing </body> tag in your Shopify theme's theme.liquid file. You do not need an app or any coding.

A WhatsApp button gives shoppers a way to ask about sizing, shipping times or checkout before they buy, and to ask a person rather than fill in a form.

Many Shopify chat apps charge a monthly fee and add their own scripts to your store. If you only need a button, you can paste one into your theme instead.

This guide shows you how to add a WhatsApp chat button to your Shopify theme, free and without an app.

---

How WhatsApp differs from a live chat widget

With a live chat widget, the conversation usually lives in the browser tab. If the visitor closes it before your team replies, they may never see the answer.

A WhatsApp click-to-chat button works differently in two ways:

1. The conversation stays on their phone: The chat moves into the shopper's own WhatsApp app. When your team replies, the shopper gets a notification on their phone.
2. The first message can be written for them: You can set the message so that when the shopper taps the button, WhatsApp opens with the product already named (e.g., "Hi, I have a question about [Product Name]").

If you also sell across other platforms, check out our CMS Integrations Directory for step-by-step guides on WordPress, WooCommerce, Webflow, and Squarespace.

---

Step-by-Step: Adding the WhatsApp Button to Your Shopify Theme

You don't need coding expertise to add WAButton to your Shopify theme. The snippet is standalone and has no library dependencies.

Step 1: Create Your Widget in the WAButton Dashboard

1. Create a free WAButton account, or log in to your dashboard if you already have one.
2. Create a widget and enter your WhatsApp Business phone number in international E.164 format (e.g. +14155552671 without spaces, dashes, or leading zeros).
3. Set an engaging pre-filled message, such as:

   Hi! I'm browsing your store and have a question about my order.
   

4. In the widget editor, open Share & install > Website install and copy your embed code. It already contains your widget ID, so it works as soon as you paste it.

Step 2: Open Your Shopify Theme Code Editor

1. Log in to your Shopify Admin dashboard.
2. In the left navigation sidebar, navigate to Online Store > Themes.
3. Locate your current active theme (e.g., Dawn, Sense, Refresh, or Impact).
4. Click the three dots (...) button beside Customize, then select Edit code.

Step 3: Paste the Embed Code in theme.liquid

1. In the file list on the left, open the Layout folder and click theme.liquid.
2. Scroll down to the very bottom of the file until you locate the closing </body> tag.
3. Immediately before the </body> tag, paste your WAButton embed code:

<!-- WAButton WhatsApp Widget -->
<script src="https://widget.wabutton.app/v1.js" data-widget-id="YOUR_WIDGET_ID" async></script>
<!-- End WAButton WhatsApp Widget -->

4. Click Save in the top right corner.

That's it! Visit your live store URL on desktop and mobile to test the widget. When clicked, it will open WhatsApp Web on desktop browsers or launch the native WhatsApp app on smartphones.

---

Advanced: Adding a WhatsApp Order Form Button to Product Pages

If you run a boutique store, custom apparel brand, or wholesale catalogue, you might want customers to submit orders directly over WhatsApp rather than navigating through standard checkout.

Using our free WhatsApp Order Form Generator, you can create structured order inquiries that auto-populate:

• Product SKU and title
• Selected variant (size, color, material)
• Delivery address and postal code
• Preferred payment method (Cash on Delivery, Bank Transfer, Stripe)

This can suit markets where your customers already expect to order over WhatsApp.

---

Why a small script matters

Core Web Vitals measure how a page loads and how stable it stays, including Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). Google recommends aiming for good scores.

Third-party chat apps can load their own scripts, fonts and stylesheets on every page, and those add to what the browser has to do.

WAButton keeps its footprint small:

• No dependencies: Plain JavaScript and SVG icons.
• Asynchronous loading (async): The script downloads in parallel and does not block your product images and text from rendering.
• No layout shift from the button: It floats at a fixed position, so your page does not jump while it loads.

Read our dedicated Shopify Integration Guide for more configuration tips and for sending button taps to Google Analytics 4 and Meta Pixel.

---

Frequently Asked Questions

Can I display the WhatsApp button only during business hours?

Yes. You can configure scheduled visibility rules or customize automated away messaging with our free WhatsApp Away Message Generator to set expectations when your team is offline.

Does this work on all Shopify themes?

Yes. The embed code is standard HTML5 and works across all Shopify Online Store 2.0 themes (Dawn, Refresh, Craft, Studio, Publisher) as well as legacy vintage themes.

Do I need a WhatsApp Business API account?

No. WAButton works with standard WhatsApp personal numbers, WhatsApp Business App accounts, and official WhatsApp Cloud API numbers.

---

Want more ways to use WhatsApp in your store? Read WhatsApp for Online Stores or try our free WhatsApp Link Generator.

---

Sources

• Understanding Core Web Vitals and Google search results, Google Search Central
• How to use click to chat, WhatsApp Help Center