Como fazer personalizações no checkout

O checkout da Uappi conta com um conjunto de variáveis que permitem realizar personalizações visuais, como alteração de favicon, cores, mensagens e adição de selos.

Essas configurações possibilitam ajustes simples de front-end diretamente pelo painel, sem a necessidade de abertura de tickets, garantindo mais autonomia para o time da loja.

Onde encontrar a funcionalidade

Para localizar essa configuração no painel, siga o caminho: Configurações > Sistemas > Checkout > Variáveis.

Após acessar o módulo, basta ajustar as opções conforme a necessidade da loja.

O que pode ser configurado

Nas variáveis do checkout, é possível realizar diferentes tipos de personalização.

Modificar cores

É possível modificar:

• cor da mensagem de pagamento; título; mensagem de erro de pagamento e outros textos exibidos no checkout.

Favicon do checkout

Nesta configuração, é possível trocar a favicon exibida na área do checkout do site.
Para isso, basta adicionar a imagem desejada no campo correspondente.

Logo do topo do checkout

Também é possível alterar a logo exibida no topo do checkout. Assim como na favicon, é necessário apenas adicionar a imagem desejada.

Ícone de segurança

É possível trocar o ícone exibido ao lado da mensagem de segurança no checkout.

Mensagens do topo

Aqui você pode modificar:

• mensagem de segurança;
  
• mensagem de informação de contato.

Ambas exibidas no topo da página de checkout.

Mensagens do rodapé

No rodapé do checkout, é possível:

• editar mensagens de segurança;
  
• adicionar novas mensagens;
  
• remover mensagens existentes.

Formas de pagamento

Também é possível adicionar as formas de pagamento padrão disponíveis no checkout.

Caso a forma de pagamento utilizada pela loja não esteja no escopo padrão, é possível adicioná-la via código.

No código-fonte disponível, há um rascunho de como essa inclusão pode ser feita.

Pontos de atenção:

• em img src, deve ser adicionada a imagem da logo da forma de pagamento
  
• em width e height, deve ser definido o tamanho da imagem conforme o layout do site
  
• os tamanhos podem variar conforme o projeto, podendo ser diferentes dos exemplos exibidos.

Adição de selos

Para adicionar um selo, como, por exemplo, um selo de Loja Segura, basta incluí-lo via código. É possível utilizar o escopo padrão disponível ou apenas colar o script do selo desejado.

Informações importantes

• Para mudanças de cores de fundo, é necessário aguardar a limpeza automática de renderização, que ocorre a cada 30 minutos
  
• Caso a alteração não reflita após esse período, é necessário solicitar apoio ao time da Uappi
  
• O peso máximo das imagens é de até 200kb
  
• A resolução das imagens é definida conforme o projeto da loja

Conclusão

As variáveis de checkout permitem personalizar aspectos visuais importantes da página de finalização de compra, mantendo a padronização estrutural da plataforma.

Essas configurações facilitam ajustes rápidos no checkout, sem dependência técnica, enquanto a estrutura do checkout permanece padrão e válida para todos os projetos da Uappi.

Dúvidas?

Para ver mais conteúdos sobre a plataforma, acesse o Help Center da Uappi.