How do you add a floating WhatsApp button with an advisor photo to your Shopify store?

If you sell on Shopify, you probably already know that a lot of customers would rather ask a quick question on WhatsApp before they buy. A well-configured floating WhatsApp button on Shopify answers those questions, builds trust, and closes sales that would otherwise be lost to an abandoned cart.

Quick answer

To add a floating WhatsApp button on Shopify you don't need any apps or plugins: duplicate your theme, open Edit code, create a section named whatsapp-advisor-button.liquid inside the Sections folder, paste the code, and add it next to the Footer as a global section.

Everything else — number, advisor photo, an auto-filled message with the product name, and click tracking in Google Analytics or Meta Pixel — is configured from the visual editor in about 10 minutes.

Demo of the floating WhatsApp button with an advisor photo on a Shopify store — This is how the floating button looks — with an advisor photo and a text bubble.

What you'll get

A floating button with your advisor's photo, visible on every page of your store
A customizable text bubble that invites the conversation
An auto-filled message that includes the name of the product the customer is viewing
The option to dismiss the bubble so you don't annoy the user
Full configuration from the Shopify editor — colors, position, size, when it appears
Automatic click tracking in Google Analytics and Meta Pixel

What you need before you start

Access to your Shopify admin (with permission to edit the theme)
A photo of your advisor — square if possible, at least 200×200 pixels, on a neutral background. If you don't have a real photo, your brand logo works too
The WhatsApp number where you want to receive messages (with country code)
10 minutes of your time

Step 1: Back up your theme

Before you touch any code, always make a copy of your current theme. If something goes wrong, you can roll back to the previous state in one click. From your Shopify admin:

Go to Online Store → Themes
Find your current theme (the one labeled “Current theme”)
Click the three dots (...) next to the Customize button
Select Duplicate

Duplicating the current theme in Shopify from the three-dots menu

Wait for the duplicate to finish. You'll see a new copy called “Copy of [your theme name].” That copy is your backup: if anything ever goes wrong, you can publish it and return to the previous state.

Step 2: Open the code editor

Now let's install the button on the theme that's currently active.

On that same Themes page, click the three dots (...) on your current theme
Select Edit code

Opening the theme code editor in Shopify — A code editor will open with lots of folders on the left. Don't panic — we're only going to touch one.

Step 3: Create the section file

In the editor, look for the folder called Sections in the left panel. That's where all the reusable pieces of your theme live (the header, the footer, the homepage sections, and so on).

Click the Sections folder
Click the Add a new section link
In the name field, type: whatsapp-advisor-button.liquid
Press Enter to create the section

Creating a new section in Shopify's Sections folder

Naming the file whatsapp-advisor-button.liquid — A new blank file will be created.

Step 4: Paste the button code

Shopify will show the new file open with some sample code inside. Do the following:

Select all the content in the file (Ctrl + A on Windows or Cmd + A on Mac)
Delete it (the Delete or Backspace key)
Copy the full code below and paste it into the empty file
After pasting, click Save (top right)

whatsapp-advisor-button.liquid

