modal anti abandono
Comprar
Demonstração em Tempo Real

CST - Modal Anti-Abandono (Especialista CRO)

O Modal Anti-Abandono é uma ferramenta de alta conversão projetada para recuperar clientes que estão prestes a sair da sua loja. Ele utiliza gatilhos comportamentais inteligentes para oferecer um incentivo (cupom) no momento crítico da decisão.

Gatilhos de Ativação

A lógica de detecção é otimizada por dispositivo:

  • Desktop (Computador): Ativado por Exit-Intent (intenção de saída). O modal aparece quando o usuário move o cursor do mouse para fora da área da página.
  • Mobile (Celular): Ativado por Inatividade (15 segundos). O modal aparece após 15 segundos sem interação (toque ou scroll).

Funcionalidades Premium

  • Carrossel de Itens Abandonados: Exibe os produtos que já estão no carrinho.
    • Se houver apenas 1 item: Ele é centralizado e ganha destaque.
    • Se houver 2 ou mais: Ativa um carrossel com setas de navegação e suporte a swipe no mobile.
  • Aplicação Automática de Desconto: O botão de ação anexa automaticamente o código do cupom ao link (?discount=CODE). Quando o cliente clica, o desconto já aparece aplicado no checkout.
  • Integração com Esquemas de Cores: Utiliza os esquemas de cores nativos do tema Dawn, garantindo consistência visual.
  • Cupom "Clique para Copiar": Permite que o usuário copie o código com um clique, exibindo uma mensagem de confirmação (toast).
  • sessionStorage: O modal aparece apenas uma vez por sessão, evitando incomodar o cliente repetidamente.
  • Modo Visualização: Opção para forçar a exibição do modal no editor para facilitar a personalização.

Como Configurar

As configurações estão localizadas de forma global no seu tema:

  1. Vá em Personalizar (Customizer).
  2. Clique no ícone de engrenagem (Configurações do Tema).
  3. Procure por CST - Anti-Abandono. (Veja os blocos JSON necessários em Configuração Global)

Opções Disponíveis:

  • Ativar Modal: Liga/Desliga a funcionalidade.
  • Modo Visualização: Use para editar o modal vendo o resultado em tempo real.
  • Mostrar itens do carrinho: Ativa/Desativa o carrossel de produtos.
  • Botão de Ação: Personalize o texto.
  • Destino Padrão: Escolha se o botão deve enviar para o Carrinho ou Checkout (caso o link personalizado esteja vazio).
  • Link Personalizado: Sobrescreve o destino padrão se preenchido.
  • Esquema de Cores: Define o estilo visual baseado nas cores da sua marca.

Arquivos Relacionados

  • snippets/cst-anti-abandono.liquid: HTML, CSS e JS do modal.
  • config/settings_schema.json: Campos de configuração administrativa.
  • layout/theme.liquid: Onde o snippet é renderizado globalmente.

Desenvolvido com foco em performance e conversão (CRO).