Passar para o conteúdo principal
Todas as coleçõesCheckoutPersonalizar
Como personalizar o seu checkout na Yampi?
Como personalizar o seu checkout na Yampi?

Passo a passo para configurar a personalização do seu checkout.

Atualizado há mais de 10 meses

O Checkout da Yampi pode ter o seu layout personalizado combinando com as cores e identidade visual da sua marca. Super legal, né?

Nesse artigo, vamos mostrar como você pode personalizar cada parte do seu checkout e iremos abordar os seguintes temas:

Como personalizar o Checkout?

Passo 1 - Acesse o seu painel da Yampi.

Passo 2 - Clique em Checkout → Personalizar.


Na página de Personalizar serão exibidos 4 abas, cada uma delas permite modificações em áreas diferentes do Checkout. Siga as recomendações abaixo:

⬇️ Clique na setinha de cada um pra abrir o conteúdo*

Como configurar o cabeçalho?

Na aba Cabeçalho, você pode personalizar os seguintes elementos:


​

Cores

Você pode personalizar:

  • A cor do seu cabeçalho (Ver na setinha 1 da imagem abaixo);

  • A cor dos elementos (Ver na setinha 1 da imagem abaixo).

É importante ressaltar que não é permitido utilizar a mesma cor para o fundo e para os elementos do cabeçalho, pois o texto iria se camuflar com a cor do fundo. É necessário utilizar cores diferentes.

Configurações

No bloco de Configurações, na parte de Logotipo, você pode alterar:

  • Qual logotipo será utilizado, selecionando entre o mesmo logotipo da loja, um logotipo exclusivo para o Checkout, ou ainda utilizar o logotipo da marca do produto que for adicionado no carrinho;
    ​

  • Qual posicionamento terá o logotipo, escolhendo entre esquerda ou centro.

Abaixo o exemplo de alinhamento do logotipo à Esquerda.

Exemplo de alinhamento do logotipo ao Centro.

Barra de anúncio / Cronômetro

Neste bloco você pode personalizar os elemento da Barra de anúncio:

  • Cor do fundo da barra de anúncio (Ver na setinha 1 da imagem abaixo);

  • Cor do texto da barra de anúncio (Ver na setinha 2 da imagem abaixo);

  • Cor do cronômetro (Ver na setinha 3 da imagem abaixo).
    ​
    ​

Como configurar o Rodapé?

Na aba Rodapé, você pode personalizar os seguintes elementos:


​

Cores

  • Modificar a cor do fundo do rodapé;

  • Modificar a cor do texto do rodapé.

Na imagem abaixo temos um exemplo dessa configuração:

Atendimento

Neste bloco, você pode marcar se deseja ou não exibir meios de atendimento em seu rodapé.

Caso marque Sim, abrirá o campo demonstrado na imagem. Você pode exibir o contato de WhatsApp da loja, Telefone/celular e até o E-mail.


Você pode configurar ou editar essas informações aqui.

Configurações

Nessa seção você pode marcar qual ou quais elementos deseja demonstrar no rodapé do seu checkout.

Você pode optar por mostrar:

  • Configurar o posicionamento rodapé no celular

  • Ícones das opções de pagamento;

  • Selo de segurança;

  • Nome da loja;

  • Endereço do site;

  • Endereço da loja;

  • Razão social e CNPJ ou nome completo.

Abaixo um exemplo do checkout com essas opções.


Visualização dos elementos alinhados à esquerda.
​

Visualização dos elementos alinhados ao centro.
​

Como configurar o Resumo?

Na aba Resumo, você pode personalizar os seguintes elementos:

Resumo de compra no celular

Neste bloco, você configurar como desejar exibir o resumo de compras na versão mobile do checkout.
​

Sempre aberto - Exibe toda a listagem de produtos que estão sendo comprados;
​
​Sempre fechado - Indiferente da quantidade de itens sendo comprada, o resumo por padrão é exibido sempre fechado;
​
​Aberto apenas se tiver 1 item - Se a compra tiver mais de 1 item sendo comprado, o resumo é exibido fechado, se tiver só 1 item sendo comprado, ele é exibido aberto como na imagem abaixo.


Configurações

Neste bloco você pode configurar se deseja ou não exibir o campo de Cupom de desconto e também permitir ou não a mudança de Quantidade de itens no checkout.

Exibir campo de cupom de desconto - Essa opção permite que seu cliente insira cupons de desconto na finalização de sua compra.
​

