it is not very difficult  to design a shopify store but its challenging to add advance feature and create most conversion store  in free themes

A WhatsApp chat button can be added a shopify store by using custom code without using any paid or  free apps  here is solution to add a customize botton liquid  code to add shopify store

step by step

  1. go to theme customize section 
  2. click on eidt code 
  3. seacrh snippets
  4. add a new snappets section 
  5. paste the code 

snippet code :

{% assign whatsappNumber = “911234567890” %}
{% assign Message = “Hello, I need your help related to your online store!” %}
{% assign buttonPosition = “right” %}
{% assign buttonColor = “#25d366” %}
{% assign closeButtonColor = “black” %}
{% assign ctaText = “” %}
{% assign marginBottom = “1.25em” %}
{% assign marginLeft = “1.25em” %}
{% assign marginRight = “1.25em” %}
{% assign cornerRadius = “2.5em” %}
{% assign zIndex = “9” %}
{% assign showCloseButton = false %} 
{% if buttonPosition == “left” %}
                
{% assign positionStyle = “left: 0;” %}
{% else %}
                
{% assign positionStyle = “right: 0;” %}
{% endif %} 
<style>
  
.whatsapp-button-container {
    
position: fixed;
    
bottom: {{ marginBottom }};
    
{{ positionStyle }}
    
margin: 0 {{ marginLeft }} {{ marginRight }};
    
z-index: {{ zIndex }};
    
cursor: pointer;
  }
  .whatsapp-button {
    
display: flex;
    
align-items: center;
    
justify-content: center;
    
padding: 0.625em;
    
background-color: {{ buttonColor }};
    
border-radius: {{ cornerRadius }};
    
text-decoration: none;
    
font-weight: bold;
    
color: #FFFFFF;
  
}
   .whatsapp-button img {
    
height: 2em;
    
width: auto;   

  
}
 .close-button {
    
position: absolute;
    
top: -0.625em;
    
right: -0.625em;
    
display: {{ showCloseButton | default: true | append: “none” }};
    
background-color: red;
    
color: white;
    
width: 1.25em;
    
height: 1.25em;
    
border-radius: 50%;
    
text-align: center;
    
line-height: 1.25em;
    
font-weight: bold;
    
cursor: pointer;
  
}
</style>
<script>
  
function hideWhatsAppButton() {
    
document.querySelector(‘.whatsapp-button-container’).style.display = ‘none’;
  }
  
// Wait for the DOM to load
  
document.addEventListener(‘DOMContentLoaded’, function() {
    
// Add click event listener to the close button
    
document.querySelector(‘.close-button’).addEventListener(‘click’, hideWhatsAppButton);
  
});
</script>
<div class=”whatsapp-button-container”>
  
<a class=”whatsapp-button” href=”https://api.whatsapp.com/send?phone={{ whatsappNumber }}&amp;text={{ Message | url_encode }}” target=”_blank”> <img src=”https://cdn.shopify.com/s/files/1/0639/9426/5756/files/WhatsApp_icon_847d9204-10d4-4a59-8f30-9b69f25666e4.png?v=1727506693″ alt=”WhatsApp Logo” /></a>
 
{% comment %} {% if showCloseButton %}
    
<div class=”close-button”>×</div>
  
{% endif %} {% endcomment %}
</div>
  1. past this code on snippets
  2.  now go to layout.theme.liquid 
  3. and now last where the body is close

and past      {%- render ‘whatsapp-btn’ -%}

and save definitely help to highly workable WhatsApp directory button