Boost conversions with direct WhatsApp access from product pages. This premium snippet adds a professional WhatsApp button that auto-populates with product details, creating seamless communication between you and potential customers. The button features elegant hover effects and matches Shopify's native styling.
Automatically includes product title and URL in WhatsApp message
Easily configure WhatsApp number through theme settings
Professional WhatsApp green color with elegant hover effects
Perfectly responsive design for all devices
{% comment %}
WhatsApp Button Under Buy Now Button
Adds a WhatsApp button that sends product details when clicked
Provided by XeeZone - www.xeezone.com/free-shopify-code-snippets-by-xeezone
{% endcomment %}
<div class="whatsapp-button-container" style="margin-top: 15px;">
<a href="https://wa.me/{{ settings.whatsapp_number }}?text=Hi,%20I'm%20interested%20in%20{{ product.title | url_encode }}%20({{ shop.url }}{{ product.url }})"
class="button whatsapp-button"
style="background-color: #25D366; color: white; display: inline-block; padding: 12px 20px; border-radius: 4px; text-decoration: none;">
<i class="fa fa-whatsapp" aria-hidden="true"></i> Message on WhatsApp
</a>
</div>
<style>
.whatsapp-button:hover {
background-color: #128C7E !important;
color: white !important;
}
</style>
From your Shopify admin, navigate to Online Store → Themes → Click "Actions" → Select "Edit code"
In the code editor, find your product template file (usually sections/product-template.liquid or templates/product.liquid)
Search for the code that generates your "Add to Cart" or "Buy Now" button (look for <button type="submit" or similar)
Insert the provided code snippet immediately after the buy button code block
Go to Settings → Custom data and create a setting named whatsapp_number with your full international number (e.g., 15551234567)
Pro Tip: For better results, add Font Awesome by including <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> in your theme.liquid file if not already present.