WhatsApp Share Button

WhatsApp Share Button

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: All Shopify 2.0 free themes.

Increase your sales by allowing customers to share your product in WhatsApp. Don't spend way too much just to add a WhatsApp Share button in your product page. 

The button should pass in the variant information when the customer select a variant. 

To start:

1. Go to you Admin store > Online store > Themes > Actions > Edit code.

2. Open the section folder and find the main-product.liquid. Search for    {%- when 'buy_buttons' -%}. At the top of this code, paste the code below. 

  
{%- when 'whatsapp_button' -%}
<a href="https://api.whatsapp.com/send?&text={{ product.selected_variant.url | default: product.url | prepend: shop.url }}"
class="wwButton whatsappBox product-form__submit button button--full-width button--secondary"
onclick="this.select()"
data-action="share/whatsapp/share"
target="_blank">
<svg viewBox="0 0 32 32">
<path d=" M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" fill-rule="evenodd"></path>
</svg>
{{block.settings.whatsapp_button_label}}
</a>
<style>
.whatsappBox {
max-width: 44rem;
background-color: #4dca59;
position: relative;
margin: 0;
}
.whatsappBox svg {
width: 50px;
fill: white;
}

.wwButton {
text-align: center;
text-decoration: none;
color: white;
}
</style>

 

3. Next, at the {% schema %}, find the  "type": "buy_buttons". Before the opening bracket, place the code below.

 ,{
"type": "whatsapp_button",
"name": "whatsapp button",
"limit": 1,
"settings": [
{
"type": "text",
"id": "whatsapp_button_label",
"label": "Whatsapp button label",
"default": "Share in WhatsApp"
}
]
},

 

That's it. No sweat at all.

Copied!
Back to blog

1 comment

Thank you works good

Priyanka

Leave a comment