Skip to main content
Skip table of contents

Mudar a aparência do Checkout

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.

A aparência do Checkout Guru pode ser aplicada em 3 níveis:

  1. Nível Global: aplica-se ao checkout de todos os produtos cadastrados - configuração padrão;

  2. Nível do Produto: aplica-se ao produto em questão - sobrescreve as definições do item 1;

  3. 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

  • 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 2 a versão V4 e a V5 de Checkout. E dentro da V4 e da V5, você pode escolher qual versão do checkout que deseja utilizar: One Page v.4 ou Multi Step v.4 e 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.

aparencia-versao-5-checkout.png

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.

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 no botão Escolher Cores.

aparencia-escolher-cores-checkout-guru.png

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 o resultado final do lado direito da janela.

  1. Seletor de cor: exibe uma paleta de cores para seleção - disponível em cada elemento do checkout;

  2. Redefinir: desfaz todas as alterações realizadas;

  3. Padrão Guru: retorna ao padrão de cores do Checkout Guru;

  4. Pré-visualização: alterna a pré-visualização entre desktop e dispositivo móvel.

aparencia-selecionando-cores-checkout-guru.png

Ao concluir as alterações, clique em Enviar.

5 - De volta à seção Aparência, clique em Enviar para salvar as alterações realizadas.


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.

visual-parcelamento-v5.gif

3 - Se deseja dar mais destaque ao parcelamento ao invés do valor total do pedido, ative a respectiva opção:

destaque-parcelamento-v5.gif

4 - Clique em Enviar.


Outras opções de estilo e aparência

Pode também personalizar o Checkout no mobile, o preço do frete e ativar a confirmação por Recaptcha.

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:

Expandir o Header no Mobile

Quando ativado, exibe nome da loja e detalhes da compra em formato expandido nos dispositivos móveis.

header-mobile-v5.gif
Dar mais destaque ao produto no Mobile

Quando ativado, ao invés do nome da loja, exibe a imagem e a descrição do produto no topo do checkout para dispositivos móveis.

destaque-mobile-v5.gif

Ocultar Compra Segura no Mobile

Quando ativado, não exibe a seção “Compra Segura” na versão para dispositivos móveis.

compra-segura-mobile-v5.gif
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.

frete-mobile-v5.gif

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.

redirecionar-quando-nao-aprovado-v5.gif
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).

3 - Clique em Enviar.


Mais Recursos

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.