Slide-in
Um slide-in é um painel ou mensagem que surge da borda da tela e se sobrepõe à página sem recarregá-la, como um carrinho ou formulário de inscrição.
O que é um slide-in?
Um slide-in é um painel ou notificação que surge de forma animada a partir de uma das bordas da tela — geralmente da lateral ou da parte inferior — e se sobrepõe à página sem a necessidade de recarregá-la. Ao contrário de um pop-up modal completo, que aplica uma sobreposição escura em toda a tela, o slide-in ocupa apenas uma parte da área de visualização, permitindo que o usuário mantenha o contexto da página que está por baixo.
Por que o slide-in é importante?
O slide-in geralmente é visto como menos intrusivo do que um pop-up clássico porque não bloqueia a tela inteira. Isso torna o formato ideal para exibir um carrinho de compras, uma oferta ou uma inscrição de newsletter sem tirar o cliente do fluxo de compra. Se for bem planejado, um slide-in pode aumentar as inscrições e o valor médio do pedido, enquanto uma implementação ruim pode causar mudanças de layout (CLS) e irritar os usuários no celular.
Casos de uso comuns
- Carrinho lateral (cart drawer): o carrinho desliza a partir da direita quando o cliente adiciona um item, sem que ele precise sair da página do produto.
- Inscrição de newsletter: um painel discreto no canto da tela em vez de um pop-up que cobre toda a tela.
- Upsell e cross-sell: produtos relacionados ou “frequentemente comprados juntos” exibidos no momento da adição ao carrinho.
- Notificações: metas para frete grátis, status do estoque ou uma CTA (chamada para ação) com tempo limitado.
Perspectiva da Shopify
O tema Dawn da Shopify e a maioria dos temas modernos usam uma gaveta de carrinho lateral (slide-in cart drawer) que se abre a partir da lateral. A adição de slide-ins para inscrições ou upsell geralmente é feita por meio de um aplicativo ou código personalizado. Sempre teste no celular, certifique-se de que o painel possa ser fechado com a tecla Esc e trate o foco do teclado corretamente, e faça testes A/B (split tests) com gatilhos como profundidade de rolagem, tempo de atraso e intenção de saída para que a conversão nunca prejudique a experiência do usuário.