Por qué la barra de navegación inferior es vital para tu e-commerce

Hay una métrica que a menudo se pasa por alto pero que define el éxito de una conversión: la ergonomía digital.

Durante la última década, hemos visto cómo el diseño Mobile First dejaba de ser una opción para convertirse en una obligación. Sin embargo, muchos sitios web siguen anclados en patrones de navegación de 2015, utilizando el famoso «menú hamburguesa» en la esquina superior izquierda.

Hoy hablaremos de la evolución natural de la usabilidad móvil: la barra de navegación inferior (thumb bar) y por qué es el arma secreta para disparar las ventas en un e-commerce.

El problema: Las pantallas crecen, nuestros dedos no

Para entender la importancia de la barra de nevegación inferior (thumb bar), primero debemos mirar el hardware. Hace años, un teléfono de 4 pulgadas era el estándar. Hoy, los dispositivos superan fácilmente las 6.5 pulgadas (como los modelos «Max» o «Ultra»).

¿El problema? La anatomía humana no ha cambiado.

La Teoría de la «Zona del Pulgar»

Steven Hoober, en su famoso estudio sobre el uso de dispositivos móviles, descubrió que el 49% de los usuarios sostienen y usan su teléfono con una sola mano, utilizando el pulgar para navegar.

Esto crea tres zonas en la pantalla:

1. Zona Natural (Safe Zone): La parte inferior y central de la pantalla. Aquí es donde el pulgar descansa naturalmente y donde la interacción requiere cero esfuerzo.
2. Zona de Estiramiento (Stretch Zone): La parte media. Requiere un ligero movimiento.
3. Zona de Dolor (Owl/Hard Zone): Las esquinas superiores. Para llegar al clásico menú hamburguesa (arriba a la izquierda), el usuario debe cambiar el agarre del teléfono o usar la segunda mano.

La conclusión es devastadora para el diseño tradicional: Los elementos más importantes de navegación suelen estar en la zona más difícil de alcanzar.

¿Qué es exactamente una barra de navegación inferior (thumb bar)?

Una Thumb bar (o Bottom Navigation Bar en términos de Material Design de Google) es una barra fija situada en el borde inferior de la pantalla del navegador móvil.

A diferencia de un footer tradicional (al que solo llegas cuando acabas de hacer scroll), la Thumbbar es «Sticky» (pegajosa): acompaña al usuario durante toda su navegación.

Anatomía de una barra de navegación inferior perfecta:

• Altura: Generalmente entre 50px y 60px.
• Elementos: De 3 a 5 iconos clave.
• Diseño: Iconos minimalistas acompañados (o no) de etiquetas de texto cortas.
• Comportamiento: Puede ocultarse al hacer scroll hacia abajo (para dar aire al contenido) y reaparecer al hacer scroll hacia arriba, o permanecer fija siempre.

Ventajas críticas para E-commerce

Aquí es donde el marketing se encuentra con el desarrollo. En un e-commerce, cada micro-segundo de fricción es una venta perdida. Implementar una navegación inferior no es solo estética, es CRO (Conversion Rate Optimization) puro.

Acceso inmediato al Carrito de Compra

En el diseño clásico, el icono del carrito está arriba a la derecha. En pantallas grandes, es una zona de estiramiento. Al colocar el carrito en el centro o a la derecha de la thumb bar, lo pones literalmente al alcance del pulgar en todo momento.

Dato clave: Mantener el estado del carrito visible (por ejemplo, con un pequeño badge rojo indicando «2 artículos») en la zona inferior aumenta la urgencia y el recordatorio de compra.

El efecto «App-Like» (Sensación de Aplicación Nativa)

Los usuarios pasan más tiempo en Apps (Instagram, Spotify, Amazon) que en navegadores. Todas estas grandes Apps usan navegación inferior.

Al implementar una Thumbbar en tu web (especialmente si es una PWA – Progressive Web App), reduces la carga cognitiva del usuario. No tienen que aprender a usar tu web; se siente familiar porque se comporta como las aplicaciones que usan a diario.

Facilita la Búsqueda y Categorización

Muchos e-commerce fallan porque el usuario se pierde en la ficha de producto y le cuesta volver al catálogo.

Con una Thumbbar, puedes incluir un icono de «Buscar» o «Catálogo» que permita saltar a otra categoría sin tener que hacer scroll hasta arriba del todo o luchar con el botón «atrás» del navegador.

