Carrinho e checkout na Shopify: o visual antes de pagar

O resumo direto

Carrinho e checkout na Shopify são as duas telas em que a pessoa já escolheu o produto e ainda pode desistir antes de pagar. O carrinho confirma o que vai, quanto custa e como voltar. O checkout pede entrega e pagamento, e o visual dele não mora no tema da loja: mora num editor à parte. A média documentada de abandono de carrinho é 70,22%, e uma fatia grande disso não é "a pessoa mudou de ideia". Custo extra, falta de confiança e checkout longo aparecem com número. O desenho certo mostra o total cedo, deixa comprar sem criar conta na frente, e usa a marca só o bastante para a pessoa saber que ainda está na mesma loja. Abaixo eu separo o que é tela de carrinho, o que a Shopify deixa mudar em qualquer plano, e o que só existe no Shopify Plus.

1. O que a pessoa precisa ver antes de pagar

Quem chega no carrinho já passou pela página de produto. A dúvida muda. Não é mais "esse produto serve?". É "quanto vou pagar no fim, quando chega, e o que acontece se eu desistir?".

A Baymard separa quem só estava olhando de quem travou por um problema da loja. 42% abandonaram porque ainda não iam comprar. Isso não se resolve com banner. No resto, 40% citaram custo extra alto (frete, taxa), 19% não confiaram no site com o cartão, 18% esbarraram em pedido de criar conta, 17% acharam o checkout longo ou complicado, 13% acharam a política de devolução ruim e 12% não conseguiram ver o custo total antes.

Quando eu desenho essa etapa, uso essa ordem. Primeiro o total, com frete ou um jeito claro de calcular. Depois o prazo. Depois a política de troca, em uma linha, com link. A marca fica no topo, pequena. O botão de seguir fica no mesmo bloco do total, não depois de um texto de campanha.

Se a loja ainda está sendo montada, a criação e ajuste de lojas Shopify é o lugar em que carrinho, tema e checkout entram no mesmo projeto. A página de produto, que vem antes, está no artigo sobre o que o design precisa mostrar na página de produto.

O que não é trabalho deste desenho

Trocar o checkout da Shopify por Yampi ou Cartpanda é outra decisão: pagamento, taxa e nota. O artigo sobre checkout da Shopify no Brasil, nativo ou externo trata disso. Aqui o assunto é o visual e a ordem da informação, no carrinho e no checkout que a Shopify desenha.

2. A tela do carrinho

O carrinho é a última tela em que a pessoa ainda mexe na compra com calma. Cada linha precisa ter foto, nome, variação, quantidade, preço da linha e um jeito óbvio de tirar o item. Quantidade sem o nome da variação gera suporte. Foto minúscula gera dúvida se o item certo entrou.

O resumo fica grudado no botão, no desktop ao lado e no celular logo acima do botão. Ele mostra subtotal, frete (ou o campo para calcular), desconto se houver, e total. Esconder o frete até a última etapa repete o motivo dos 40% e dos 12%: custo que aparece tarde.

Cupom não pode ser o elemento mais barulhento da tela. Um campo discreto, com rótulo "cupom", resolve quem tem código. Uma faixa enorme de "você ganhou desconto" empurra o total para baixo e atrasa quem já ia pagar.

O link de voltar à loja fica visível. Gente que abre o carrinho para conferir ainda quer olhar outro produto. Se a única saída é o botão de pagar, uma parte volta pelo navegador e perde o fio.

No celular, o botão de seguir ocupa a largura útil e respeita o alvo mínimo da WCAG 2.2: 24 por 24 pixels CSS. Ícone de lixeira colado na quantidade, sem área de toque, faz a pessoa apagar o item sem querer. Eu deixo espaço entre lixeira, quantidade e o nome.

3. Uma página ou três

No admin da Shopify, o layout padrão do checkout é de uma página. Dá para trocar para três páginas. A prévia do editor não atualiza na hora: depois de salvar, a conferência é no checkout de verdade da loja.

Uma página mostra informação, entrega e pagamento no mesmo fluxo, com menos sensação de "ainda faltam etapas". Três páginas separam isso em passos. Nenhuma das duas é mágica. O que pesa é a quantidade de campo, não o número de telas.

