Como adicionar uma barra fixa de adicionar ao carrinho

A barra fixa de adicionar ao carrinho mantém suas ofertas ao alcance enquanto os clientes navegam pela página do produto. O botão pode voltar até as ofertas ou adicionar a oferta selecionada diretamente ao carrinho. Você pode exibi-la depois que os clientes rolarem além do widget ou desde o carregamento da página.

Ative a barra fixa de adicionar ao carrinho

A barra fixa é configurada para cada pacote dentro do editor de pacotes.

1. Abra o pacote que você deseja editar.
2. Abra a aba Complementos e expanda Adicionar ao carrinho fixo.
3. Ative a opção ao lado do título Barra fixa de adicionar ao carrinho.

A barra é exibida nas páginas de produto onde este pacote aparece. Portanto, verifique se o pacote está publicado e se o widget está configurado para ser exibido nos produtos corretos.

Escolha o que o botão faz

A ação do botão tem duas opções:

• Rolar até as ofertas leva o cliente de volta ao widget para escolher uma oferta.
• Adicionar a oferta selecionada ao carrinho exibe a oferta selecionada e a adiciona com os produtos, brindes e extras escolhidos.

No modo de adição ao carrinho, a barra acompanha as alterações na oferta selecionada, nas variantes, nas quantidades, nas assinaturas e nos complementos. O total corresponde ao rodapé do widget. Você pode ativar Mostrar preço, Mostrar preço original, Mostrar selo de economia e Mostrar preço dentro do botão.

Se o cliente ainda precisar escolher uma variante ou preencher um espaço do pacote, o botão o levará ao widget para concluir. Sem nenhuma oferta selecionada, ele solicitará que o cliente escolha as opções. Em temas que impedem a adição direta, o botão volta a rolar até o widget. Descontos com apenas complementos opcionais usam a ação de rolar até as ofertas para que os clientes possam fazer suas escolhas no widget. Este botão usa o fluxo normal do carrinho, não o Comprar agora.

Escolha quando a barra será exibida

Em Mostrar a barra, escolha Depois que o widget sair da área visível ou Sempre, desde o carregamento da página. Ambas funcionam com qualquer ação do botão. As barras existentes mantêm o comportamento após a rolagem, a menos que você o altere.

Com Sempre selecionado, o modo de adição ao carrinho começa com a oferta pré-selecionada e acompanha as seleções posteriores. Se você permitir que a página carregue sem nenhuma oferta selecionada, os clientes precisarão escolher uma oferta antes que a barra possa adicioná-la.

Escolha um layout: Flutuante ou Fixo

Use a opção Layout da barra fixa para escolher como a barra ficará na página:

• Flutuante - um cartão centralizado, afastado das bordas por um pequeno espaço e com cantos arredondados.
• Fixo - uma barra de largura total fixada na borda inferior, estendendo-se de uma borda à outra.

Os dois layouts tratam o arredondamento dos cantos de forma diferente. Mudar para Fixo força o raio dos cantos para 0, permitindo que a barra fique alinhada às bordas da tela. Mudar para Flutuante restaura os cantos arredondados se o raio estiver em 0. Você pode ajustar o raio dos cantos depois nos controles de estilo, descritos abaixo, mas o layout Fixo foi projetado para permanecer quadrado.

Exibir no desktop e no celular

Duas caixas de seleção controlam onde a barra será exibida:

• Exibir no desktop
• Exibir no celular

Ambas vêm ativadas por padrão. Você pode desativar qualquer uma delas, por exemplo, para exibir a barra fixa apenas no celular, onde é mais provável que o botão original de adicionar ao carrinho saia da área visível durante a rolagem.

Confira a página real no celular usando o título e o preço mais longos da sua oferta. Em telas estreitas, a barra simplifica alguns detalhes do preço original, da economia e do preço do botão para manter a ação legível. Não espere que todos os detalhes do desktop apareçam em um celular pequeno.

