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:
- From your Shopify admin, go to Online Store > Themes.
- Click Actions > Edit code.
- Open the product-template.liquid (or product.json file if you use Online Store 2.0).
- 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>
- Replace your-number with your WhatsApp business number (with country code).
- 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.