Add WhatsApp to Shopify for Free - No App or Subscription

Add WhatsApp to Shopify for Free - No App or Subscription

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: Compatible on most Shopify themes, from Debut to Dawn 2.0 and other Shopify FREE themes.

Someone suggested to make a video on adding a WhatsApp without an  App to the Shopify website. I added personalization to the section.

What you are buying:

  • Responsive code and IOS friendly
  • Well written code with NO external library being use
  • No APP 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 your Online store > Themes > Actions > Edit code

2. Go to Section folder and create a new section, and name it whatsApp. Make sure to follow the name with capital "A" so it will not cause and issue. Then, paste the code below.

<div class="whatsapp-widget-container {{section.settings.widget_position}}">
<div class="whatsapp-widget">
<a href="https://api.whatsapp.com/send?phone={{section.settings.phone_number}}&text=Messaging%20from&#58%20{% if request.path == "/" %}home page{% else %}{{request.path | remove: '/'}}{% endif %}%20"
class="ww-icon" e.ti
target="_blank"
style="text-decoration: none; flex-direction: {{section.settings.flex_direction}}">
<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>
{% if section.settings.message != blank %}
<div class="ww-message">
{% if section.settings.store_logo != blank %}
<img src={{section.settings.store_logo | img_url: '60 x 60' }} alt={{section.settings.store_logo.alt}}>
{% endif %}
<span class="ww-text">{{section.settings.message}}</span>
<span class="ww-behind {% if section.settings.flex_direction == 'row' %} ww-behind-left {% else %} ww-behind-right {% endif %}"></span>
</div>
{% endif %}
</a>
</div>
</div>
<style>
.whatsapp-widget-container {
display: flex;
bottom: 2rem;
position: fixed;
z-index: 10;
}

.whatsapp--right {
justify-content: flex-end;
right: 2rem;
}

.whatsapp--left {
justify-content: flex-start;
left: 2rem;
}

.whatsapp-widget {
height: max-content;
display: flex;
align-items: center;
gap: 2rem;
transition: transform .5s ease;
}

.whatsapp-widget:hover {
transform: scale(1.2);
}

.whatsapp-widget .ww-icon {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
}

.ww-message {
display: flex;
align-items: center;
gap: 10px;
border-radius: 8px;
border: 1px solid #e2e2e2;
min-height: max-content;
text-align: center;
text-decoration: none;
cursor: pointer;
word-break: break-word;
background: white;
padding: 10px 20px;
position: relative;
box-shadow: 2px 2px 15px 2px rgb(0 0 0 / 17%);
font-family: Roboto, "Helvetica Neue", sans-serif;
}

.ww-behind {
transform: translateY(-50%) rotate(135deg);
position: absolute;
top: 50%;
width: 20px;
height: 20px;
background-color: white;
}

.ww-behind-left {
left: -11px;
border-right: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
}

.ww-behind-right {
right: -10px;
border-left: 1px solid #e2e2e2;
border-top: 1px solid #e2e2e2;
}

.whatsapp-widget svg {
fill: rgb(255, 255, 255);
z-index: 1;
border-radius: 50px;
background-color: rgb(77, 194, 71);
box-shadow: rgb(0 0 0 / 40%) 2px 2px 6px;
cursor: pointer;
}

.whatsapp-widget svg {
height: 65px;
width: 65px;
}
</style>

{% schema %}
{
"name": "WhatsApp",
"settings": [
{
"type": "text",
"id": "phone_number",
"label": "Phone number",
"info": "Add with zip code ex: +10123456789"
},
{
"type": "image_picker",
"id": "store_logo",
"label": "Store logo"
},
{
"type": "text",
"id": "message",
"label": "Message Label",
"default": "Message Us",
"info": "Leave message blank to show icon only"
},
{
"type": "select",
"id": "widget_position",
"default": "whatsapp--right",
"label": "Widget Position",
"options": [
{
"value": "whatsapp--left",
"label": "left"
},
{
"value": "whatsapp--right",
"label": "right"
}
]
},
{
"type": "select",
"id": "flex_direction",
"default": "row",
"label": "WhatsApp Icon Position",
"options": [
{
"value": "row-reverse",
"label": "Icon right"
},
{
"value": "row",
"label": "Icon left"
}
]
}
],
"presets": [
{
"name": "WhatsApp"
}
]
}
{% endschema %}


 4. Go to theme.liquid, and find the   {% section 'footer' %}, then add the code below after the section footer.

 {% section 'whatsApp' %}

 

5. Last thing you need to do is to open theme editor.  Click the "customize theme".

 

That is it (",) Do not forget to subscribe to my Youtube channel. 

Copied!
Back to blog

1 comment

It doesn`t work the text to copy is different from the video

Maria

Leave a comment