Add Order on WhatsApp Button in Shopify Product Page

Add Order on WhatsApp Button in Shopify Product Page

Do you want to give your customers a faster way to contact you and place orders directly through WhatsApp? If so, adding an Order on WhatsApp button in Shopify product pages is an excellent solution. Moreover, this feature helps store owners improve customer support, and as a result, they can answer queries instantly and close sales faster without requiring additional apps.Do you want to give your customers a faster way to contact you and place orders directly through WhatsApp? Adding an Order on WhatsApp button in Shopify product pages is an excellent solution. In fact, this feature helps store owners improve customer support; moreover, it allows them to answer queries instantly and, as a result, close sales faster without requiring additional apps.

Why Add an Order on WhatsApp Button?

Today’s customers prefer quick communication. By allowing them to reach you with a single click, you:

  • Build trust with real-time responses
  • Provide personalized service
  • Encourage more conversions
  • Make your store look modern and customer-friendly

How to Add Order on WhatsApp Button in Shopify

Follow these simple steps to add the button:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Actions > Edit code.
  3. Open the product-template.liquid (or product.json file if you use Online Store 2.0).
  4. Paste the following code where you want the button to appear, usually under the Add to Cart button:
{% capture product_url %}{{ shop.url }}{{ product.url }}{% endcapture %}
{% capture product_name %}{{ product.title | url_escape }}{% endcapture %}

<a href="https://wa.me/your-number?text=I am interested in {{ product_name }} - {{ product_url }}" 
   target="_blank" 
   class="btn btn--whatsapp">
   Order on WhatsApp
</a>
  1. Replace your-number with your WhatsApp business number (with country code).
  2. Save changes and preview your store.

Styling the Button with CSS

To make the button attractive, you can add this CSS in your theme file:

.btn--whatsapp {
  background-color: #25D366;
  color: #fff;
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: bold;
  display: inline-block;
  text-align: center;
  transition: 0.3s;
}

.btn--whatsapp:hover {
  background-color: #1DA851;
}

This will make the button match WhatsApp’s green color and look professional on your product page.

Final Thoughts

Adding an Order on WhatsApp button in Shopify helps customers connect with you quickly and, as a result, increases the chances of sales. Moreover, it’s a simple but powerful way to boost engagement and provide a better shopping experience. Whether you’re running a small boutique or a large online store, this feature can enhance communication and, in addition, build more trust with your buyers.