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.

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

1. Go to your Online store > Themes > Actions > Edit code

2. Go to Section folder and create a new section. You can call it "whatsApp". Then, paste the code below.

 <div class="whatsapp-widget-container" style="justify-content: {{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{{request.path | remove: '/'}}%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 {
width: 100%;
display: flex;
bottom: 0;
padding: 4rem;
position: fixed;
z-index: 10;
}

.whatsapp-widget {
height: max-content;
display: flex;
align-items: center;
gap: 2rem;
}

.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 blank to show icon only"
},
{
"type": "select",
"id": "widget_position",
"default": "flex-start",
"label": "Widget Position",
"options": [
{
"value": "flex-start",
"label": "left"
},
{
"value": "flex-end",
"label": "right"
},
{
"value": "center",
"label": "center"
}
]
},
{
"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!
Voltar para o blogue

1 comentário

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

Maria

Deixe um comentário