A Baymard descreve um fluxo enxuto com 12 a 14 elementos de formulário, ou 7 a 8 se contar só os campos. A média que eles registram nos checkouts dos Estados Unidos é 23,48 elementos por padrão, 14,88 só de campos. Eu não prometo cortar até o número deles. Eu olho o checkout da loja e risco o que não decide a entrega nem o pagamento: mensagem de marketing, cadastro obrigatório, campo extra de "como nos conheceu".

A mesma pesquisa estima que uma loja grande, nos Estados Unidos e na Europa, pode ganhar 35,26% de conversão só com desenho de checkout melhor. Isso é média de loja grande de lá, não uma meta da sua loja. Serve para lembrar que o problema costuma ser a tela, não "o brasileiro não compra".

Na avaliação de 2025, 64% dos sites de desktop e 63% dos de celular ficaram em desempenho medíocre ou pior no checkout. Loja grande também erra. Tema bonito na home não conserta essa etapa.

4. O que o plano deixa mudar

O checkout não se edita no editor de tema. A Shopify tem um editor de checkout e contas, em Configurações, Checkout. Lá entram logo, cor, fonte e apps. Parte da marca que você põe no checkout passa também para a conta do cliente.

A personalização padrão vale no plano Basic ou acima. O Plus libera o que a ajuda chama de personalização avançada, a Checkout Branding API, e apps nas páginas de informação, entrega e pagamento. App na página de obrigado e no status do pedido pode existir no Basic, se o app for elegível.

Fonte: central de ajuda da Shopify, lida em 16/10/2026.

Para a maior parte das lojas brasileiras que eu desenho, a linha do Basic já cobre o visual: logo, cor do botão, cor de fundo, fonte de título e de corpo. Plus entra quando a operação precisa de bloco de app no meio do pagamento ou de ajuste fino por API. Não é o primeiro passo de uma loja que ainda nem mostra o frete no carrinho.

Desde 5 de fevereiro de 2026, a Shopify não deixa mais adicionar imagem de fundo no cabeçalho nem na área principal do checkout. Se já existe uma imagem antiga, só dá para remover, não trocar. Eu trato isso como limite, não como bug: o checkout não é lugar de banner.

Se o carrinho da sua loja esconde frete, prazo ou o total, manda a URL do carrinho e o plano. Se ainda não criou a loja Shopify, fala comigo antes de criar: a loja nasce como loja de desenvolvimento, é montada pronta e transferida para o seu nome.

Falar sobre o projeto

5. Logo, cor e fonte sem competir com o pagamento

A própria Shopify pede checkout simples. A frase da ajuda é direta: as pessoas usam essas páginas para informar entrega e pagamento, e cor demais distrai ou dificulta a leitura. A orientação é contraste alto e imagem que não roube as palavras.

Na prática, eu levo três decisões.

A logo fica no topo, alinhada à esquerda ou ao centro, numa largura que não empurre o formulário para baixo no celular. Logo alta come a primeira dobra. O nome da loja no cabeçalho já existe. Se a logo repete o nome em letras enormes, eu reduzo.

A cor do botão e dos destaques (links) vem da marca, mas o texto do botão precisa passar no contraste. A WCAG pede no mínimo 4,5:1 para texto normal e 3:1 para texto grande (18 pontos, ou 14 em negrito). Botão amarelo com letra branca fina costuma falhar. Eu testo o par cor de fundo e cor da letra antes de salvar.

A fonte do checkout é uma lista da Shopify, título e corpo separados. Não é a fonte do tema. Se a loja usa uma fonte de marca muito estreita, ela pode nem aparecer aqui. Eu escolho a mais próxima e confiro se o campo continua legível. Campo de cartão com letra decorativa é onde a pessoa erra o número.

Campos podem ficar transparentes. Com o fundo transparente, o texto do campo tem de continuar legível sobre a cor da página. Se eu não consigo ler o exemplo dentro do campo, eu desligo o transparente.

Paleta do editor serve para reutilizar a mesma cor em botão, link e aviso. Mudou o hex numa amostra, muda em todo lugar que usa aquela amostra. Eu monto a paleta com poucas cores: fundo, texto, botão e erro.

6. Celular: resumo e cupom começam fechados

No celular, o padrão da Shopify esconde o resumo do pedido e o campo de cupom numa seção recolhida. A pessoa toca o resumo para ver o total e o cupom. Isso economiza altura e também esconde o número que evita o abandono por custo surpresa.

Existe um ajuste, "sempre mostrar o campo de cupom", nos dois layouts. Em uma página, o cupom aparece acima do resumo recolhido. Em três páginas, o resumo de cima abre por padrão, com o cupom junto.

