How To Add Order On WhatsApp Button On Product Page In Shopify

How To Add Order On WhatsApp Button On Product Page In Shopify

{% capture product_url %}{{ shop.url }}{{ product.url }}{% endcapture %} {% capture product_name %}{{ product.title | url_escape }}{% endcapture %} Order on WhatsApp

{% capture product_url %}{{ shop.url }}{{ product.url }}{% endcapture %} {% capture product_name %}{{ product.title | url_escape }}{% endcapture %} Order on WhatsApp

{% capture product_url %}{{ shop.url }}{{ product.url }}{% endcapture %} {% capture product_name %}{{ product.title | url_escape }}{% endcapture %} Order on WhatsApp

{% capture product_url %}{{ shop.url }}{{ product.url }}{% endcapture %} {% capture product_name %}{{ product.title | url_escape }}{% endcapture %} Order on WhatsApp

<a href="https://api.whatsapp.com/send?phone=+8801991505652&text=Hi,
    %20I%20want%20to%20buy:%20{{ product.title }}
    %20%20https://dollymani.com/products%2F{{ product.handle }}" class="btn btn--buy-on-whatsapp">
    <div class="whatsapp-button">
    <img src="https://cdn.shopify.com/s/files/1/0634/5244/6777/files/WhatsApp.png?v=1732285916" width="50px" style="vertical-align:middle;">
    
    Order On Whatsapp
    
    </div>
    </a>




<style>



.btn--buy-on-whatsapp {
    display: block;
    padding: 5px 10px;
    font-size: 20px;
    line-height: 1.5;
    color: #fff;
    background-color: #12bf42;
    border: 1px solid #41ff00;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
    animation: pulse 3s infinite;
    border-radius: 15px;
    animation-timing-function: linear;
}


.btn--buy-on-whatsapp:hover {
    background-color: #000000;
    color: #fff;
    border-radius: 10px;
    animation: none;
    border-color: #000;
}

/***** Pulse *****/

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1);
  100% { transform: scale(1); }
  }
}

</style>
{% capture product_url %}{{ shop.url }}{{ product.url }}{% endcapture %}
{% capture product_name %}{{ product.title | url_escape }}{% endcapture %}
<a href="https://wa.me/+4400700000000?text=Hello, I%20would%20like%20to%20buy%20this%20product:%20{{ product_name }}%20{{ product_url }}" class="btn btn--buy-on-whatsapp" target="_blank">Order on WhatsApp</a>