Add a floating WhatsApp button in your store for free (no module required)

[MaxStrax]

Hello,

I have managed to create and implement a floating WhatsApp button in the storefront of your Niara theme. Here's the code:

HTML

Add the below code to the footer.tpl file of the theme (/.../themes/niara/footer.tpl)

Another way to customize the whatsapp url:

https://web.whatsapp.com/send?l=en&phone=prefix-your-number&text=some-text

<div id="whatsapp-button" class="whatsapp-button">
  <a href="https://wa.me/prefix-your-number" target="_blank">
    <img src="http(s)://path-to-your-wa-icon.png" alt="WhatsApp">
  </a>
</div>

CSS

Go to the Custom Code section of the admin panel (backstore), and add the below code:

/* WhatsApp floating button for the storefront */
.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}
.whatsapp-button a img {
  width: 50px; /* Icon size */
  height: auto;
}

JAVASCRIPT (not fully working)

Go to the Custom Code section of the admin panel (backstore), and add the below code:

// WhatsApp floating button for the storefront

// Control how it's hidden/shown when scrolling the page.
window.addEventListener("scroll", function() {
  var whatsappButton = document.getElementById("whatsapp-button");
  
  if (window.scrollY > 200) {
    whatsappButton.style.visibility = "visible";
  } else {
    whatsappButton.style.visibility = "hidden";
  }
});

All works perfectly fine, and very simple. But, I have a problem trying to make the JS code working as it should.

The button hides itself only when I'm under certain categories with subcategories on it (???). When I'm on the home page and under categories without subcategories, the button remains visible.

 

Can you help me with this?

Edited August 10, 2023 by MaxStrax

[datakick]

Probably some javascript error. Look into your browser console

[MaxStrax]

Thanks for the reply, I think I will keep it simple and not hide it.

[nickz]

Keeping it simple is great, specially for visitors 😉