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. 

NOTE: The button design might have to depend on your Shopify Theme.

What you are buying:

  • WhatApp share button next to the Add to Cart button
  • Button style might vary to Shopify theme being use

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.  

To start:

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

2. If you have Shopify 2.0 FREE themes, 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="whatsAppBox product-form__submit button button--full-width button--secondary"
onclick="this.select()"
data-action="share/whatsapp/share"
target="_blank">
<span class="whatsAppContent">
<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>
{{section.settings.whatsapp_button_label}}
</span>
</a>
<style>
.whatsAppBox {
width: {% if section.settings.whatsApp_fullwidth %}100%{% else %}max-content{% endif %};
text-align: center;
text-decoration: none;
height: max-content;
display: block;
}

.whatsAppContent {
background-color: #4dca59;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0 1rem;
color: #fff;
font-weight: bold;
}

.whatsAppContent svg {
width: 45px;
fill: #fff;
}

span.whatsAppContent:hover {
opacity: 0.8;
color: #000;
}

span.whatsAppContent:hover svg {
fill: #000;
}
</style>

 

If you have different theme, open the product-template.liquid under the Section folder, or your product section file. Then paste the code below.

<a href="https://api.whatsapp.com/send?text={{ product.selected_variant.url | default: product.url | prepend: shop.url }}"
class="whatsAppBox product-form__submit button button--full-width button--secondary"
onclick="this.select()"
data-action="share/whatsapp/share"
target="_blank">
<span class="whatsAppContent">
<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>
{{section.settings.whatsapp_button_label}}
</span>
</a>
<style>
.whatsAppBox {
width: {% if section.settings.whatsApp_fullwidth %}100%{% else %}max-content{% endif %};
text-align: center;
text-decoration: none;
height: max-content;
display: block;
}

.whatsAppContent {
background-color: #4dca59;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0 1rem;
color: #fff;
font-weight: bold;
}

.whatsAppContent svg {
width: 45px;
fill: #fff;
}

span.whatsAppContent:hover {
opacity: 0.8;
color: #000;
}

span.whatsAppContent:hover svg {
fill: #000;
}
</style>

 

3. If you have Shopify 2.0 FREE themes, 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"
},
{
"type": "checkbox",
"id": "whatsApp_fullwidth",
"label": "Whatsapp button full width",
"default": true
}
]
},

 

If you have other Shopify themes, scroll all the way down of the product section file. Find the last bracket ( ] ) near the {% endschema %}. Paste the code below before the last bracket ( ] ).

,{
"type": "text",
"id": "whatsapp_button_label",
"label": "Whatsapp button label",
"default": "Share in WhatsApp"
},
{
"type": "checkbox",
"id": "whatsApp_fullwidth",
"label": "Whatsapp button full width",
"default": true
}

 

4. Make sure to click SAVE.

That's it. No sweat at all.

Copied!
Back to blog

1 comment

Thank you works good

Priyanka

Leave a comment