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 personalizar o Cabeçalho?
Como personalizar 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/cronômetro:
Texto da barra de anúncio: Insira o texto que deseja mostrar na barra de anúncio, localizada no cabeçalho do seu checkout;
Texto do cronômetro: Insira o texto que acompanha o seu cronômetro;
Tempo do cronômetro: Defina o tempo do crômetro.
💡 Importante saber: se não quiser ter um cronômetro no checkout, é só deixar o tempo marcado com o valor 0.
Você também pode personalizar as cores referentes a barra de anúncio/cronômetro:
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 personalizar o Rodapé?
Como personalizar 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 personalizar o Resumo?
Como personalizar 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 personalizar a Aparência?
Como personalizar 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.
Como personalizar o Order bump?
Como personalizar o Order bump?
Na aba ''Order bump'' você pode personalizar as cores do Order bump ofertados em seu Checkout.
É possível personalizar as cores das seguintes seções:
(colocar outra IMAGEM)
Área da oferta
⬜ Cor do fundo: cor do fundo da oferta e cor do fundo da tag ''você tem 1 oferta''.
⬜ Cor da borda: cor definida para a borda e linha divisória.
Preço
⬜ Cor do valor da oferta: cor do valor da oferta.
Títulos e textos
⬜ Cor do título: titulo da promoção e título da tag ''você tem 1 oferta".
⬜ Cor do texto: cor do texto de nome do produto, título das caixinhas de seleção e texto da mensagem
Botão
⬜ Cor do botão: cor do botão utilizado para adicionar a oferta.
⬜ Cor do texto: cor utilizada no texto do botão.
💡Importante saber: As cores personalizadas serão aplicadas em todas as ofertas de order bump, não apenas a uma oferta específica.
Em caso de dúvidas, clique no balãozinho de atendimento em seu painel ou nos encaminhe por e-mail para [email protected] 😉