Área de Usuario y Favoritos (Wishlist)

La compra impulsiva a veces se frena por falta de decisión. Facilitar el acceso a la «Lista de Deseos» o al «Perfil» desde la barra inferior fomenta que el usuario guarde productos para después, aumentando el Customer Lifetime Value (CLV), en lugar de abandonar la sesión.

Impacto en SEO y Métricas de Usuario

Aunque Google no posiciona directamente por tener una barra inferior, sí lo hace por las métricas que esta mejora:

• Reducción del Rebote: Al hacer la navegación más fácil, el usuario explora más páginas.
• Aumento del tiempo en página: La comodidad invita a quedarse.
• Mejora de las Core Web Vitals: Si se implementa bien (usando CSS moderno y evitando JavaScript pesado), mejora la interactividad (INP – Interaction to Next Paint).

Guía de Implementación: Qué poner en tu Thumbbar

No caigas en el error de saturar la barra. Aquí tienes una configuración ganadora para una tienda online estándar:

Consideraciones Técnicas para Desarrolladores

Para finalizar, algunos apuntes técnicos para implementar esto correctamente sin arruinar la experiencia:

1. Cuidado con el teclado virtual: En Android e iOS, cuando se abre el teclado para escribir, la barra inferior puede subir y tapar el campo de texto. Asegúrate de gestionar el viewport-resize o usar CSS env(safe-area-inset-bottom) para dispositivos como el iPhone con notch inferior.
2. Z-Index War: Asegúrate de que tu Thumbbar tenga un z-index superior al contenido, pero inferior a los modales o pop-ups de cookies.
3. Contraste y Tamaño: Los dedos son imprecisos. Las áreas táctiles (touch targets) deben ser de al menos 44×44 píxeles, aunque el icono sea visualmente más pequeño.

Conclusión

La Thumbbar ha dejado de ser una tendencia de diseño para convertirse en un estándar de usabilidad en el comercio electrónico moderno.

Si tu tienda online sigue obligando a los usuarios a estirar los dedos hasta la esquina superior de sus pantallas gigantes para ver el carrito o buscar un producto, estás poniendo barreras físicas a tu facturación. Mueve tu navegación a la zona del pulgar y observa cómo mejora tu tasa de conversión.

Anexo premium: plugin WordPress «Smart Thumb bar»

Para los usuarios de WordPress, he empaquetado todo el código anterior (HTML, CSS y el nuevo JavaScript inteligente) en un plugin funcional.

Este código hace tres cosas:

1. Inyecta la estructura HTML en el pie de página.
2. Añade los estilos CSS necesarios (incluyendo soporte para iPhone).
3. Aplica JavaScript para detectar la dirección del scroll y ocultar/mostrar la barra automáticamente.

El Código del Plugin

Copia este código y guárdalo en un archivo llamado mi-thumbbar.php:

<?php
/**
 * Plugin Name: Smart Mobile Thumbbar
 * Description: Añade una barra de navegación inferior fija que se oculta al hacer scroll hacia abajo.
 * Version: 1.0
 * Author: Tu Nombre
 */

if (!defined('ABSPATH')) {
    exit; // Seguridad: evitar acceso directo
}

