Add WhatsApp to Shopify for Free - No App or Subscription

{% if youLike === true %} Hit Subscribe {% endif %}

To veiw the code!
Don't have an account?

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. 

Deixe um comentário