Sticky bar

¿Qué es una sticky bar?

Una sticky bar (barra adhesiva) es una barra delgada que se mantiene fija en una posición de la pantalla (normalmente en la parte superior o inferior) mientras se navega por el resto de la página. Técnicamente se crea mediante las propiedades CSS position: sticky o position: fixed. En una tienda en línea, sirve para mantener un mensaje o una acción constantemente visible, independientemente de la distancia que el cliente haya recorrido hacia abajo en la página.

¿Por qué es importante una sticky bar?

Una sticky bar te proporciona un lugar fijo para el mensaje que menos deseas que se pierdan los clientes: un código de descuento, un umbral de envío gratuito o una clara llamada a la acción (call to action). Como acompaña al cliente a lo largo de la página, funciona especialmente bien en dispositivos móviles y en páginas de productos extensas, donde el botón de compra de otro modo desaparecería de la vista. A cambio, ocupa espacio en el área visible (viewport) y, si se inserta de forma tardía o sin un espacio reservado, puede provocar un cambio de diseño acumulativo (CLS) debido a una layout shift (CLS).

Casos de uso comunes

• Barra de anuncios (announcement bar) con un código de descuento, campaña o umbral de envío gratuito en la parte superior.
• Botón de añadir al carrito fijo (sticky add-to-cart) en dispositivos móviles, que mantiene visible el botón de compra en páginas de producto largas.
• Banner de cookies y consentimiento fijo hasta que el usuario realice una elección.
• Aviso de cuenta atrás o stock que añade urgencia temporal durante una campaña.
• Barra de búsqueda o menú persistente dentro de una cabecera fija.

Perspectiva de Shopify

La mayoría de los temas de Online Store 2.0 incluyen una sección integrada de barra de anuncios y, a menudo, una opción de “cabecera fija” (sticky header), pero una barra adherida permanentemente o un botón de añadir al carrito fijo suelen requerir código en el tema o una aplicación. Comprueba siempre tanto en móvil como en escritorio que la barra no tape contenido importante o botones de pago, y que no altere el diseño de la página. Una variante relacionada y menos intrusiva es un slide-in, que se desliza desde el lateral en lugar de ocupar una barra fija.