How to Add 1-Click WhatsApp Buy Button on Shopify Product Pages (Step-by-Step Liquid Code)

Why Add a 1-Click WhatsApp Buy Button on Shopify?

In the Indian e-commerce landscape, over 70% of shoppers abandon carts due to complex multi-step checkout forms, mandatory account creations, or payment OTP failures. Adding a direct “Buy Now via WhatsApp” button on your Shopify product pages allows customers to bypass the standard checkout and place orders directly via WhatsApp chat with pre-filled product details.

In this step-by-step technical guide by CV World, we show you how to hand-code a 1-click WhatsApp order button into any Shopify Online Store 2.0 (OS 2.0) theme (such as Dawn, Sense, Refresh, or Craft) with zero monthly app fees.

Step 1: Open Your Shopify Theme Code Editor

1. Log in to your Shopify Admin Dashboard.
2. Navigate to Online Store → Themes.
3. Click the three dots (···) next to your active theme and select Edit code.

Step 2: Locate the Buy Buttons Template

In the file search bar on the left sidebar, locate the file that handles product purchase buttons:

• For Dawn and OS 2.0 themes: Open snippets/buy-buttons.liquid (or sections/main-product.liquid).
• Locate the <button type="submit" name="add" ...> element (the standard Add to Cart button).

Step 3: Insert the WhatsApp Liquid Code Snippet

Paste the following Liquid snippet directly below the Add to Cart / Buy Now button container:

{% comment %} --- CV World 1-Click WhatsApp Buy Button --- {% endcomment %}
{% assign whatsapp_number = "918248282074" %}
{% assign current_variant = product.selected_or_first_available_variant %}

{% capture wa_message %}
Hi, I want to order this product from your store:
- Product: {{ product.title }}
- Variant: {{ current_variant.title }}
- Price: {{ current_variant.price | money }}
- Product Link: {{ shop.url }}{{ product.url }}

Please confirm order details and delivery!
{% endcapture %}

<div class="cvw-shopify-wa-btn-container" style="margin-top: 14px;">
  <a href="https://api.whatsapp.com/send?phone={{ whatsapp_number }}&text={{ wa_message | strip | url_encode }}" 
     target="_blank" 
     rel="noopener" 
     class="cvw-btn-whatsapp-buy" 
     id="ShopifyWhatsAppBuyButton">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="vertical-align: middle; margin-right: 8px;">
      <path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-5.46-4.45-9.92-9.91-9.92z"/>
    </svg>
    Order via WhatsApp
  </a>
</div>

Note: Replace 918248282074 with your business WhatsApp phone number including the country code without plus sign.

Step 4: Add Button Styling in CSS

Open assets/base.css (or assets/theme.css) and add the following CSS rules at the very bottom of the file:

.cvw-btn-whatsapp-buy {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  background-color: #25D366 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  padding: 14px 22px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: background-color 0.25s ease, transform 0.15s ease !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3) !important;
  cursor: pointer !important;
  border: none !important;
  letter-spacing: 0.02em !important;
}

.cvw-btn-whatsapp-buy:hover {
  background-color: #1ebc59 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4) !important;
  color: #ffffff !important;
}

Step 5: Test on Desktop and Mobile

Save your theme files and open any product page on your store. When you click “Order via WhatsApp”, WhatsApp will instantly launch on the user’s phone or desktop browser with the exact product title, selected variant, price, and product URL pre-filled in the chat message!

Frequently Asked Questions about WhatsApp Buy Buttons in Shopify