Posted in

Adding WhatsApp Support in Shopify: Enhance Customer Communication

•0

Everyone uses WhatsApp in their daily lives to stay connected—sending messages, photos, videos, emojis, and sharing daily status updates. For online store owners, integrating WhatsApp support directly into your Shopify website opens new doors for instant, personalized communication with your customers.

Why WhatsApp Support in Shopify Matters

WhatsApp is one of the most popular messaging platforms worldwide, with over 2 billion active users. Customers appreciate businesses that provide easy, direct ways to reach them with questions, help requests, or product inquiries. Integrating WhatsApp support into your Shopify store helps you:

  • Provide real-time customer support through direct messaging.
  • Increase customer engagement and build trust.
  • Simplify the buying journey by answering queries instantly.
  • Send timely updates or offers that customers can easily view on their phones.
  • Boost overall conversion rates and customer satisfaction.

How to Add WhatsApp Support in Shopify

Since WhatsApp is so widely used, adding a WhatsApp support chat widget or button on your Shopify store is a smart move. You can make it easy for visitors to start a WhatsApp conversation with your support team or sales reps with just a click.

Copy the code from code snippet below to add WhatsApp support, implementing it is straightforward:

  • Log in to your Shopify admin panel.
  • Go to Online Store > Themes > Edit Code.
  • Create a section named whatsapp-chat and paste the copied code.
  • Open theme.liquid file, and paste {% section 'whatsapp-chat' %} just before closing </body> tag to display the WhatsApp chat button support across all pages.
  • Save the changes and preview your site to ensure the WhatsApp feature is visible and functional.
  • Test the chat button to confirm that it opens WhatsApp and allows messaging as expected and update the phone number in customize.
<!-- whatsapp-widget.liquid -->
<div class="whatsapp-chat-widget" 
     id="whatsapp-widget-{{ section.id }}"
     data-phone="{{ section.settings.phone_number | remove: '+' | remove: ' ' | remove: '-' }}"
     data-message="{{ section.settings.default_message }}">
  
  <div class="whatsapp-button" onclick="openWhatsAppChat('{{ section.id }}')">
    <svg viewBox="0 0 24 24" class="whatsapp-icon">
      <path fill="currentColor" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.893 3.488"/>
    </svg>
    <span class="whatsapp-text">Chat with us</span>
  </div>
</div>


<style>
    /* WhatsApp Chat Widget Styles */
.whatsapp-chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.whatsapp-button {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
  padding: 15px 20px;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  animation: whatsapp-pulse 2s infinite;
  user-select: none;
  min-width: 60px;
  justify-content: center;
}

.whatsapp-button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
  animation: none;
}

.whatsapp-icon {
  width: 28px;
  height: 28px;
  margin-right: 10px;
  transition: transform 0.3s ease;
}

.whatsapp-button:hover .whatsapp-icon {
  transform: rotate(10deg);
}

.whatsapp-text {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: all 0.4s ease;
}

.whatsapp-button:hover .whatsapp-text {
  opacity: 1;
  max-width: 120px;
  margin-left: 0;
}

/* Tooltip Styles */
.whatsapp-tooltip {
  position: absolute;
  bottom: 80px;
  right: 0;
  background: white;
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  width: 280px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border: 1px solid #e0e0e0;
}

.whatsapp-tooltip.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.tooltip-content {
  padding: 20px;
}

.tooltip-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.tooltip-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  background: #25D366;
}

.tooltip-info h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.online-status {
  font-size: 12px;
  color: #25D366;
  font-weight: 500;
}

.tooltip-message {
  margin: 0 0 15px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

.start-chat-btn {
  width: 100%;
  background: #25D366;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.start-chat-btn:hover {
  background: #128C7E;
  transform: translateY(-1px);
}

/* Animations */
@keyframes whatsapp-pulse {
  0% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.8), 0 0 0 10px rgba(37, 211, 102, 0.1);
  }
  100% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.whatsapp-chat-widget.animate-in {
  animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .whatsapp-chat-widget {
    bottom: 15px;
    right: 15px;
  }
  
  .whatsapp-button {
    padding: 12px 15px;
    border-radius: 50px;
  }
  
  .whatsapp-icon {
    width: 24px;
    height: 24px;
    margin-right: 0;
  }
  
  .whatsapp-text {
    display: none;
  }
  
  .whatsapp-tooltip {
    width: 250px;
    right: -10px;
  }
  
  .tooltip-content {
    padding: 15px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .whatsapp-tooltip {
    background: #2a2a2a;
    border-color: #444;
  }
  
  .tooltip-info h4 {
    color: #fff;
  }
  
  .tooltip-message {
    color: #ccc;
  }
}


</style>

<script>
// Global WhatsApp function with section ID parameter
window.openWhatsAppChat = function(sectionId) {
  const widgetId = sectionId ? `whatsapp-widget-${sectionId}` : 'whatsapp-widget';
  const widget = document.getElementById(widgetId);
  
  if (!widget) {
    console.error('WhatsApp widget not found:', widgetId);
    return;
  }
  
  const phoneNumber = widget.dataset.phone;
  const message = widget.dataset.message;
  
  console.log('Debug - Phone:', phoneNumber, 'Message:', message);
  
  if (!phoneNumber || phoneNumber === '') {
    console.error('WhatsApp phone number not configured');
    alert('Please configure WhatsApp phone number in theme settings');
    return;
  }
  
  const encodedMessage = encodeURIComponent(message);
  const whatsappURL = `https://wa.me/${phoneNumber}?text=${encodedMessage}`;
  
  console.log('Opening WhatsApp:', whatsappURL);
  
  window.open(whatsappURL, '_blank');
  
  if (typeof gtag !== 'undefined') {
    gtag('event', 'whatsapp_click', {
      'event_category': 'engagement',
      'event_label': 'whatsapp_widget'
    });
  }
};

// Compatibility function without parameters
function openWhatsAppChat(sectionId) {
  window.openWhatsAppChat(sectionId || '{{ section.id }}');
}
</script>


{% schema %}
{
  "name": "WhatsApp Widget",
  "settings": [
    {
      "type": "text",
      "id": "phone_number",
      "label": "WhatsApp Phone Number",
      "info": "Enter phone number with country code (e.g., 919784153165)",
      "placeholder": "919784153165"
    },
    {
      "type": "text",
      "id": "default_message",
      "label": "Default Message",
      "default": "Hi! I'm interested in your products."
    }
  ]
}
{% endschema %}