{% schema %}
{
  "name": "Botón Flotante Asesor",
  "settings": [
    {
      "type": "header",
      "content": "Contenido Principal"
    },
    {
      "type": "text",
      "id": "phone_number",
      "label": "Número de WhatsApp",
      "default": "573112167782",
      "info": "Incluye el código de país sin el símbolo +"
    },
    {
      "type": "textarea",
      "id": "prefilled_message",
      "label": "Mensaje predeterminado",
      "default": "Hola, estoy interesada en..."
    },
    {
      "type": "checkbox",
      "id": "append_page_context",
      "label": "Agregar contexto de página al mensaje",
      "info": "Incluye el nombre y URL del producto/página en el mensaje de WhatsApp",
      "default": true
    },
    {
      "type": "image_picker",
      "id": "advisor_image",
      "label": "Foto del Asesor"
    },
    {
      "type": "text",
      "id": "text_bubble",
      "label": "Texto del Globo",
      "default": "Hola 👋, ¿te ayudo?"
    },
    {
      "type": "checkbox",
      "id": "dismissible_bubble",
      "label": "Permitir cerrar el globo",
      "info": "Muestra una X para que el usuario pueda cerrar el globo (se recuerda por sesión)",
      "default": true
    },
    {
      "type": "header",
      "content": "Diseño y Colores"
    },
    {
      "type": "color",
      "id": "color_bubble_bg",
      "label": "Fondo del Globo",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "color_bubble_text",
      "label": "Texto del Globo",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "color_badge_bg",
      "label": "Fondo del Icono de WhatsApp",
      "default": "#25D366"
    },
    {
      "type": "color",
      "id": "color_badge_icon",
      "label": "Color del Icono de WhatsApp",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Posición y Tamaño"
    },
    {
      "type": "select",
      "id": "position",
      "label": "Posición en pantalla",
      "options": [
        { "value": "left", "label": "Izquierda" },
        { "value": "right", "label": "Derecha" }
      ],
      "default": "right"
    },
    {
      "type": "range",
      "id": "button_size",
      "min": 40,
      "max": 100,
      "step": 5,
      "unit": "px",
      "label": "Tamaño del botón",
      "default": 65
    },
    {
      "type": "range",
      "id": "bottom_offset",
      "min": 10,
      "max": 100,
      "step": 5,
      "unit": "px",
      "label": "Distancia desde abajo (desktop)",
      "default": 25
    },
    {
      "type": "range",
      "id": "bottom_offset_mobile",
      "min": 10,
      "max": 150,
      "step": 5,
      "unit": "px",
      "label": "Distancia desde abajo (móvil)",
      "info": "Aumenta este valor si tienes un botón sticky de 'Agregar al carrito'",
      "default": 20
    },
    {
      "type": "checkbox",
      "id": "enable_pulse",
      "label": "Activar animación de pulso",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_on_mobile",
      "label": "Mostrar texto en móviles",
      "default": true
    },
    {
      "type": "header",
      "content": "Comportamiento Avanzado"
    },
    {
      "type": "select",
      "id": "bubble_trigger",
      "label": "Cuándo mostrar el globo",
      "options": [
        { "value": "immediate", "label": "Inmediatamente (1s)" },
        { "value": "scroll", "label": "Después de hacer scroll" },
        { "value": "delay", "label": "Después de 10 segundos" },
        { "value": "exit", "label": "Al intentar salir (exit intent)" }
      ],
      "default": "scroll"
    },
    {
      "type": "checkbox",
      "id": "hide_on_scroll_down",
      "label": "Ocultar al hacer scroll hacia abajo",
      "info": "Mejora la experiencia de lectura en móvil",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "enable_tracking",
      "label": "Activar tracking de clics",
      "info": "Envía eventos a Google Analytics (gtag) y Meta Pixel (fbq) si están instalados",
      "default": true
    }
  ],
  "presets": [
    {
      "name": "Botón Flotante Asesor"
    }
  ]
}
{% endschema %}
<style>
  /* Variables dinámicas desde Shopify */
  .ws-container-{{ section.id }} {
    --ws-bottom: {{ section.settings.bottom_offset }}px;
    --ws-bottom-mobile: {{ section.settings.bottom_offset_mobile }}px;
    --ws-size: {{ section.settings.button_size }}px;
    --ws-bubble-bg: {{ section.settings.color_bubble_bg }};
    --ws-bubble-text: {{ section.settings.color_bubble_text }};
    --ws-badge-bg: {{ section.settings.color_badge_bg }};
    --ws-badge-icon: {{ section.settings.color_badge_icon }};
  }
  /* Contenedor Principal */
  .ws-container-{{ section.id }} .whatsapp-sticky-container {
  position: fixed;
  bottom: var(--ws-bottom);
  z-index: 99;
  display: flex;
  align-items: center;
  font-family: "Rethink Sans", sans-serif;
  opacity: 0;
  transform: translateY(50px);
  animation: slideInUp 0.5s ease-out 0.3s forwards;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Estado oculto al hacer scroll down */
.ws-container-{{ section.id }} .whatsapp-sticky-container.ws-hidden {
  transform: translateY(200px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden;
}
@media (max-width: 768px) {
  .ws-container-{{ section.id }} .whatsapp-sticky-container.ws-hidden {
    transform: translateY(calc(100% + var(--ws-bottom-mobile) + 20px));
  }
}
  /* Posicionamiento IZQUIERDA */
  .ws-container-{{ section.id }} .ws-pos-left { 
    left: 25px; 
    flex-direction: row; 
  }
  
  /* Posicionamiento DERECHA */
  .ws-container-{{ section.id }} .ws-pos-right { 
    right: 25px; 
    flex-direction: row-reverse; 
  }
  .ws-container-{{ section.id }} .whatsapp-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
  }
  /* Hereda la dirección del contenedor padre */
  .ws-container-{{ section.id }} .ws-pos-left .whatsapp-link {
    flex-direction: row;
  }
  
  .ws-container-{{ section.id }} .ws-pos-right .whatsapp-link {
    flex-direction: row-reverse;
  }
  /* Círculo de la Foto (El Asesor) */
  .ws-container-{{ section.id }} .whatsapp-button {
    width: var(--ws-size);
    height: var(--ws-size);
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform 0.3s ease;
    position: relative;
    border: 2px solid #ffffff;
    flex-shrink: 0;
  }
  /* Pulso optimizado con pseudo-elemento (usa transform en lugar de box-shadow) */
  {% if section.settings.enable_pulse %}
  .ws-container-{{ section.id }} .whatsapp-button::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background-color: var(--ws-badge-bg);
    z-index: -1;
    animation: pulse-{{ section.id }} 2s infinite;
    will-change: transform, opacity;
  }
  {% endif %}
  /* Imagen específica del asesor */
  .ws-container-{{ section.id }} .advisor-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
  }
  /* BADGE: El icono de WhatsApp */
  .ws-container-{{ section.id }} .whatsapp-badge {
    position: absolute;
    bottom: -2px;
    right: -5px;
    width: calc(var(--ws-size) * 0.4);
    height: calc(var(--ws-size) * 0.4);
    min-width: 20px;
    min-height: 20px;
    background-color: var(--ws-badge-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
  /* Icono SVG dentro del badge */
  .ws-container-{{ section.id }} .whatsapp-badge svg {
    width: 55%;
    height: 55%;
    display: block;
    fill: var(--ws-badge-icon);
  }
  /* Efecto Hover */
  .ws-container-{{ section.id }} .whatsapp-link:hover .whatsapp-button {
    transform: scale(1.1);
  }
  .ws-container-{{ section.id }} .whatsapp-link:hover .whatsapp-button::before {
    animation: none;
  }
  /* Feedback táctil en móvil */
  .ws-container-{{ section.id }} .whatsapp-link:active .whatsapp-button {
    transform: scale(0.95);
    transition: transform 0.1s ease;
  }
  /* Estado de foco para accesibilidad */
  .ws-container-{{ section.id }} .whatsapp-link:focus-visible {
    outline: none;
  }
  .ws-container-{{ section.id }} .whatsapp-link:focus-visible .whatsapp-button {
    outline: 3px solid var(--ws-badge-bg);
    outline-offset: 4px;
  }
  /* Globo de Texto */
  .ws-container-{{ section.id }} .whatsapp-text-bubble {
    background-color: var(--ws-bubble-bg);
    color: var(--ws-bubble-text);
    padding: 9px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    max-width: 200px;
    line-height: 1.3;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    margin: 0 15px;
    position: relative;
    border: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  /* Globo visible (se activa por JS según el trigger) */
  .ws-container-{{ section.id }} .whatsapp-text-bubble.ws-bubble-visible {
    opacity: 1;
    transform: translateX(0);
  }
  /* Globo cerrado por el usuario */
  .ws-container-{{ section.id }} .whatsapp-text-bubble.ws-bubble-dismissed {
    display: none;
  }
  /* Botón de cerrar el globo */
  .ws-container-{{ section.id }} .ws-bubble-close {
    background: none;
    border: none;
    color: var(--ws-bubble-text);
    opacity: 0.5;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
  }
  .ws-container-{{ section.id }} .ws-bubble-close:hover {
    opacity: 1;
  }
  /* Flechas del globo según posición */
  .ws-container-{{ section.id }} .ws-pos-left .whatsapp-text-bubble::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -12px;
    border: 6px solid transparent;
    border-right-color: var(--ws-bubble-bg);
    transform: translateY(-50%);
  }
  .ws-container-{{ section.id }} .ws-pos-right .whatsapp-text-bubble::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -12px;
    border: 6px solid transparent;
    border-left-color: var(--ws-bubble-bg);
    transform: translateY(-50%);
  }
  /* Animaciones Dinámicas */
  {% if section.settings.enable_pulse %}
  @keyframes pulse-{{ section.id }} {
    0% { 
      transform: scale(1); 
      opacity: 0.5; 
    }
    100% { 
      transform: scale(1.4); 
      opacity: 0; 
    }
  }
  {% endif %}
  @keyframes slideInUp {
  from { 
    transform: translateY(50px); 
    opacity: 0; 
  }
  to { 
    transform: translateY(0); 
    opacity: 1; 
  }
}
  /* Respeta las preferencias del usuario de reducir movimiento */
  @media (prefers-reduced-motion: reduce) {
    .ws-container-{{ section.id }} .whatsapp-sticky-container,
    .ws-container-{{ section.id }} .whatsapp-button::before,
    .ws-container-{{ section.id }} .whatsapp-text-bubble {
      animation: none !important;
      transition: opacity 0.2s ease !important;
    }
    
    .ws-container-{{ section.id }} .whatsapp-text-bubble.ws-bubble-visible {
      transform: none;
    }
  }
  /* Mobile Responsive */
  @media (max-width: 768px) {
    .ws-container-{{ section.id }} .whatsapp-button { 
      width: calc(var(--ws-size) * 0.85); 
      height: calc(var(--ws-size) * 0.85); 
    }
    .ws-container-{{ section.id }} .whatsapp-sticky-container { 
      bottom: var(--ws-bottom-mobile); 
    }
    .ws-container-{{ section.id }} .ws-pos-left { left: 20px; }
    .ws-container-{{ section.id }} .ws-pos-right { right: 20px; }
    
    {% unless section.settings.show_on_mobile %}
      .ws-container-{{ section.id }} .whatsapp-text-bubble { display: none; }
    {% endunless %}
  }
</style>
{%- liquid
  assign base_message = section.settings.prefilled_message
  assign encoded_message = base_message | url_encode
  if section.settings.append_page_context
    if template contains 'product'
      assign context_text = product.title | append: ' - ' | append: shop.url | append: product.url
      assign encoded_message = base_message | append: ' ' | append: context_text | url_encode
    elsif template contains 'collection'
      assign context_text = collection.title | append: ' - ' | append: shop.url | append: collection.url
      assign encoded_message = base_message | append: ' ' | append: context_text | url_encode
    endif
  endif
  assign whatsapp_url = 'https://wa.me/' | append: section.settings.phone_number | replace: '+', '' | replace: ' ', '' | append: '?text=' | append: encoded_message
-%}
<div class="ws-container-{{ section.id }}" 
     data-bubble-trigger="{{ section.settings.bubble_trigger }}"
     data-hide-on-scroll="{{ section.settings.hide_on_scroll_down }}"
     data-dismissible="{{ section.settings.dismissible_bubble }}"
     data-tracking="{{ section.settings.enable_tracking }}"
     data-section-id="{{ section.id }}">
  <div class="whatsapp-sticky-container ws-pos-{{ section.settings.position }}">
    <a href="{{ whatsapp_url }}" 
       target="_blank" 
       rel="noopener noreferrer"
       class="whatsapp-link" 
       aria-label="Hablar con un asesor por WhatsApp">
      
      <div class="whatsapp-button">
        {% if section.settings.advisor_image %}
          <img src="{{ section.settings.advisor_image | image_url: width: 150 }}"
               srcset="{{ section.settings.advisor_image | image_url: width: 100 }} 1x,
                       {{ section.settings.advisor_image | image_url: width: 200 }} 2x"
               alt=""
               class="advisor-img" 
               width="{{ section.settings.button_size }}" 
               height="{{ section.settings.button_size }}"
               loading="lazy"
               decoding="async">
        {% else %}
          {{ 'image' | placeholder_svg_tag: 'advisor-img' }}
        {% endif %}
        <div class="whatsapp-badge" aria-hidden="true">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.288.173-1.412-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
          </svg>
        </div>
      </div>
      {% if section.settings.text_bubble != blank %}
        <div class="whatsapp-text-bubble" role="status">
          <span>{{ section.settings.text_bubble }}</span>
          {% if section.settings.dismissible_bubble %}
            <button type="button" 
                    class="ws-bubble-close" 
                    aria-label="Cerrar mensaje"
                    onclick="event.preventDefault(); event.stopPropagation(); this.closest('.whatsapp-text-bubble').classList.add('ws-bubble-dismissed'); try { sessionStorage.setItem('ws-dismissed-{{ section.id }}', '1'); } catch(e) {}">
              &times;
            </button>
          {% endif %}
        </div>
      {% endif %}
    </a>
  </div>
</div>
<script>
  (function() {
    var container = document.querySelector('.ws-container-{{ section.id }}');
    if (!container) return;
    console.log(
      '%c◉ Botón Flotante Asesor %cpor Orbit%c\n%chttps://orbitlabco.com',
      'background:#25D366;color:#fff;padding:4px 8px;border-radius:4px 0 0 4px;font-weight:bold;',
      'background:#000;color:#fff;padding:4px 8px;border-radius:0 4px 4px 0;font-weight:bold;',
      '',
      'color:#666;font-size:11px;'
    );
    var stickyContainer = container.querySelector('.whatsapp-sticky-container');
    var bubble = container.querySelector('.whatsapp-text-bubble');
    var link = container.querySelector('.whatsapp-link');
    var sectionId = container.dataset.sectionId;
    var trigger = container.dataset.bubbleTrigger;
    var hideOnScroll = container.dataset.hideOnScroll === 'true';
    var isDismissible = container.dataset.dismissible === 'true';
    var trackingEnabled = container.dataset.tracking === 'true';
    var wasDismissed = false;
    try {
      wasDismissed = sessionStorage.getItem('ws-dismissed-' + sectionId) === '1';
    } catch(e) {}
    if (bubble && wasDismissed) {
      bubble.classList.add('ws-bubble-dismissed');
    }
    function showBubble() {
      if (bubble && !wasDismissed && !bubble.classList.contains('ws-bubble-visible')) {
        bubble.classList.add('ws-bubble-visible');
      }
    }
    if (bubble && !wasDismissed) {
      if (trigger === 'immediate') {
        setTimeout(showBubble, 1000);
      } else if (trigger === 'delay') {
        setTimeout(showBubble, 10000);
      } else if (trigger === 'scroll') {
        var scrollHandler = function() {
          var scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
          if (scrollPercent > 20 || window.scrollY > 400) {
            showBubble();
            window.removeEventListener('scroll', scrollHandler);
          }
        };
        window.addEventListener('scroll', scrollHandler, { passive: true });
      } else if (trigger === 'exit') {
        var exitHandler = function(e) {
          if (e.clientY < 10) {
            showBubble();
            document.removeEventListener('mouseleave', exitHandler);
          }
        };
        document.addEventListener('mouseleave', exitHandler);
        setTimeout(showBubble, 15000);
      }
    }
    if (hideOnScroll) {
      var lastScrollY = window.scrollY;
      var ticking = false;
      var scrollThreshold = 5;
      var handleScroll = function() {
        var currentScrollY = window.scrollY;
        var scrollDelta = currentScrollY - lastScrollY;
        if (Math.abs(scrollDelta) < scrollThreshold) {
          ticking = false;
          return;
        }
        var scrollingDown = scrollDelta > 0;
        var pastInitialScroll = currentScrollY > 200;
        if (scrollingDown && pastInitialScroll) {
          stickyContainer.classList.add('ws-hidden');
        } else if (!scrollingDown) {
          stickyContainer.classList.remove('ws-hidden');
        }
        lastScrollY = currentScrollY;
        ticking = false;
      };
      window.addEventListener('scroll', function() {
        if (!ticking) {
          window.requestAnimationFrame(handleScroll);
          ticking = true;
        }
      }, { passive: true });
    }
    if (trackingEnabled && link) {
      link.addEventListener('click', function() {
        var eventData = {
          location: window.location.pathname,
          section_id: sectionId
        };
        if (typeof window.gtag === 'function') {
          window.gtag('event', 'whatsapp_click', eventData);
        }
        if (typeof window.fbq === 'function') {
          window.fbq('track', 'Contact', { method: 'WhatsApp' });
        }
        if (window.ShopifyAnalytics && window.ShopifyAnalytics.lib) {
          try {
            window.ShopifyAnalytics.lib.track('WhatsApp Click', eventData);
          } catch(e) {}
        }
      });
    }
  })();
</script>

The section is created. But it doesn't show up on your store yet — we created it, but we haven't “placed” it anywhere. We'll do that in the next step.

Step 5: Add the section from the visual editor

Now let's go to Shopify's visual editor, which is where you'll actually see and configure the button.

Go back to the main Shopify dashboard
Go to Online Store → Themes
On your current theme, click Customize or Edit theme

What you'll do now is add the button section as a global section, so it shows up on every page of your store, not just the homepage.

At the bottom of the left panel, find the Footer section
Click Add section (with a + icon)
Find Floating Advisor Button in the list and click it

Adding the Floating Advisor Button section in Shopify's visual editor

The floating button appears in the store preview — If you don't see it, scroll to the bottom of the preview — it usually sticks to the bottom-right corner.

Step 6: Configure your button

Now for the fun part. With the section selected in the left panel, you'll see all the options grouped by category.

Main content

WhatsApp number: your number without the + but with the country code. e.g. 12025550147 — the US country code (1) plus the number
Default message: the message that appears when the customer opens WhatsApp
Add page context: leave it on. It makes the message automatically include the name and link of the product the customer is viewing
Advisor photo: upload a square image where the face is visible
Bubble text: the invitation that appears next to the button. How can I help? works really well

Design and colors

WhatsApp icon background: keep the official green (#25D366) — users recognize it instantly. Changing it can hurt conversion
On-screen position: right is the most common; if you already have another chat there (Tidio, Crisp…), put this one on the left
Button size: 65px works well. 55px is more discreet, 75px draws more attention
Distance from bottom (mobile):if you have a sticky “Add to cart” button, raise it to 80–100px so they don't overlap

Advanced behavior

When to show the bubble: “After scrolling” — it appears once the customer is engaged, not from the very first second
Hide on scroll down: turn it on — it keeps out of the way while reading on mobile
Enable click tracking: turn it on to measure clicks in Google Analytics or Meta Pixel

Step 7: Save and test

Click Save at the top right of the editor
Open your store in a new tab and check that it appears
Click the button — it should open WhatsApp with your number and the pre-filled message
Navigate to a product page and test again — the message should now include the product name

Final result: the floating WhatsApp button with an advisor photo working on the store — The final result: professional, unobtrusive, and built to convert.

Tips to convert more

Use a real photo of a person.Buttons with a real advisor's face convert far better than a logo or a generic icon. It humanizes the purchase
Reply fast.The button is pointless if you take hours to answer. If you can't cover the whole day, automate after-hours replies
Tailor the message by section. You can create several button sections with different messages for different pages (products, shipping, etc.)

In short

You now have a WhatsApp button that looks professional, respects the user, and is built to convert. It's not “just another little button”: it's a direct sales channel that, used well, recovers abandoned carts and speeds up buying decisions.