WhatsApp Button for Shopify - Implementation Guide

WhatsApp Button Under Buy Now Button

SHOPIFY SNIPPET

1 Overview

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.

2 Key Features

Smart Pre-Population

Automatically includes product title and URL in WhatsApp message

Theme Settings

Easily configure WhatsApp number through theme settings

Premium Styling

Professional WhatsApp green color with elegant hover effects

Mobile Optimized

Perfectly responsive design for all devices

3 Code Implementation 

{% comment %}
  WhatsApp Button Under Buy Now Button
  Adds a WhatsApp button that sends product details when clicked
{% endcomment %}

{% assign whatsapp_number = "447308243564" %}
{% assign message = "Hello, I'd like to buy " | append: product.title | append: " priced at " | append: product.price | money_with_currency | append: ". Here's the link: " | append: shop.url | append: product.url %}

<div style="margin-top: 15px;">
  <a
    href="https://api.whatsapp.com/send?phone={{ whatsapp_number }}&text={{ message | url_encode }}"
    class="button button--full-width"
    style="margin-top:10px; background:#25D366; color:white; text-align:center; padding:12px; border-radius:6px; display:block; font-weight:bold;"
    target="_blank"
    rel="noopener"
  >
    🟢 Buy on WhatsApp
  </a>
</div>

<style>
  .whatsapp-button:hover {
    background-color: #128C7E !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
</style>

4 Installation Guide

1

Access Theme Code Editor

From your Shopify admin, navigate to Online Store → Themes → Click "Actions" → Select "Edit code"

2

Locate Product Template

In the code editor, find your product template file (usually sections/main-product.liquid or templates/product.liquid)

3

Find Buy Button

Search for the code that generates your "Add to Cart" or "Buy Now" button (look for {%- when 'buy_buttons' -%}" or similar)

4

Paste WhatsApp Code

Insert the provided code snippet immediately after the buy button code block

5

Customize WhatsApp Number

Change the whatsapp_number variable in the code to your actual WhatsApp number with country code (e.g., 15551234567)

6

Save and Test

Save your changes and test the button on a product page to ensure it works correctly

Pro Tip: For better results, customize the button text and colors to match your store's branding. Test the button on both desktop and mobile devices to ensure it works correctly.

Scroll to Top