Permitir mudança de quantidade dos itens - Essa opção permite que o seu cliente altere a quantidade de itens no checkout.

Como configurar a aparência?

Na aba Aparência, você pode personalizar os seguintes elementos:

Cores

Geral

Nessa parte do bloco, você pode personalizar as cores gerais do seu checkout.
​

  • Cor dos títulos dos blocos (Ver na setinha 1 da imagem abaixo);

  • Cor das descrições dos blocos (Ver na setinha 2 da imagem abaixo);

  • Cor da tag de etapa de compra ativa (Ver na setinha 3 da imagem abaixo).

  • Cor do valor total da compra (Ver na setinha 4 da imagem abaixo).

Tag de etapas

Nessa parte do bloco você pode personalizar:

  • Cor da tag;

  • Cor do número.

Na imagem abaixo temos um exemplo dessa configuração

Tag de desconto

Nessa parte do bloco você pode personalizar:


​

  • Cor da Tag;

  • Cor do texto;

Na imagem abaixo temos uma Tag de desconto personalizada:

Barra de progresso (Celular)

Neste bloco você pode personalizar:

  • Cor da barra de progresso;

  • Cor do número;

Abaixo você pode conferir um exemplo desta configuração:


​

Botões

Nessa seção você pode configurar como desejar exibir os botões no seu checkout.

Botão primário

Os botões primários são aqueles em que o cliente caminha de um bloco para o outro, por exemplo, quando ele confirma seus dados pessoais e vai para a parte de preenchimento dos dados de endereço.


​

Na imagem abaixo, temos um botão primário:


​

Botão secundário

Os botões secundários são aqueles em que o consumidor realiza ações dentro do bloco em que ele está, como por exemplo, no formulário de CEP quando o cliente clica no botão de calcular frete.

Na imagem abaixo, temos um botão secundário.

Botão terciário

Os botões terciários, são links de ações menos prioritárias no Checkout, como o botão de remover no formulário de Cupom de Desconto.
​

Na imagem abaixo, temos um botão terciário.

Tipografia

Nessa seção você pode personalizar a tipografia que deseja utilizar o seu checkout
​

Você pode personalizar:

  • Fonte dos títulos;

  • Fonte dos Textos;

  • Botões em caixa alta.

As fontes liberadas para seleção são:

  • Rubik
    Abaixo temos um exemplo de como fica a aplicação dessa fonte (título do bloco na setinha 1 e descrição do bloco na setinha 2).

  • Work Sans
    Abaixo temos um exemplo de como fica a aplicação dessa fonte (título do bloco na setinha 1 e descrição do bloco na setinha 2).
    ​

  • Montserrat
    Abaixo temos um exemplo de como fica a aplicação dessa fonte (título do bloco na setinha 1 e descrição do bloco na setinha 2).
    ​

  • Nunito
    Abaixo temos um exemplo de como fica a aplicação dessa fonte (título do bloco na setinha 1 e descrição do bloco na setinha 2).

  • Taviraj
    Abaixo temos um exemplo de como fica a aplicação dessa fonte (título do bloco na setinha 1 e descrição do bloco na setinha 2).
    ​

Além da seleção de fontes para títulos e textos do Checkout, também é possível selecionar se os títulos serão exibidos em caixa alta (todas as letras maiúsculas) ou não.
​

Abaixo temos um exemplo de como ficaria um título em caixa alta:

Visual e botões

Nessa seção você pode definir o formato dos botões do seu checkout:
​

Na caixinha, disponibilizamos esses formatos:

  • Retangular;

  • Arredondado;

  • Oval.
    ​

CSS customizado

Caso tenha necessidade de alguma personalização que não oferecemos nativamente, você pode inserir um código de CSS customizado.
​

⚠️ Atenção: Utilize essa funcionalidade com cuidado. Recomendamos que contate um profissional de sua confiança para te auxiliar nesse código, pois se inserido incorretamente o layout do seu checkout pode quebrar e não conseguimos oferecer suporte para esse tipo de erro.
​


Em caso de dúvidas, clique no balãozinho de atendimento em seu painel ou nos encaminhe por e-mail para [email protected] 😉


​
​

Artigos relacionados
Como ativar o domínio próprio no checkout da Yampi?
Taxa de conversão do checkout: como analisar as métricas?
Como cadastrar variações no produto?
Como cadastrar um produto no app?
Como configurar seu domínio da Locaweb na Yampi?
Respondeu à sua pergunta?