// 1. Inyectar HTML y Scripts en el Footer
function smt_inject_thumbbar() {
    // Solo mostrar en móviles (Opcional: puedes quitar este if si prefieres controlarlo solo por CSS)
    if (!wp_is_mobile()) { 
        // return; // Descomenta esta línea si quieres que el código HTML ni siquiera se cargue en PC
    }
    ?>

    <nav id="smart-thumbbar" class="mobile-thumbbar">
        <a href="<?php echo home_url(); ?>" class="thumbbar-item">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
            <span>Inicio</span>
        </a>
        
        <a href="<?php echo home_url('/tienda'); ?>" class="thumbbar-item">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
            <span>Tienda</span>
        </a>

        <a href="<?php echo home_url('/ofertas'); ?>" class="thumbbar-item highlight">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
            <span>Ofertas</span>
        </a>

        <a href="<?php echo home_url('/mi-cuenta'); ?>" class="thumbbar-item">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
            <span>Cuenta</span>
        </a>

        <a href="<?php echo wc_get_cart_url(); ?>" class="thumbbar-item">
            <div class="cart-icon-container">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
                <?php if ( class_exists( 'WooCommerce' ) && WC()->cart->get_cart_contents_count() > 0 ) : ?>
                    <span class="cart-badge"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
                <?php endif; ?>
            </div>
            <span>Carrito</span>
        </a>
    </nav>

    <style>
        .mobile-thumbbar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background: #ffffff;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 99999;
            padding-bottom: env(safe-area-inset-bottom);
            height: calc(60px + env(safe-area-inset-bottom));
            box-sizing: border-box;
            /* Transición suave para el efecto de ocultar */
            transition: transform 0.3s ease-in-out;
        }

        /* Clase para ocultar la barra */
        .mobile-thumbbar.thumbbar-hidden {
            transform: translateY(100%);
        }

        .thumbbar-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-decoration: none !important;
            color: #555;
            font-size: 10px;
            font-family: sans-serif;
            flex-grow: 1;
        }
        
        .thumbbar-item:hover, .thumbbar-item:focus { color: #007bff; }
        .thumbbar-item.highlight { color: #e91e63; font-weight: bold; }
        .thumbbar-item svg { margin-bottom: 4px; }
        
        .cart-icon-container { position: relative; }
        .cart-badge {
            position: absolute; top: -5px; right: -8px;
            background: red; color: white; font-size: 9px;
            border-radius: 50%; width: 15px; height: 15px;
            display: flex; align-items: center; justify-content: center;
        }

        /* Ocultar en escritorio */
        @media (min-width: 769px) {
            .mobile-thumbbar { display: none !important; }
        }
    </style>

    <script>
    document.addEventListener("DOMContentLoaded", function() {
        var lastScrollTop = 0;
        var thumbbar = document.getElementById("smart-thumbbar");
        var delta = 5; // Mínimo scroll para activar

        window.addEventListener("scroll", function() {
            var st = window.pageYOffset || document.documentElement.scrollTop;
            
            // Asegurarse de que no estamos en el rebote superior (iOS)
            if(Math.abs(lastScrollTop - st) <= delta) return;

            if (st > lastScrollTop && st > 60){
                // Scroll hacia ABAJO -> Ocultar
                thumbbar.classList.add("thumbbar-hidden");
            } else {
                // Scroll hacia ARRIBA -> Mostrar
                thumbbar.classList.remove("thumbbar-hidden");
            }
            lastScrollTop = st;
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'smt_inject_thumbbar');

Explicación de la lógica «Smart Scroll»

En este plugin hemos añadido un pequeño script de JavaScript que escucha el evento scroll del navegador. La lógica es sencilla pero potente:

1. Detecta la posición: El script guarda en una variable (lastScrollTop) dónde estaba el usuario hace un milisegundo.
2. Compara: Compara la posición actual con la guardada.
   • Si el número actual es mayor, el usuario está bajando → Añadimos la clase CSS .thumbbar-hidden (que empuja la barra hacia abajo fuera de la pantalla).
   • Si el número actual es menor, el usuario está subiendo → Quitamos la clase y la barra regresa a su sitio.
3. CSS Transition: Gracias a la propiedad transition: transform 0.3s, este cambio no es brusco, sino que se desliza suavemente.

¿Cómo instalar este plugin?

1. Crea una carpeta en tu ordenador llamada smart-thumbbar.
2. Dentro, crea un archivo de texto y pégale el código de arriba.
3. Guárdalo como mi-thumbbar.php.
4. Comprime la carpeta en un archivo .zip.
5. En tu WordPress, ve a Plugins > Añadir nuevo > Subir plugin y selecciona tu zip.

¡Listo! Ya tienes una funcionalidad de app nativa en tu WordPress sin pagar licencias mensuales.

Actualización Pro: «Smart Thumbbar» Dinámica (Gestionable desde WP-Admin)

Para cerrar el artículo con broche de oro, vamos a convertir el código anterior en un plugin 100% dinámico. Ya no tendremos enlaces «hardcodeados» (fijos) en el archivo PHP. En su lugar, registraremos una ubicación de menú en WordPress y pintaremos lo que el usuario decida.

¿Cómo funciona la lógica de los iconos?

Como el gestor de menús de WordPress no tiene un campo para «subir icono SVG» por defecto, usaremos un truco inteligente: el campo «Clases CSS».

El script detectará si le has puesto la clase icon-home, icon-search, icon-cart, etc., y asignará el SVG correspondiente automáticamente.

El Código Definitivo del Plugin

Reemplaza el código del archivo mi-thumbbar.php por este:

<?php
/**
 * Plugin Name: Smart Mobile Thumbbar (Dynamic)
 * Description: Barra de navegación inferior gestionable desde Apariencia > Menús. Ocultación automática al hacer scroll.
 * Version: 2.0
 * Author: Tu Nombre
 */

if (!defined('ABSPATH')) exit;

// 1. Registrar la ubicación del menú en WordPress
function smt_register_menu() {
    register_nav_menus(array(
        'mobile_thumbbar' => 'Thumbbar Móvil (Iconos)'
    ));
}
add_action('init', 'smt_register_menu');

// 2. Función para obtener el SVG según la clase CSS
function smt_get_icon_by_class($classes) {
    // Definimos nuestros iconos disponibles
    $icons = array(
        'icon-home'   => '<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline>',
        'icon-search' => '<circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>',
        'icon-user'   => '<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle>',
        'icon-offer'  => '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>',
        'icon-cart'   => '<circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>',
        'default'     => '<circle cx="12" cy="12" r="10"></circle>' // Icono por defecto
    );

    foreach ($classes as $class) {
        if (array_key_exists($class, $icons)) {
            return $icons[$class];
        }
    }
    return $icons['default'];
}

// 3. Renderizar la barra en el footer
function smt_render_thumbbar() {
    // Si no hay menú asignado, no mostramos nada
    if (!has_nav_menu('mobile_thumbbar')) return;

    // Solo móvil (opcional)
    // if (!wp_is_mobile()) return; 
    
    $locations = get_nav_menu_locations();
    $menu = wp_get_nav_menu_object($locations['mobile_thumbbar']);
    $menu_items = wp_get_nav_menu_items($menu->term_id);

    if (!$menu_items) return;

    ?>
    <nav id="smart-thumbbar" class="mobile-thumbbar">
        <?php foreach ($menu_items as $item) : 
            // Detectar si es el carrito para añadir el badge
            $is_cart = in_array('icon-cart', $item->classes);
            $is_highlight = in_array('highlight', $item->classes) ? 'highlight' : '';
        ?>
            <a href="<?php echo esc_url($item->url); ?>" class="thumbbar-item <?php echo $is_highlight; ?>">
                
                <div class="icon-wrapper <?php echo $is_cart ? 'cart-icon-container' : ''; ?>">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <?php echo smt_get_icon_by_class($item->classes); ?>
                    </svg>
                    
                    <?php if ($is_cart && class_exists('WooCommerce') && WC()->cart->get_cart_contents_count() > 0) : ?>
                        <span class="cart-badge"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
                    <?php endif; ?>
                </div>

                <span><?php echo esc_html($item->title); ?></span>
            </a>
        <?php endforeach; ?>
    </nav>

    <style>
        .mobile-thumbbar {
            position: fixed; bottom: 0; left: 0; width: 100%; height: 60px;
            background: #ffffff; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            display: flex; justify-content: space-around; align-items: center;
            z-index: 99999; padding-bottom: env(safe-area-inset-bottom);
            height: calc(60px + env(safe-area-inset-bottom));
            transition: transform 0.3s ease-in-out;
        }
        .thumbbar-hidden { transform: translateY(100%); }
        .thumbbar-item {
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; text-decoration: none !important;
            color: #555; font-size: 10px; font-family: sans-serif; flex-grow: 1;
        }
        .thumbbar-item:hover, .thumbbar-item:focus { color: #007bff; }
        .thumbbar-item.highlight { color: #e91e63; font-weight: bold; }
        .icon-wrapper { position: relative; display: flex; justify-content: center; margin-bottom: 4px; }
        .cart-badge {
            position: absolute; top: -5px; right: -8px; background: red; color: white;
            font-size: 9px; border-radius: 50%; width: 15px; height: 15px;
            display: flex; align-items: center; justify-content: center;
        }
        @media (min-width: 769px) { .mobile-thumbbar { display: none !important; } }
    </style>

    <script>
    document.addEventListener("DOMContentLoaded", function() {
        var lastScrollTop = 0;
        var thumbbar = document.getElementById("smart-thumbbar");
        window.addEventListener("scroll", function() {
            var st = window.pageYOffset || document.documentElement.scrollTop;
            if(st < 0) return; // Fix rebote iOS
            if (st > lastScrollTop && st > 60){ thumbbar.classList.add("thumbbar-hidden"); } 
            else { thumbbar.classList.remove("thumbbar-hidden"); }
            lastScrollTop = st;
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'smt_render_thumbbar');

Instrucciones

Una vez activado el plugin, el usuario debe seguir estos pasos en WordPress para que funcione:

1. Ve a Apariencia > Menús.
2. Crea un nuevo menú llamado «Menú Móvil».
3. TRUCO IMPORTANTE: En la parte superior derecha de la pantalla, pulsa en «Opciones de pantalla» y asegúrate de marcar la casilla «Clases CSS». (Muestra una captura de pantalla de esto, es donde todos fallan).
4. Añade tus enlaces (Inicio, Tienda, Carrito, etc.).
5. En cada elemento del menú, busca el campo «Clases CSS» (opcional) y escribe una de estas palabras clave para que aparezca el icono:
   • icon-home (Para Inicio)
   • icon-search (Para Buscar)
   • icon-user (Para Mi Cuenta)
   • icon-offer (Para Ofertas – También puedes añadir la clase highlight separada por un espacio para destacarlo en rosa).
   • icon-cart (Para el Carrito – activará el contador automático).
6. Abajo del todo, en «Dónde se verá», marca la casilla «Thumbbar Móvil».
7. Guardar menú.

Anexo técnico: Implementa tu propia barra de navegación inferior (thumb bar) en 5 minutos

Para aquellos que quieran pasar de la teoría a la práctica, aquí tenéis un snippet de código limpio que podéis añadir al final del <body> de vuestra web.

1. El Código HTML

Coloca este bloque justo antes de cerrar la etiqueta </body> de tu sitio web.

<nav class="mobile-thumbbar">
  <a href="/" class="thumbbar-item active">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
      <polyline points="9 22 9 12 15 12 15 22"></polyline>
    </svg>
    <span>Inicio</span>
  </a>

  <a href="/buscar" class="thumbbar-item">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="11" cy="11" r="8"></circle>
      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    </svg>
    <span>Buscar</span>
  </a>

  <a href="/ofertas" class="thumbbar-item highlight">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
    </svg>
    <span>Ofertas</span>
  </a>

  <a href="/mi-cuenta" class="thumbbar-item">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
      <circle cx="12" cy="7" r="4"></circle>
    </svg>
    <span>Cuenta</span>
  </a>

  <a href="/carrito" class="thumbbar-item">
    <div class="cart-icon-container">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="9" cy="21" r="1"></circle>
        <circle cx="20" cy="21" r="1"></circle>
        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
      </svg>
      <span class="cart-badge">2</span>
    </div>
    <span>Carrito</span>
  </a>
</nav>

2. El Código CSS

Añade esto a tu hoja de estilos principal. Fíjate en el uso de env(safe-area-inset-bottom), crucial para que la barra no quede cortada en los iPhone nuevos.

/* Estilos base de la Thumbbar */
.mobile-thumbbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 9999; /* Asegura que esté siempre encima */
  
  /* Ajuste para iPhone X y superiores */
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(60px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

/* Estilo de cada elemento */
.thumbbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #666;
  font-size: 10px;
  font-family: sans-serif;
  flex-grow: 1; /* Ocupan el mismo espacio */
  height: 100%;
}

/* Estado activo (página actual) */
.thumbbar-item.active, 
.thumbbar-item:hover {
  color: #007bff; /* Tu color corporativo aquí */
}

.thumbbar-item svg {
  margin-bottom: 4px;
}

/* Elemento destacado (opcional) */
.thumbbar-item.highlight {
  color: #e91e63;
  font-weight: bold;
}

/* Badge del carrito */
.cart-icon-container {
  position: relative;
}

.cart-badge {
  position: absolute;
  top: -5px;
  right: -8px;
  background-color: red;
  color: white;
  font-size: 10px;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* IMPORTANTE: Ocultar en escritorio */
@media (min-width: 768px) {
  .mobile-thumbbar {
    display: none;
  }
}

¿Por qué funciona este código?

• position: fixed & bottom: 0: Esto es lo que hace la «magia». Fija el elemento a la ventana del navegador, no al contenido, por lo que siempre viaja con el usuario.
• env(safe-area-inset-bottom): Esta variable CSS es moderna y vital. Añade un relleno extra en la parte inferior solo si el dispositivo tiene una barra de gestos (como los iPhone sin botón), evitando que tus iconos sean in-clicables.
• display: none en Desktop: No quieres esta barra en un monitor de 27 pulgadas. La Media Query se encarga de mostrarla solo cuando es ergonómicamente necesaria.