Widget flutuante de cotação

Enable Quote Cart Widget: “Shows a floating button on your storefront so customers can open their quote cart from any page.”

O widget é um botão rápido de cotação fixado na borda de todas as páginas. Funciona como um ícone de carrinho: depois que o cliente adiciona algo, ele mostra quantos produtos estão aguardando, e um clique leva a pessoa à página do carrinho de cotação ou direto ao pop-up de cotação, para que ela confira o que reuniu e preencha o formulário sem procurar a página.

Ativar

1. Abra as configurações do carrinho de cotação

   No app, acesse Quote settings e clique em Customize. Depois, abra a aba Quote cart page.

2. Ative Enable Quote Cart Widget

   Enable Quote Cart Widget é o último bloco da aba, abaixo de Enable Quote Sections. O controle é o alternador na extremidade direita do cabeçalho. Ative-o e o bloco se expande, mostrando seis configurações.

   

3. Defina as seis configurações do widget

   Percorra Text, Action, Position, Border radius, Text color e Background color: cada uma é explicada na tabela abaixo. O painel Preview à direita mostra o widget conforme você altera.

   

   Apenas duas cores para escolher: fundo e texto.

   

4. Salve e confira a sua loja virtual

   Clique em Save no canto superior direito do editor e adicione um produto a uma cotação na sua loja virtual. O widget aparece na borda da tela, com o rótulo Quote e o número de produtos entre parênteses.

   

   O widget como clientes o veem, em todas as páginas da sua loja.

   

Todas as configurações do widget

Configuração	Valores e padrão	O que faz
Text	Chega como Quote ({numOfItem})	O texto do widget. {numOfItem} é substituído pelo número de produtos na cotação do cliente, então aparece como Quote (3). Se você remover o token, o widget mostra um rótulo simples, sem contagem.
Action	Go to quote cart page · Open quote popup	O que acontece ao clicar no widget. Veja abaixo.
Position	Half bottom right · Bottom right · Half top right · Half bottom left · Bottom left · Half top left	A borda em que o widget fica e a que altura. As opções "half" o fixam na lateral da tela; Bottom right e Bottom left o colocam no canto.
Border radius	Um número em px, começando em 0	O quanto os cantos do widget são arredondados. 0 é quadrado.
Text color	Uma cor	A cor do texto.
Background color	Uma cor	A cor do próprio widget.

Nota

Não vê o campo Border radius? Sua loja ainda usa o código de loja virtual anterior do app, que não oferece esse campo. Todo o restante da lista está disponível.

Para onde ele leva clientes

Action define isso, e os dois valores se comportam de forma diferente:

Action	O que acontece quando o cliente clica
Go to quote cart page	O widget é um link para a página do seu carrinho de cotação, a página da loja virtual em /pages/request-for-quote, que "Shows the quote form and the customer's quote cart." A pessoa sai da página em que estava.
Open quote popup	O pop-up de cotação abre sobre a página em que ela já está. Ela nunca perde o lugar no seu catálogo.

A página do carrinho de cotação e o widget são configurados na mesma aba Quote cart page, então o nome e o caminho da página ficam logo acima do bloco do widget.

Qual escolher depende de como clientes montam uma cotação. Se reúnem vários produtos antes de pedir, Go to quote cart page é a melhor escolha: a página do carrinho de cotação mostra a lista inteira com as quantidades, e é isso que eles querem conferir. Se adicionam um produto e já estão prontos para enviar, Open quote popup poupa o carregamento de uma página.

Nota

O widget se justifica quando Click action está definido como Add product to quote cart: clientes reúnem produtos enquanto navegam, e o widget é o caminho de volta à lista. Com Open quote form popup, ele importa bem menos, porque as solicitações são concluídas na hora. Veja Definir o comportamento após o clique.

Onde o widget não aparece

O app oculta o widget na própria página do carrinho de cotação: não há para onde ele levar quando o cliente já está vendo a cotação. Em todos os outros lugares da sua loja virtual, ele acompanha a pessoa.

Escolher as cores

Escolha um Background color que se destaque nas suas páginas sem competir com os botões de compra e um Text color com contraste suficiente para ser legível de relance. Confira também no celular: um elemento flutuante disputa espaço com bolhas de chat ao vivo e avisos de cookies, então garanta que o seu continue legível onde ele aparecer. Se houver colisão com algo, mova-o com Position em vez de desativá-lo: Half top right e Half top left ficam longe dos controles de canto inferior que a maioria das ferramentas de chat usa.

Traduzir o texto do widget

Tudo o que você digitar em Text é texto da loja virtual, então passa pelas traduções do app junto com o restante do que clientes leem. Defina o texto por idioma ali, em vez de se contentar com inglês em uma loja traduzida. Veja Traduzir o texto da loja virtual.

Precisa de ajuda?

Se o widget colidir com outra coisa na sua loja virtual e Position não resolver, envie para nós uma captura de tela. Veja Falar com o suporte.

Próximos passos

• Definir o comportamento após o clique: controle o que acontece quando produtos são adicionados
• Página Request a Quote: a página do carrinho de cotação que o widget abre
• Página de histórico de cotações: onde clientes encontram cotações anteriores