Every Shopify app store review section has the same frustrated comment: "Works great — until the free trial ends." For a simple WhatsApp button, you shouldn't need a $9/month app. You need about 10 minutes and a link. Here's exactly how to add a working WhatsApp chat button to your Shopify store without installing anything.
What You'll Build
A floating button (or inline link) that, when clicked on mobile, opens WhatsApp with your store's number and a pre-written message like "Hi, I have a question about an order." On desktop, it opens WhatsApp Web. You'll add it to your store theme once and it'll appear on every page automatically.
Step 1: Create Your WhatsApp Link
Before touching Shopify, generate your link. Go to InstantLinkHub's WhatsApp Link Generator, enter your WhatsApp-enabled phone number in international format (e.g., +15551234567), and optionally write a pre-filled message like "Hi, I have a question about a product." Copy the generated URL — it'll look like:
https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question%20about%20a%20product
Step 2: Add the Button to Your Theme
Option A: Floating button (appears on all pages)
- In your Shopify admin, go to Online Store → Themes → Edit code
- Open the
theme.liquidfile (under Layout) - Paste the following code just before the closing
</body>tag:
<!-- WhatsApp Float Button -->
<a href="https://wa.me/YOUR_NUMBER?text=YOUR_MESSAGE"
target="_blank" rel="noopener" aria-label="Chat on WhatsApp"
style="position:fixed;bottom:24px;right:24px;z-index:9999;
background:#25D366;border-radius:50%;width:56px;height:56px;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 12px rgba(0,0,0,0.15);text-decoration:none;">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"
fill="white" viewBox="0 0 24 24">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967..."/>
</svg>
</a>
Replace YOUR_NUMBER and YOUR_MESSAGE with your values from the generated link.
Option B: Inline button on a product page
- In your Shopify admin, go to Online Store → Themes → Customize
- Open a product page template
- Add a Custom HTML section and paste:
<a href="https://wa.me/YOUR_NUMBER?text=I%20have%20a%20question%20about%20this%20product"
target="_blank"
style="display:inline-flex;align-items:center;gap:8px;background:#25D366;
color:white;padding:12px 20px;border-radius:8px;
text-decoration:none;font-weight:600;">
💬 Chat on WhatsApp
</a>
Step 3: Test on Mobile
After saving, open your store on your actual phone (not the Shopify preview). Tap the button. WhatsApp should open with your number and message pre-loaded. If you see a blank number or the link doesn't open, double-check that your number includes the country code and has no spaces or dashes.
Real-World Example: Handmade Jewelry Store
A handmade jewelry seller in Barcelona adds a WhatsApp float button to her Shopify store with the pre-filled message "Hola, tengo una pregunta sobre un producto" (in Spanish, since most of her customers are local). Within two weeks, she receives 23 WhatsApp inquiries that converted into orders — contacts she says would not have emailed her through the standard contact form.
Optional Enhancements
To hide the button on desktop (where WhatsApp is less natural), add @media (min-width: 768px) { .whatsapp-float { display:none; } } to your theme's CSS. To track button clicks in Google Analytics, add a data-gtag-event attribute or wire up a GA4 event via Google Tag Manager. You can also combine this with a UTM-tagged landing page to measure which campaigns drive the most WhatsApp conversations.
Frequently Asked Questions
Will this button slow down my store?
No. The button is pure HTML and inline CSS — no JavaScript, no external scripts, no third-party requests. It adds essentially zero page weight and won't affect your Core Web Vitals score.
Do I need a WhatsApp Business account for this to work?
No. The link works with any WhatsApp account, personal or business. WhatsApp Business adds extra features (catalog, quick replies, labels) but isn't required for a basic click-to-chat button.
What if my theme updates and overwrites my code?
Shopify theme updates don't typically overwrite custom code you've added to theme.liquid. However, if you install a major theme update, check that your button code is still there. Keeping a backup of the snippet in a text file takes 30 seconds and saves headaches later.
Generate your WhatsApp link first
Create the link with your number and pre-filled message, then paste it into your Shopify theme using the code above.
Create WhatsApp Link