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:%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 %}
No comments: