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.