Se o seu negócio já possui uma identidade visual própria, então você personalizar a aparência do Checkout Guru para seguir os mesmos padrões do seu site ou página de vendas. Adicione o logo da sua empresa, altere as cores, exiba ou oculte elementos visuais e escolha a versão do checkout.
Embora você possa trocar as cores da maioria dos elementos visuais e do texto, recomendamos escolher combinações de cores com alto contraste para garantir que seus clientes conseguem ler o que está escrito. Lembre-se de conferir o resultado final usando a ferramenta de visualização do editor de cores.
Para tornar sua página ainda mais estratégica e atraente, você pode inserir banners com imagens ou vídeos, personalizar o texto do botão de compra diretamente no checkout e alinhar a tipografia escolhendo a fonte ideal para o seu público (entre as opções Padrão, Sans-serif ou Serif).
Personalize o Layout Mobile do Checkout, para adaptar o tamanho das imagens do produto (pequena, média ou grande) e posicionar os detalhes da compra de forma estratégica.
A aparência do Checkout Guru pode ser aplicada em 3 níveis:
-
Nível Global: aplica-se ao checkout de todos os produtos cadastrados - configuração padrão;
-
Nível do Produto: aplica-se ao produto em questão - sobrescreve as definições do item 1;
-
Nível da Oferta: aplica-se à oferta do produto em questão - sobrescreve as definições dos itens 1 e 2.
Nesse tutorial, sempre que possível, você será orientado a realizar a configuração a nível global (recomendado). Para realizar configurações nos demais níveis, acesse a aba Checkout no cadastro do produto ou oferta em questão.
Nessa página:
-
Alterar a versão do Checkout
-
Mudar as cores da página do Checkout
-
Personalizar a Tipografia (Tipo de Letra) do Checkout
-
Configurar o Layout Mobile do Checkout
-
Configurar banners com imagens e vídeos no Checkout
-
Personalizar o Texto do Botão de Compra do Checkout
-
Mudar a ancoragem visual do parcelamento
-
Outras opções de estilo e aparência
Antes de começar, você precisa…
-
Ser usuário administrador ou ter permissão para realizar as ações a seguir.
Alterar a versão do Checkout
A Guru possui a versão V5 de Checkout. E dentro da V5, você pode escolher qual versão do checkout que deseja utilizar: One Page v.5 ou Multi step v.5.
A versão One Page concentra todos os campos de preenchimento em uma só página. Enquanto na versão Multi Step, o processo de pagamento é dividido em várias páginas (ou etapas).
Você pode testar as versões do checkout com o teste AB de checkout.
Etapas:
1 - De acordo com o nível de configuração que deseja aplicar:
1.1 - Nível Global: acesse Configurações » Checkout.
1.2 - Nível do Produto: acesse Produtos » (produto desejado) » Checkout.
1.3 - Nível da Oferta: acesse Produtos » (produto desejado) » Ofertas » (oferta desejada) » Checkout.
2 - Em Aparência, selecione a Versão do Checkout que deseja.
3 - Clique em Enviar.
Mudar as cores da página do Checkout
Você pode alterar as cores do checkout para ficarem de acordo com as cores da sua marca, além disto, pode configurar cores do Checkout, podendo redefinir as cores ou utilizar a cor padrão da Guru.
Caso deseje utilize o redefinir para alterar as cores ou clique no Padrão Guru.
Etapas:
1 - De acordo com o nível de configuração que deseja aplicar:
1.1 - Nível Global: acesse Configurações » Checkout.
1.2 - Nível do Produto: acesse Produtos » (produto desejado) » Checkout.
1.3 - Nível da Oferta: acesse Produtos » (produto desejado) » Ofertas » (oferta desejada) » Checkout.
2 - Em Aparência, clique em Configurar Cores do Checkout.
3 - Na janela de edição, use os botões de controle ou informe o código da cor em formato hexadecimal para cada elemento do checkout. À medida que realiza as alterações, pode conferir oresultado do lado direito da janela.
-
Seletor de cor: exibe uma paleta de cores para seleção - disponível em cada elemento do checkout;
-
Redefinir: desfaz todas as alterações realizadas;
-
Padrão Guru: retorna ao padrão de cores do Checkout Guru;
-
Pré-visualização: alterna a pré-visualização entre desktop e dispositivo móvel.
Ao concluir as alterações, clique em Enviar.
4 - De volta à seção Aparência, clique em Enviar para salvar as alterações realizadas.
Personalizar a Tipografia (Tipo de Letra) do Checkout
É possível alterar a fonte (tipo de letra) do seu checkout para deixá-lo com a identidade visual da sua marca.
As opções de tipo de letra são:
-
(Padrão): mantém a fonte nativa e padrão da Guru no checkout;
-
Sans-serif: fontes modernas, limpas e sem traços nas extremidades, excelentes para leitura em telas digitais; e
-
Serif: Fontes clássicas e tradicionais que possuem pequenos traços/detalhes nas extremidades das letras, ideais para um tom mais formal ou editorial.
Etapas:
1 - De acordo com o nível de configuração que deseja aplicar:
1.1 - Nível Global: acesse Configurações » Checkout.
1.2 - Nível do Produto: acesse Produtos » (produto desejado) » Checkout.
1.3 - Nível da Oferta: acesse Produtos » (produto desejado) » Ofertas » (oferta desejada) » Checkout.
2 - Em Aparência, clique em Tipografia.
3 - Em Tipo de Letra, selecione o tipo de letra que deseja no Checkout.
4 - Clique em Enviar.
Configurar o Layout Mobile do Checkout
Você pode personalizar o layout do checkout para dispositivos móveis, adaptando a exibição de imagens e detalhes do pedido. Agora, é possível alterar o tamanho da imagem do produto (para pequena, média ou grande) e configurar o posicionamento exato do detalhe da compra no mobile.
Essa flexibilidade ajuda a tornar a experiência de compra no celular mais limpa, intuitiva e totalmente focada em conversão.
Etapas:
1 - De acordo com o nível de configuração que deseja aplicar:
1.1 - Nível Global: acesse Configurações » Checkout.
1.2 - Nível do Produto: acesse Produtos » (produto desejado) » Checkout.
1.3 - Nível da Oferta: acesse Produtos » (produto desejado) » Ofertas » (oferta desejada) » Checkout.
2 - Em Aparência, clique em Layout Mobile.
3 - Em Layout Mobile, é possível configurar a Imagem do Produto e o Posicionamento do Detalhe da Compra.
Imagem do Produto
Em Imagem do Produto selecione o tamanho ideal da imagem no checkout - Pequena, Média ou Grande).
É possível configurar a imagem do produto como Pequena, Média e Grande.
Posicionamento do Detalhe da Compra
Em Posicionamento do Detalhe da Compra é possível selecionar a posição onde a informação do detalhe do produto irá aparecer no dispositivos móveis.
-
Escolha onde exibir a imagem e a descrição do produto nos dispositivos móveis - Em Cima, Em Baixo ou Em Ambos;
-
Mostra o Detalhe da Compra Expandido: quando ativado, exibe nome da loja e detalhes da compra em formato expandido nos dispositivos móveis.
-
Ocultar Compra Segura: quando ativado, não exibe a seção Compra Segura na versão para dispositivos móveis.
4 - Clique em Enviar.
Configurar banners com imagens e vídeos no Checkout
Você pode personalizar ainda mais o seu checkout inserindo banners com imagens ou vídeos. Essa configuração pode ser aplicada em nível global, por produto ou por oferta, permitindo destacar sua marca de forma estratégica.
Nota: Para a inserção de vídeos, o recurso é compatível exclusivamente com conteúdos hospedados na plataforma Panda Vídeos. Para isso, crie a sua conta Panda Vídeo e aproveite todos os benefícios de ser cliente Digital Manager Guru.
Configurar Banners com imagens
Você pode carregar imagens estrategicamente posicionadas no topo, na lateral ou abaixo dos detalhes do checkout.
Etapas:
1 - De acordo com o nível de configuração que deseja aplicar:
1.1 - Nível Global: acesse Configurações » Checkout.
1.2 - Nível do Produto: acesse Produtos » (produto desejado) » Checkout.
1.3 - Nível da Oferta: acesse Produtos » (produto desejado) » Ofertas » (oferta desejada) » Checkout.
2 - Em Aparência, clique em Banners para configurar imagem.
3 - Em Banners configure a opção desejada:
Posição do Banner Imagem - Topo (Desktop e Mobile)
Se deseja configurar o Banner no topo, você pode inserir a imagem no Desktop ou no Mobile.
Etapas:
1- Em Banners, clique em Topo.
2 - Em Topo, clique na aba Imagem, e em seguida configure:
-
Banner em largura total: quando ativado, a imagem do banner ficará em largura total no checkout;
-
Selecionar Imagem: selecione a imagem que deseja inserir no topo do checkout.
-
Usar imagem desktop: quando ativado, indica que o mobile usará o mesmo banner de imagem que está configurado para o desktop - nesse caso não é necessário fazer upload de dois arquivos;
-
Pré-visualização: alterna a pré-visualização entre desktop e dispositivo móvel - atualiza em tempo real conforme edição à esquerda.
3 - Clique em Enviar.
Posição do Banner Imagem - Lateral (apenas Desktop)
Se deseja configurar o Banner na Lateral, você pode inserir a imagem no Desktop.
Etapas:
1- Em Banners, clique em Lateral.
2 - Em Lateral, informe:
-
Selecionar Imagem: selecione a imagem que deseja inserir na lateral do checkout.
-
Pré-visualização: alterna a pré-visualização entre desktop - atualiza em tempo real conforme edição à esquerda.
3 - Clique em Enviar.
Posição do Banner Imagem - Abaixo do Detalhe (apenas Desktop)
Se deseja configurar o Banner abaixo do Detalhe, você pode inserir a imagem no Desktop.
Etapas:
1- Em Banners, clique em Abaixo do Detalhe.
2 - Em Abaixo do Detalhe, clique na aba Imagem, e em seguida configure:
-
Selecionar Imagem: selecione a imagem que deseja inserir abaixo do detalhe no checkout.
-
Pré-visualização: alterna a pré-visualização entre desktop - atualiza em tempo real conforme edição à esquerda.
3 - Clique em Enviar.
Configurar Banners com vídeos
Você pode tornar seu checkout mais dinâmico utilizando conteúdo em vídeos. posicionadas no topo ou abaixo dos detalhes do checkout.
Importante: apenas vídeos alojados na plataforma Panda Vídeo.
Crie a sua conta Panda Vídeo e aproveite todos os benefícios de ser cliente Digital Manager Guru.
Etapas:
1 - De acordo com o nível de configuração que deseja aplicar:
1.1 - Nível Global: acesse Configurações » Checkout.
1.2 - Nível do Produto: acesse Produtos » (produto desejado) » Checkout.
1.3 - Nível da Oferta: acesse Produtos » (produto desejado) » Ofertas » (oferta desejada) » Checkout.
2 - Em Aparência, clique em Banners para configurar vídeo.
3 - Em Banners configure a opção desejada:
Posição do Banner - Topo (Desktop e Mobile)
Se deseja configurar o Banner no topo, você pode inserir vídeo no Desktop ou no Mobile.
Etapas:
1- Em Banners, clique em Topo.
2 - Em Topo, clique na aba Vídeo, e em seguida configure:
-
Banner em largura total: quando ativado, o banner do vídeo ficará em largura total no checkout;
-
Vídeo Desktop: cole o link do player do Panda Vídeo;
-
Usar vídeo desktop: quando ativado, indica que o mobile usará o mesmo banner de vídeo que está configurado para o desktop - nesse caso não é necessário fazer upload de dois arquivos;
-
Vídeo Mobile: cole o link do player do Panda Vídeo - para inserir o link para aparecer no topo do mobile, será preciso desativar a opção usar vídeo desktop;
-
Pré-visualização: alterna a pré-visualização entre desktop e dispositivo móvel - atualiza em tempo real conforme edição à esquerda.
3 - Clique em Enviar.
Nota: orientamos seguir o tamanho de vídeo proporcional recomendado pelo Panda Vídeo.
Posição do Banner - Abaixo do Detalhe (apenas Desktop)
Se deseja configurar o Banner abaixo do Detalhe, você pode inserir vídeo no Desktop.
Etapas:
1- Em Banners, clique em Abaixo do Detalhe.
2 - Em Abaixo do Detalhe, clique na aba Vídeo, e em seguida configure:
-
Link do Panda Vídeo abaixo do Detalhe: cole o link do player do Panda Vídeo;
-
Pré-visualização: pré-visualização entre desktop - atualiza em tempo real conforme edição à esquerda.
3 - Clique em Enviar.
Nota: orientamos seguir o tamanho de vídeo proporcional recomendado pelo Panda Vídeo.
Não é possível inserir vídeo na posição lateral do banner.
Personalizar o Texto do Botão de Compra do Checkout
Você pode personalizar o texto do botão de compra para adaptá-lo ao perfil do seu público e ao tipo de produto.
Essa flexibilidade ajuda a tornar sua página de checkout mais clara, persuasiva e totalmente alinhada à comunicação da sua marca.
Etapas:
1 - De acordo com o nível de configuração que deseja aplicar:
1.1 - Nível Global: acesse Configurações » Checkout.
1.2 - Nível do Produto: acesse Produtos » (produto desejado) » Checkout.
1.3 - Nível da Oferta: acesse Produtos » (produto desejado) » Ofertas » (oferta desejada) » Checkout.
2 - Em Aparência, em Texto do Botão de Compra, selecione o botão de acordo com o tipo de Venda.
-
Venda Avulsa: o texto do botão que deseja que apareça no checkout para vendas avulsas - Comprar Agora; Comprar; Pagar Agora ou Pagar;
-
Venda Recorrente (Assinaturas): o texto do botão que deseja que apareça no checkout para assinaturas - Assinar Agora ou Assinar.
3 - Clique em Enviar.
Mudar a ancoragem visual do parcelamento
As opções de parcelamento são importantes para a decisão de compra de muitos clientes. Pode personalizar como o parcelamento é apresentado.
Opção disponível somente quando o parcelamento personalizado é utilizado.
Etapas:
1 - De acordo com o nível de configuração que deseja aplicar:
1.1 - Nível Global: acesse Configurações » Checkout.
1.2 - Nível do Produto: acesse Produtos » (produto desejado) » Checkout.
1.3 - Nível da Oferta: acesse Produtos » (produto desejado) » Ofertas » (oferta desejada) » Checkout.
2 - Em Aparência, selecione a opção desejada para a Ancoragem Visual do Parcelamento:
-
Ocultar: não exibe informação sobre parcelamento junto ao total do pedido.
-
Mostrar selecionado: exibe o parcelamento selecionado junto ao total do pedido.
-
Mostrar máximo: exibe o parcelamento máximo disponível junto ao total do pedido.
3 - Se deseja dar mais destaque ao parcelamento ao invés do valor total do pedido, ative a respectiva opção:
4 - Clique em Enviar.
Outras opções de estilo e aparência
Pode também personalizar o preço do frete e ativar a confirmação por Recaptcha no Checkout Guru.
Etapas:
1 - De acordo com o nível de configuração que deseja aplicar:
1.1 - Nível Global: acesse Configurações » Checkout.
1.2 - Nível do Produto: acesse Produtos » (produto desejado) » Checkout.
1.3 - Nível da Oferta: acesse Produtos » (produto desejado) » Ofertas » (oferta desejada) » Checkout.
2 - Em Aparência, pode ativar as seguintes opções:
Ocultar preço do frete quando zero
Quando ativado, não exibe o item “Frete” nos detalhes da compra quando o valor do frete é igual a zero.
Redirecionar quando não aprovado
Quando ativado, direciona imediatamente o usuário para a página de pagamento negado, ao invés de perguntar se o usuário deseja tentar novamente.
Mostrar o valor com juros no email e invoice
Quando ativado, exibe o valor do pedido com juros no e-mail transacional e na página padrão de confirmação do pedido (invoice).
Exibir valor total com juros
Quando ativado, exibe o valor total do checkout contemplando os juros do parcelamento.
Exibir mensagem genérica de juros
Quando ativado, exibe uma mensagem genérica de juros.
Para que esta mensagem seja exibida, é necessário que a oferta tenha taxas de juros configuradas.
3 - Clique em Enviar.
Mais Recursos