A Yampi acaba de lançar a nova versão do Checkout Mobile, trazendo melhorias significativas no visual para garantir mais performance, fluidez na experiência de compra e maior harmonia na conversão pelo celular. Essa mudança se aplica:
Novas lojas: a partir de 04/02/2026 toda nova conta criada na Yampi já virá com o novo layout ativo por padrão.
Lojas existentes: todas as lojas que utilizam a Yampi terão acesso ao novo layout e dessa vez o lojista poderá alternar entre os layouts quantas vezes quiser (tempo indeterminado).
Lojas existente que usam CSS customizado: será necessário ajustar os códigos ao novo modelo de layout (Recomendamos copiar e guardar seu código CSS. Após revisar, aplique novamente após atualizar para o novo modelo.)
Nesse artigo vamos trazer as principais informações para que você esteja por dentro de todas as atualizações:
📌Atenção: Alteração do Layout pode ser realizada somente pelo proprietário da conta.
O que vai mudar nessa atualização do Checkout?
A principal mudança está no visual e na estrutura do Checkout Mobile, com foco em melhorar a jornada do cliente até a finalização da compra. Entre os pontos de destaque estão:
Navegação otimizada para telas menores
O formulário de preenchimento dos dados de compra foi redesenhado para ficar mais limpo, responsivo e agradável de visualizar em telas pequenas.
Resumo do Checkout ainda mais intuitivo
O resumo da compra ficou mais organizado, facilitando a conferência de produtos, valores e formas de pagamento, sem confusão para o cliente.Melhor fluidez entre etapas
O processo de navegação entre uma etapa e outra (dados pessoais, endereço, pagamento etc.) foi otimizado para ser mais rápido e sem travas.Provas sociais redesenhadas
Os elementos de confiança, como selos de segurança e avaliações, foram reposicionados para transmitir credibilidade de forma clara.Rodapé otimizado
O rodapé foi simplificado para melhorar a navegação e diminuir distrações durante a finalização da compra.
Duas opções de exibição do campo de cupom:
Nas etapas de identificação e Pagamento (fora do resumo da compra, nas demais etapas)
Resumo da compra (apenas dentro do resumo da compra)
Obs: Utilize o botão "veja como fica" para ter um pequeno preview de como vai ficar.
Essas melhorias juntas tornam o Checkout mais agradável e eficiente para quem compra pelo celular, que hoje representa a maioria das conversões.
Quais os benefícios da nova versão?
A atualização não é apenas estética: ela foi pensada, desenhada e estudada para impactar diretamente a conversão da sua loja. Entre os principais ganhos estão:
Maior clareza para o cliente: a experiência de compra fica mais simples e transparente, sem informações confusas.
Redução de desistências: ao tornar o processo mais rápido e objetivo, diminuem os pontos de fricção que levam ao abandono de carrinho.
Melhor taxa de conversão: a soma das melhorias contribui para que mais clientes concluam suas compras.
Menor tempo para finalização: o checkout se torna mais ágil, reduzindo etapas demoradas ou com carregamento pesado.
No fim, o objetivo é garantir que cada cliente percorra a jornada de compra com o mínimo de obstáculos possível, aumentando as chances de fechamento de vendas.
Como ativar o novo modelo de Checkout e fazer ajustes no CSS?
Para ativar o novo modelo de Layout, siga esses passos:
Passo 1 - Acesse o seu painel Yampi.
Passo 2 - Vá até "Checkout"→ "Personalizar".
Passo 3 - Clique em "Atualizar para novo layout". Caso tenha algum código css em seu Checkout, recomendamos que copie e guarde antes de confirmar essa etapa.
Passo 4 - Confirme a atualização para o novo layout e pronto!
⚠️Atenção: Se você utiliza CSS personalizado em seu Checkout, ele será removido. Recomendamos que você:
Copie e guarde seu Css em um bloco de notas.
Aplique o CSS novamente após a atualização.
Revise e ajuste o código, se necessário.
Caso queira, você pode retornar ao layout antigo quando desejar.
Como fazer ajustes no CSS?
Se você utiliza CSS customizado, siga os passos abaixo:
Passo 1 - Acesse o seu painel Yampi.
Passo 2 - Vá até "Checkout"→ "Personalizar" → "Aba Aparência" → "CSS Customizado".
Passo 3 - Faça um backup do seu CSS atual e salve em um local seguro.
Passo 4 - Atualize seu Checkout para a nova versão. Aplique o CSS novamente, veja como ele se comporta. Se notar quebras ou conflitos visuais, ajuste os trechos problemáticos.
Passo 6 - Salve e pronto! 🥳
Como personalizar a exibição dos cupons no Checkout?
Na nova versão do Checkout, você pode escolher entre duas formas de exibir o campo de cupom de desconto. Assim, é possível definir a visualização que faz mais sentido para a sua operação, de forma simples e prática.
Passo 1 - Acesse o seu painel Yampi.
Passo 2 - Vá até "Checkout"→"Resumo".
Passo 3 - Clique em "Exibir campo de cupom de desconto" para ver as duas opções disponíveis.
Passo 4 - Clique em "Veja como fica" para saber como é e onde fica a exibição do cupom e selecione o modelo desejado.
Clique em "Salvar" e pronto!
Como fica cada modelo de exibição do cupom?
A seguir, você pode confere como funciona cada modelo de exibição do campo de cupom no Checkout e onde ele aparece durante a finalização da compra.
1. Cupom fora do resumo de compra
Ideal para: lojas que utilizam cupons como principal estratégia de venda ou fazem campanhas promocionais frequentes.
2. Apenas dentro do resumo de compra
Ideal para: lojas que usam cupons pontualmente e priorizam um checkout mais simples e direto.
Dúvidas frequentes🤔
▶️Clique na setinha para abrir o conteúdo de Dúvidas frequentes*
O que é essa atualização do Checkout?
O que é essa atualização do Checkout?
É a nova versão do Checkout Mobile da Yampi, redesenhada para melhorar a performance, a clareza das etapas e a conversão em dispositivos móveis.
Meu Checkout será atualizado?
Meu Checkout será atualizado?
Novas lojas: a partir de 04/02/2026 toda nova conta criada na Yampi já virá com o novo layout ativo por padrão.
Lojas existentes: todas as lojas que utilizam a Yampi terão acesso ao novo layout e vocÊ poderá alternar entre os layouts quantas vezes quiser (por tempo indeterminado).
Lojas existente que usam CSS customizado: será necessário ajustar os códigos ao novo modelo de layout (Recomendamos copiar e guardar seu código CSS. Após revisar, aplique novamente após atualizar para o novo modelo.)
O que vai mudar no visual do Checkout?
O que vai mudar no visual do Checkout?
O formulário de compra, as provas sociais, o rodapé e as transições entre etapas foram otimizados. O Checkout agora tem uma estrutura padrão, o que garante consistência e evita erros visuais.
Por que o CSS customizado será desconsiderado?
Por que o CSS customizado será desconsiderado?
Para garantir estabilidade, performance e compatibilidade com futuras versões, a nova versão ignora customizações feitas via CSS manual. Esses códigos podem conflitar com a nova estrutura visual e causar:
Quebras no layout;
Elementos sobrepostos ou desalinhados;
Travamentos ou lentidão no carregamento.
Antes de migrar para o novo modelo de Checkout, salve o CSS e depois insira novamente, fazendo os ajustes se necessário.
Como saber se tenho CSS customizado ativo?
Como saber se tenho CSS customizado ativo?
No seu painel Yampi, vá em Checkout > Personalizar > Aba Aparência > CSS Customizado.
Posso visualizar as mudanças antes de atualizar meu Checkput?
Posso visualizar as mudanças antes de atualizar meu Checkput?
Sim. Antes de tomar qualquer decisão, você pode ver como é o novo Checkout clicando em "Ver como fica".
As duas opções estão disponíveis para todas as lojas?
As duas opções estão disponíveis para todas as lojas?
As opções estão disponíveis para lojas que utilizam a nova versão do Checkout.
Como faço os ajustes necessários?
Como faço os ajustes necessários?
Se você utiliza CSS customizado, siga os passos abaixo:
Passo 1 - Acesse o seu painel Yampi.
Passo 2 - Vá até "Checkout"→ "Personalizar" → "Aba Aparência" → "CSS Customizado"
Passo 3 - Faça um backup do seu CSS atual e salve em um local seguro.
Passo 4 -Aplique o CSS na nova versão do Checkout e veja como ele se comporta.
Passo 5 - Se notar quebras ou conflitos visuais, ajuste os trechos problemáticos.
Passo 6 - Salve e aprove o novo layout para liberar a versão otimizada 🥳
No painel, você poderá:
Conferir como o novo Checkout aparece
Identificar quebras ou conflitos no CSS
Ajustar ou remover os trechos problemáticos
Salvar e aprovar a versão final
Essa configuração altera o funcionamento dos cupons?
Essa configuração altera o funcionamento dos cupons?
Não. A configuração define apenas onde o campo de cupom será exibido no Checkout. As regras e condições dos cupons continuam as mesmas.
Em caso de dúvidas, clique no balãozinho de atendimento em seu painel ou nos encaminhe por e-mail para [email protected] 😉