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

Você pode escolher qual versão do checkout deseja utilizar: One Page ou Multi Step. 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).

Para escolher uma versão, siga os passos abaixo.

1 - No menu lateral acesse Configurações > 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.

1 - No menu lateral acesse Configurações > Checkout.

2 - Em Aparência, clique no botão Escolher Cores.

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.

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.

1 - No menu lateral acesse Configurações > 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 Checkout no mobile, o preço do frete e ativar a confirmação por Recaptcha.

1 - No menu lateral acesse Configurações > 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.

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.

Ocultar Compra Segura no Mobile

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

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

Ativar o Recaptcha

Quando ativado, exibe o item “Não sou um robô” nos casos em que há suspeitas de robôs. Tem função de proteger seu site contra robôs programados para criação de pedidos.

3 - Clique em Enviar.


Mais Recursos