Barra fixa

O que é uma barra fixa?

Uma barra fixa (sticky bar) é uma barra fina fixada em uma posição constante na tela — normalmente no topo ou na parte inferior — enquanto o restante da página é rolado. Tecnicamente, ela é construída com as propriedades CSS position: sticky ou position: fixed. Em uma loja virtual, ela mantém uma mensagem ou ação constantemente visível, independentemente de quão longe o cliente tenha rolado a página.

Por que uma barra fixa é importante?

A barra fixa oferece um local fixo para exibir a mensagem que você mais deseja que seus clientes vejam: um código de desconto, a meta para frete grátis ou uma chamada para ação (CTA) clara. Como ela acompanha a navegação do cliente ao longo da página, funciona muito bem no celular e em páginas de produtos longas, onde o botão de compra de outra forma sumiria de vista. Em contrapartida, ela ocupa espaço útil da tela e, se for carregada com atraso ou sem espaço reservado, pode causar mudanças de layout (CLS).

Casos de uso comuns

• Barra de anúncios no topo da tela com um código de desconto, anúncio de campanha ou meta de frete grátis.
• Botão de compra fixo (sticky add-to-cart) no celular, mantendo o botão de comprar sempre visível em páginas longas de produto.
• Banner de cookies e consentimento fixado na tela até que o usuário faça uma escolha.
• Contador regressivo ou aviso de estoque que adiciona senso de urgência durante campanhas de vendas.
• Barra de pesquisa ou menu persistente dentro de um cabeçalho fixo.

Perspectiva da Shopify

A maioria dos temas da Online Store 2.0 vem com uma seção de barra de anúncios integrada e, muitas vezes, uma opção de “cabeçalho fixo” (sticky header). No entanto, um botão de compra fixo ou uma barra personalizada persistentemente fixada costuma exigir código no tema ou um aplicativo de terceiros. Sempre faça testes em computadores e celulares para garantir que a barra não encubra conteúdos importantes ou botões de checkout, e que não desconfigure o layout da página. Uma alternativa relacionada e menos intrusiva é o slide-in, que desliza a partir da lateral em vez de ocupar uma barra inteira de forma fixa.