Compatibility: All Shopify themes, from Debut to Dawn 2.0 and other Shopify 2.0 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:%20{% if request.path == "/" %}home page{% else %}{{request.path | remove: '/'}}{% endif %}%20" class="ww-icon" 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 0.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.
1 comment
It doesn`t work the text to copy is different from the video