Eu ligo esse ajuste quando a loja vive de cupom, porque o campo escondido gera mensagem de "não achei onde por o código". Eu deixo o resumo fácil de abrir mesmo assim, com o total parcial visível antes do toque. Total zero cliques é melhor. Se o layout não mostra, o rótulo do resumo precisa dizer o valor, não só "ver pedido".

O mesmo cuidado da área de toque vale aqui. Link de "esqueci o cupom" colado no campo, com letra miúda e sem espaço, falha no critério de 24 pixels CSS. Eu aumento o alvo ou afasto os dois controles.

7. Conta, prazo e política na hora certa

18% das pessoas na pesquisa da Baymard abandonaram porque o site quis que criassem conta. 62% dos sites não colocam a compra como convidado como a opção mais visível. Se o botão de convidado existe mas está em texto pequeno embaixo de "criar conta", para a pessoa é o mesmo que não existir.

No desenho, "comprar sem conta" é o botão principal. "Já tenho conta" fica ao lado, visível, sem ser o primeiro. Cadastro pode ser oferecido depois do pedido, na página de obrigado, quando a pessoa já pagou.

Prazo de entrega entra antes do pagamento, não só no e-mail. 20% dos abandonos na lista da Baymard foram porque a entrega era lenta demais. O design não acelera o correio. Ele evita que a pessoa descubra o prazo depois de digitar o cartão.

Política de devolução em uma frase, com link, fica perto do total. 13% abandonaram por política ruim. Se a política é clara e está escondida no rodapé da home, o efeito na prática é o mesmo de não ter.

Confiança com o cartão (19%) não se resolve com selo genérico empilhado. Resolve com checkout no domínio da loja, cadeado que o navegador já mostra, e nenhum bloco estranho entre o campo do cartão e o botão. App de upsell no resumo pode existir. Se ele empurra o botão de pagar para fora da tela, eu tiro ou deixo depois do pagamento, na página de obrigado, onde o Basic já permite app elegível.

Perguntas frequentes

Dá para deixar o checkout com a cara da loja sem Shopify Plus?

Dá para logo, cores, fonte, fundo e campos no editor de checkout, no plano Basic ou acima. Plus entra para personalização avançada, Checkout Branding API e apps no meio das páginas de dados, entrega e pagamento. A maior parte do visual de marca que a pessoa nota cabe no Basic.

O checkout de uma página vende mais que o de três?

A Shopify deixa os dois. O padrão é uma página. O que a pesquisa mostra é excesso de campo, não um vencedor entre os layouts. Eu conto os campos da loja e corto o que não serve para entregar nem para pagar. A troca de layout só vale depois de salvar e abrir o checkout real, porque a prévia do editor não mostra a mudança na hora.

Por que o cupom não aparece no celular?

No padrão, resumo e cupom nascem recolhidos no celular. A pessoa abre o resumo para ver. Se a loja depende de cupom, o admin tem a opção de mostrar o campo de cupom sempre, acima do resumo recolhido no checkout de uma página.

O carrinho se edita no mesmo lugar do checkout?

Não. O carrinho faz parte do tema. O checkout se edita em Configurações, Checkout, no editor de checkout e contas. Banner e seção extra que você monta no tema não passam para o checkout. Por isso a marca do checkout é logo, cor e fonte, não a home inteira.

Preciso mostrar frete já no carrinho?

Quem não vê o total antes de pagar está no grupo dos 12% que abandonaram por isso, e custo extra alto é o motivo de 40%, fora quem só estava olhando. Se o frete depende do CEP, o campo de CEP fica no carrinho, ao lado do total, e não só na última etapa.

Conclusão

Carrinho e checkout na Shopify ganham venda quando o total, o prazo e a saída sem conta aparecem antes da pessoa pedir coragem para pagar. O tema cuida do carrinho. O editor de checkout cuida da marca nessa etapa, e o plano Basic já cobre logo, cor e fonte. Plus é ferramenta de operação, não um atalho de layout. Se a sua loja já perde gente nessa etapa, veja a criação e ajuste de lojas Shopify e manda a URL do carrinho e o plano da loja. Se ainda não criou a loja Shopify, fala comigo antes de criar: a loja nasce como loja de desenvolvimento, é montada pronta e transferida para o seu nome.

Falar sobre o projeto