Add a floating WhatsApp button that stays visible while customers scroll your store. This premium sticky button provides constant access to customer support, increasing conversions and reducing abandoned carts. Positioned elegantly in the bottom-right corner with smooth hover animations.
Stays fixed in viewport during scrolling for constant access
One-click access to WhatsApp with your preset number
Increases customer trust and conversion rates
Perfectly sized for all devices with touch-friendly target
{% comment %}
Sticky WhatsApp Button
Adds a fixed WhatsApp button at bottom right of page
Provided by XeeZone - www.xeezone.com/free-shopify-code-snippets-by-xeezone
{% endcomment %}
<div class="sticky-whatsapp" style="position: fixed; bottom: 20px; right: 20px; z-index: 999;">
<a href="https://wa.me/{{ settings.whatsapp_number }}?text=Hi,%20I%20have%20a%20question%20about%20your%20products"
style="display: block; background-color: #25D366; color: white; width: 60px; height: 60px; border-radius: 50%; text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
<i class="fa fa-whatsapp" style="font-size: 30px; line-height: 60px;"></i>
</a>
</div>
<style>
.sticky-whatsapp:hover {
transform: scale(1.1);
transition: transform 0.3s ease;
}
</style>
From Shopify admin, go to Online Store → Themes → Click "Actions" → Select "Edit code"
Find your theme.liquid file in the "Layout" folder
Paste the snippet just before the closing </body> tag
Create a whatsapp_number setting in Settings → Custom data
Insert <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> in theme.liquid if not present
Pro Tip: Customize the button position by changing the bottom and right values in the CSS (e.g., 30px instead of 20px).