This article describes how to add a new chat button to the header on Shopify

1. Update header template and add button markup (adapt to the theme used)

{% if settings.show_wa_header_btn %}
  {% assign label = 'charles.header.whatsapp_btn_label' | t %}
  {% assign message = 'charles.header.whatsapp_message' | t | url_encode %}
  <li class="header-icon">
    <a class="charles-whats-app-header-button" href="<https://api.whatsapp.com/send/?phone={{settings.wa_number}>}&text={{message }}" target="_blank" title="{{label}}">
      {% include "icon-wa" %}
      <span>{{title}}</span>
    </a>
  </li>
{% endif %}

2. Add new snippet called "icon-wa.liquid"

<svg version="1.1" id="Ebene_1" xmlns="<http://www.w3.org/2000/svg>" xmlns:xlink="<http://www.w3.org/1999/xlink>" x="0px" y="0px"
     viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<path style="fill:#FFFFFF;" d="M0.1,24l1.7-6.2c-1-1.8-1.6-3.8-1.6-5.9C0.2,5.3,5.5,0,12,0c3.2,0,6.2,1.2,8.4,3.5
	c2.2,2.2,3.5,5.2,3.5,8.4c0,6.6-5.3,11.9-11.9,11.9c-2,0-4-0.5-5.7-1.4C6.4,22.3,0.1,24,0.1,24z M6.7,20.2c1.7,1,3.3,1.6,5.4,1.6
	c5.4,0,9.9-4.4,9.9-9.9c0-5.5-4.4-9.9-9.9-9.9c-5.5,0-9.9,4.4-9.9,9.9c0,2.2,0.7,3.9,1.7,5.6l-1,3.6C2.9,21.2,6.7,20.2,6.7,20.2z
	 M18,14.7c-0.1-0.1-0.3-0.2-0.6-0.3c-0.3-0.1-1.8-0.9-2-1c-0.3-0.1-0.5-0.1-0.7,0.1c-0.2,0.3-0.8,1-0.9,1.2s-0.3,0.2-0.6,0.1
	c-0.3-0.1-1.3-0.5-2.4-1.5c-0.9-0.8-1.5-1.8-1.7-2.1c-0.2-0.3,0-0.5,0.1-0.6c0.1-0.1,0.3-0.3,0.4-0.5C9.9,10,9.9,9.8,10,9.6
	c0.1-0.2,0.1-0.4,0-0.5C9.9,9,9.3,7.5,9.1,6.9C8.8,6.3,8.6,6.4,8.4,6.4l-0.6,0C7.6,6.4,7.3,6.5,7,6.8s-1,1-1,2.5s1.1,2.9,1.2,3.1
	c0.1,0.2,2.1,3.2,5.1,4.5c0.7,0.3,1.3,0.5,1.7,0.6c0.7,0.2,1.4,0.2,1.9,0.1c0.6-0.1,1.8-0.7,2-1.4C18.1,15.4,18.1,14.9,18,14.7z"/>
</svg>

3. Update translation files:

"charles": {
    "header": {
      "whatsapp_message": "Hi, ",
      "whatsapp_btn_label": "Chat with us via Whatsapp"
    }
  }

"charles": {
    "header": {
      "whatsapp_message": "Hi, ",
      "whatsapp_btn_label": "Chatte mit uns via Whatsapp"
    }
  }

4. Update "settings_schema.json"

{
    "name": "Charles",
    "settings": [
      {
        "type": "header",
        "content": "General"
      },
      {
        "type": "text",
        "id": "wa_number",
        "label": "Whatsapp Number",
        "info": "Only numbers, include country code, but without the + sign. (e.g. 4917812345678)"
      },
      ...,
      {
        "type": "header",
        "content": "Header"
      },
      {
        "type": "checkbox",
        "default": false,
        "id": "show_wa_header_btn",
        "label": "Enable header WhatsApp button",
        "info": "Globally show the header button in the stores header"
      }
    ]
  }

5. edit css (Example, adapt to the theme used)

.header-icon .charles-whats-app-header-button svg {
  height: 1.5rem;
  width: 1.5rem;
}
.header-icon .charles-whats-app-header-button svg path {
  fill: #333 !important;
}