Defina o título e o texto do botão

No modo de rolar até as ofertas, a barra fixa tem dois campos de texto:

• Título - o texto exibido ao lado do botão. Ele aceita variáveis de modelo, permitindo inserir valores dinâmicos como {{product_title}} (o padrão), {{saved_percentage}} ou {{price_total}}. Use o inseridor de variáveis no campo para adicioná-las.
• Texto do botão - o rótulo do botão fixo. O padrão é "Escolher pacote".

O modo de adição ao carrinho exibe o título da oferta selecionada e usa seu próprio campo Texto do botão Adicionar ao carrinho. Os dois textos de botão têm traduções separadas. Portanto, alterar o texto de um modo não substitui o do outro.

Em Textos da barra fixa, você também pode alterar o selo de brinde gratuito, os selos de complemento único e múltiplo e o texto do botão Escolher opções. Mantenha {{count}} na mensagem de vários complementos para que ela possa exibir a quantidade real.

Adicione a contagem regressiva incorporada (opcional)

Você pode exibir um temporizador dentro da barra fixa usando a caixa de seleção Mostrar temporizador na barra fixa.

Esta opção exige que o temporizador esteja ativado no mesmo pacote. Se o temporizador estiver desativado, a caixa de seleção ficará desabilitada e não poderá ser selecionada. Depois que você ativar o temporizador, poderá ativar esta opção.

O temporizador incorporado reutiliza o título compacto das configurações do seu temporizador, e seu estilo segue o tema da barra fixa.

Se você desativar o temporizador depois, o temporizador da barra fixa será desativado automaticamente.

Estilize a barra fixa

Abra o grupo Estilo da barra fixa de adicionar ao carrinho para ajustar a aparência. Os controles são agrupados em seções expansíveis:

• Fundo - cor sólida ou gradiente da barra.
• Contêiner - cor e largura da borda, raio dos cantos, espaçamento interno e sombra.
• Título - cor do texto, tamanho da fonte e espessura da fonte.
• Preço - estilo do texto do preço no modo de adição ao carrinho.
• Botão - cor de fundo, cor do texto, tamanho da fonte, espessura da fonte, espaçamento interno e raio dos cantos.
• Imagem do produto - tamanho da imagem, raio dos cantos, largura da borda e cor da borda.
• Temporizador - cor de fundo, cor do texto, tamanho da fonte, espessura da fonte e espaçamento interno. Este grupo aparece apenas quando o temporizador incorporado está ativado.

Para obter rapidamente uma aparência coordenada, use o seletor de cores predefinidas no topo da seção. Ele também oferece Combinar os cantos do ATC fixo com os do widget principal, que define o raio dos cantos da barra para corresponder ao widget principal do seu pacote, deixando os dois visualmente consistentes.

Observação sobre o raio dos cantos

Lembre-se de que o layout Fixo força um raio dos cantos igual a 0. Se você definir um raio arredondado no estilo do Contêiner e os cantos continuarem quadrados, verifique se o layout está definido como Flutuante.

Salve e teste as duas ações

Salve e teste uma página de produto específica com o desconto ativo. No modo de rolagem, role além das ofertas e use o botão fixo para voltar. No modo de adição ao carrinho, selecione uma oferta e as variantes e adicione pelo botão fixo. Confira as quantidades, variantes e o total no carrinho e no checkout. Repita no celular e teste uma escolha indisponível ou incompleta: a barra deve levar o cliente de volta para concluir a seleção.

No nosso exemplo, Compre 2 adiciona duas bolsas Marfim Pequeno, com subtotal de mercadorias de $43.20 após 10% de desconto. Escolher uma combinação Blush Pequeno indisponível muda a ação fixa para Escolher opções; alterá-la para um tamanho disponível restaura Adicionar ao carrinho. O temporizador continua sendo apenas visual e não interrompe o desconto quando chega a zero. Consulte Temporizador para saber como funciona a expiração.