Storefront Notifications

Quando as pessoas adicionam produtos ao carrinho, alteram o carrinho lateral do app, finalizam a compra ou aplicam um código de desconto, o app mostra uma breve mensagem de sucesso ou erro na sua loja virtual. Storefront notifications permite escolher a aparência dessas mensagens.

Há três estilos:

• Toast — uma pequena mensagem em um canto da tela.
• Modal — um pop-up no centro da tela com um botão OK. Ele permanece até a pessoa fechá-lo.
• Banner — uma barra na parte superior ou inferior da tela.

Passo a passo para gerenciar

1. Abra Storefront notifications

   No app, clique em Add-on Features, encontre Storefront notifications e clique em Customize.

2. Escolha o estilo padrão

   Em Notification style, escolha o Default style: Toast, Modal ou Banner. Todas as mensagens usam esse estilo, a menos que você escolha outro para o recurso correspondente na próxima etapa.

   

3. Escolha um estilo por recurso (opcional)

   Em Style per feature, mantenha Default ou escolha outro estilo para um grupo de mensagens:

   • Add to cart — produtos que o app adiciona ao carrinho: a partir de páginas de produto, Quick Buy, Quick Order Form ou do carrinho lateral Wholesale do app.
   • Cart updates — alterações no carrinho lateral Wholesale do app, como atualizar o carrinho ou salvar ou excluir um endereço.
   • Checkout & Pay later — erros de checkout e mensagens de sucesso e erro de pedidos Pay later.
   • Discount code — mensagens da caixa de código de desconto do app, por exemplo quando um código é aceito ou não é válido para os itens do carrinho.

   Exemplo: mantenha Toast como estilo padrão e escolha Modal para Checkout & Pay later, para que as pessoas não deixem de ver a confirmação de Pay later.

4. Personalize cada estilo

   Defina a aparência de cada estilo na seção correspondente. Deixe uma cor vazia para usar a aparência padrão.

   Toast style

   • Auto hide — ativado por padrão. Desative para manter cada toast na tela até a pessoa fechá-lo.
   • Design — Classic, Card, Soft ou Pill.
   • Position — Top right, Top left, Bottom right ou Bottom left.
   • Auto hide after — de 2 a 30 segundos. O padrão é 5.
   • Success background, Error background e Text color.

   Modal style

   • Design — Classic, Card ou Dialog.
   • Button background e Button text — as cores do botão OK.
   • Corner radius — de 0 a 40 px.

   Banner style

   • Auto hide — ativado por padrão. Desative para manter o banner até a pessoa fechá-lo.
   • Design — Classic, Soft ou Floating.
   • Position — Top ou Bottom.
   • Auto hide after — de 2 a 30 segundos. O padrão é 5.
   • Success background, Error background e Text color.

5. Visualize e salve

   Em Preview, escolha um Preview template e clique em Show success ou Show error para ver esse estilo com as suas configurações. A visualização usa os mesmos modelos da sua loja virtual.

   

   Clique em Save.

Bom saber

• As pessoas fecham um Modal com OK, com o botão ×, clicando fora dele ou com a tecla Esc. Um modal nunca fecha sozinho.
• Até cinco toasts podem ficar na tela ao mesmo tempo. Quando chega o sexto, o mais antigo é removido.
• Apenas um modal e um banner são mostrados por vez. Uma nova mensagem substitui a que está na tela.
• Quando um pedido Pay later é concluído e a mensagem de sucesso é exibida, o app esvazia o carrinho e recarrega a página. Com Modal, a página recarrega quando a pessoa fecha o pop-up, para que a mensagem possa ser lida antes. Com Toast ou Banner, ela recarrega após alguns segundos.
• O texto das mensagens é editado como os outros textos da loja virtual. Consulte Editar e traduzir o conteúdo de alguns recursos do app.
• Precisa de outra forma de exibir as notificações? Clique em Contact support na seção Notification style e nossa equipe poderá ajudar.

Nota

Importante: confirme que a incorporação de app está ativada no seu tema, ou essas configurações não serão aplicadas na sua loja virtual. Consulte Ativar/desativar o app no tema.

Precisa de ajuda?

Se tiver qualquer dificuldade ao seguir estas etapas, não hesite em entrar em contato conosco pelo e-mail [email protected].