Personalizar o estilo do checkout

Esta página foi impressa em Apr 25, 2024. Para a versão mais recente, acesse https://help.shopify.com/pt-BR/manual/checkout-settings/checkout-style.

Se você vende seus produtos em uma loja virtual da Shopify, por que não personalizar o estilo das páginas de checkout no editor de temas? É possível adicionar o logo da empresa, alterar as cores e até escolher uma nova fonte para deixar o checkout com a cara da sua loja.

Vale lembrar que o fato de que você pode adicionar muitas cores e informações às páginas de checkout não necessariamente significa que você deva fazer isso. Afinal, seus clientes usam essas páginas para inserir as informações de frete e pagamento dos pedidos deles, e você não quer distraí-los nem tornar as informações difíceis de ler. Escolha cores com alto contraste e imagens que não desviem a atenção dos conteúdos relevantes da página.

Nesta página

Fazer upload de uma imagem de fundo para o banner

No topo de cada página de checkout, um banner exibe o nome da sua loja. Você pode alterar a imagem de fundo desse banner e colocar uma imagem que corresponda à sua marca. Por exemplo, se você vender joias, então uma imagem de contas coloridas pode ser uma boa ideia. Imagens de banner são melhores com uma resolução de 1.000 x 400 pixels.

Etapas:

  1. No admin da Shopify, acesse Configurações > Checkout.
  2. Na seção Estilo do checkout, clique em Personalizar checkout para abrir o editor de temas.
  3. No editor de temas, clique no ícone de engrenagem para acessar as Configurações do tema.
  4. Clique em Checkout.
  5. Na seção Banner, clique em Selecionar imagem.
  6. Clique em Adicionar imagens para fazer upload de um arquivo ou selecione uma opção já enviada à biblioteca.
  7. Clique em Salvar.
  1. No app da Shopify, toque no botão … e em Configurações.
  2. Na seção Configurações da loja , toque em Checkout.
  3. Na seção Estilo do checkout, toque em Personalizar checkout para abrir o editor de temas.
  4. No editor de temas, toque no ícone de engrenagem para acessar as Configurações do tema.
  5. Toque em Checkout.
  6. Na seção Banner, toque em Selecionar imagem.
  7. Toque em Adicionar imagens para fazer upload de um arquivo ou selecione uma opção já enviada à biblioteca.
  8. Toque em Salvar.
  1. No app da Shopify, toque no botão … e em Configurações.
  2. Na seção Configurações da loja , toque em Checkout.
  3. Na seção Estilo do checkout, toque em Personalizar checkout para abrir o editor de temas.
  4. No editor de temas, toque no ícone de engrenagem para acessar as Configurações do tema.
  5. Toque em Checkout.
  6. Na seção Banner, toque em Selecionar imagem.
  7. Toque em Adicionar imagens para fazer upload de um arquivo ou selecione uma opção já enviada à biblioteca.
  8. Toque em Salvar.

Você pode adicionar o logo da sua loja às páginas de checkout. Se você está usando uma imagem de banner, o logo aparece em cima dela. Você pode posicionar seu logo à esquerda, à direita ou no centro da área do banner nas páginas de checkout.

Etapas:

  1. No admin da Shopify, acesse Configurações > Checkout.
  2. Na seção Estilo do checkout, clique em Personalizar checkout para abrir o editor de temas.
  3. No editor de temas, clique no ícone de engrenagem para acessar as Configurações do tema.
  4. Clique em Checkout.
  5. Na seção Logo, clique em Selecionar imagem.
  6. Clique em Adicionar imagens para fazer upload de um arquivo ou selecione uma opção já enviada à biblioteca.
  7. Selecione uma posição para o logo.
  8. Selecione um tamanho para o logo.
  9. Clique em Salvar.
  1. No app da Shopify, toque no botão … e em Configurações.
  2. Na seção Configurações da loja , toque em Checkout.
  3. Na seção Estilo do checkout, toque em Personalizar checkout para abrir o editor de temas.
  4. No editor de temas, toque no ícone de engrenagem para acessar as Configurações do tema.
  5. Toque em Checkout.
  6. Na seção Logo, toque em Selecionar imagem.
  7. Toque em Adicionar imagens para fazer upload de um arquivo ou selecione uma opção já enviada à biblioteca.
  8. Selecione uma posição para o logo.
  9. Selecione um tamanho para o logo.
  10. Toque em Salvar.
  1. No app da Shopify, toque no botão … e em Configurações.
  2. Na seção Configurações da loja , toque em Checkout.
  3. Na seção Estilo do checkout, toque em Personalizar checkout para abrir o editor de temas.
  4. No editor de temas, toque no ícone de engrenagem para acessar as Configurações do tema.
  5. Toque em Checkout.
  6. Na seção Logo, toque em Selecionar imagem.
  7. Toque em Adicionar imagens para fazer upload de um arquivo ou selecione uma opção já enviada à biblioteca.
  8. Selecione uma posição para o logo.
  9. Selecione um tamanho para o logo.
  10. Toque em Salvar.

Adicionar uma cor ou imagem de fundo à área principal de conteúdo

Você pode adicionar uma imagem de fundo ou uma cor à área principal do conteúdo das páginas de checkout. Essa é a área em que seus clientes inserem as informações de entrega e pagamento, então não se esqueça de escolher um plano de fundo que deixe os campos legíveis. Lembramos que não é possível adicionar de forma simultânea uma imagem de fundo e uma cor.

Etapas:

  1. No admin da Shopify, acesse Configurações > Checkout.
  2. Na seção Estilo do checkout, clique em Personalizar checkout para abrir o editor de temas.
  3. No editor de temas, clique no ícone de engrenagem para acessar as Configurações do tema.
  4. Clique em Checkout.

  5. Na seção Área principal do conteúdo, adicione uma cor ou imagem de fundo.

    • Se você estiver adicionando uma cor, clique na caixa ao lado de Cor do plano de fundo para abrir um seletor de cores. Daí escolha uma cor ou insira um código hexadecimal.
    • Se quiser adicionar uma imagem, clique em Selecionar imagem > Adicionar imagens para fazer upload de um arquivo ou use uma opção já enviada à biblioteca. Imagens menores são repetidas vertical e horizontalmente no plano de fundo, como ladrilhos.

  6. Clique em Salvar.

  1. No app da Shopify, toque no botão … e em Configurações.
  2. Na seção Configurações da loja , toque em Checkout.
  3. Na seção Estilo do checkout, toque em Personalizar checkout para abrir o editor de temas.
  4. No editor de temas, toque no ícone de engrenagem para acessar as Configurações do tema.
  5. Toque em Checkout.

  6. Na seção Área principal do conteúdo, adicione uma cor ou imagem de fundo.

    • Se você estiver adicionando uma cor, toque na caixa ao lado de Cor do plano de fundo para abrir um seletor de cores. Daí escolha uma cor ou insira um código hexadecimal.
    • Se quiser adicionar uma imagem, toque em Selecionar imagem > Adicionar imagens para fazer upload de um arquivo ou use uma opção já enviada à biblioteca. Imagens menores são repetidas vertical e horizontalmente no plano de fundo, como ladrilhos.

  7. Toque em Salvar.

  1. No app da Shopify, toque no botão … e em Configurações.
  2. Na seção Configurações da loja , toque em Checkout.
  3. Na seção Estilo do checkout, toque em Personalizar checkout para abrir o editor de temas.
  4. No editor de temas, toque no ícone de engrenagem para acessar as Configurações do tema.
  5. Toque em Checkout.

  6. Na seção Área principal do conteúdo, adicione uma cor ou imagem de fundo.

    • Se você estiver adicionando uma cor, toque na caixa ao lado de Cor do plano de fundo para abrir um seletor de cores. Daí escolha uma cor ou insira um código hexadecimal.
    • Se quiser adicionar uma imagem, toque em Selecionar imagem > Adicionar imagens para fazer upload de um arquivo ou use uma opção já enviada à biblioteca. Imagens menores são repetidas vertical e horizontalmente no plano de fundo, como ladrilhos.

  7. Toque em Salvar.

Como alterar a cor dos campos do formulário

Você pode alterar a cor dos campos para torná-los brancos ou transparentes. Você pode querer tornar os campos transparentes para que uma imagem de plano de fundo fique visível. Não se esqueça de conferir se é possível ler claramente o texto nos campos.

Etapas:

  1. No admin da Shopify, acesse Configurações > Checkout.
  2. Na seção Estilo do checkout, clique em Personalizar checkout para abrir o editor de temas.
  3. No editor de temas, clique no ícone de engrenagem para acessar as Configurações do tema.
  4. Clique em Checkout.
  5. Na seção Área principal do conteúdo, clique no menu suspenso Campos do formulário para selecionar a cor desejada.
  6. Clique em Salvar.
  1. No app da Shopify, toque no botão … e em Configurações.
  2. Na seção Configurações da loja , toque em Checkout.
  3. Na seção Estilo do checkout, toque em Personalizar checkout para abrir o editor de temas.
  4. No editor de temas, toque no ícone de engrenagem para acessar as Configurações do tema.
  5. Toque em Checkout.
  6. Na seção Área principal do conteúdo, toque no menu suspenso Campos do formulário para selecionar a cor desejada.
  7. Toque em Salvar.
  1. No app da Shopify, toque no botão … e em Configurações.
  2. Na seção Configurações da loja , toque em Checkout.
  3. Na seção Estilo do checkout, toque em Personalizar checkout para abrir o editor de temas.
  4. No editor de temas, toque no ícone de engrenagem para acessar as Configurações do tema.
  5. Toque em Checkout.
  6. Na seção Área principal do conteúdo, toque no menu suspenso Campos do formulário para selecionar a cor desejada.
  7. Toque em Salvar.

Adicionar uma cor ou imagem de fundo ao resumo do pedido

Quando um cliente clica em Exibir resumo do pedido na página de checkout, uma lista dos produtos comprados é exibida. Você pode adicionar uma imagem ou cor de fundo a esse resumo, mas confira as alterações feitas à página para que tudo esteja de acordo com as suas especificações. Para isso, clique em Exibir resumo do pedido na pré-visualização do editor de temas.

Etapas:

  1. No admin da Shopify, acesse Configurações > Checkout.
  2. Na seção Estilo do checkout, clique em Personalizar checkout para abrir o editor de temas.
  3. No editor de temas, clique no ícone de engrenagem para acessar as Configurações do tema.
  4. Clique em Checkout.

  5. Na seção Resumo do pedido, adicione uma cor ou imagem de fundo.

    • Se você estiver adicionando uma cor, clique na caixa ao lado de Cor do plano de fundo para abrir um seletor de cores. Daí escolha uma cor ou insira um código hexadecimal.
    • Se quiser adicionar uma imagem, clique em Selecionar imagem > Adicionar imagens para fazer upload de um arquivo ou use uma opção já enviada à biblioteca. Imagens menores são repetidas vertical e horizontalmente no plano de fundo, como ladrilhos.

  6. Clique em Salvar.

  1. No app da Shopify, toque no botão … e em Configurações.
  2. Na seção Configurações da loja , toque em Checkout.
  3. Na seção Estilo do checkout, toque em Personalizar checkout para abrir o editor de temas.
  4. No editor de temas, toque no ícone de engrenagem para acessar as Configurações do tema.
  5. Toque em Checkout.

  6. Na seção Resumo do pedido, adicione uma cor ou imagem de fundo.

    • Se você estiver adicionando uma cor, toque na caixa ao lado de Cor do plano de fundo para abrir um seletor de cores. Daí escolha uma cor ou insira um código hexadecimal.
    • Se quiser adicionar uma imagem, toque em Selecionar imagem > Adicionar imagens para fazer upload de um arquivo ou use uma opção já enviada à biblioteca. Imagens menores são repetidas vertical e horizontalmente no plano de fundo, como ladrilhos.

  7. Toque em Salvar.

  1. No app da Shopify, toque no botão … e em Configurações.
  2. Na seção Configurações da loja , toque em Checkout.
  3. Na seção Estilo do checkout, toque em Personalizar checkout para abrir o editor de temas.
  4. No editor de temas, toque no ícone de engrenagem para acessar as Configurações do tema.
  5. Toque em Checkout.

  6. Na seção Resumo do pedido, adicione uma cor ou imagem de fundo.

    • Se você estiver adicionando uma cor, toque na caixa ao lado de Cor do plano de fundo para abrir um seletor de cores. Daí escolha uma cor ou insira um código hexadecimal.
    • Se quiser adicionar uma imagem, toque em Selecionar imagem > Adicionar imagens para fazer upload de um arquivo ou use uma opção já enviada à biblioteca. Imagens menores são repetidas vertical e horizontalmente no plano de fundo, como ladrilhos.

  7. Toque em Salvar.

Alterar ou remover uma imagem da página de checkout

Você pode alterar ou remover qualquer uma das imagens adicionadas às páginas de checkout.

Etapas:

  1. No admin da Shopify, acesse Configurações > Checkout.
  2. Na seção Estilo do checkout, clique em Personalizar checkout para abrir o editor de temas.
  3. No editor de temas, clique no ícone de engrenagem para acessar as Configurações do tema.
  4. Clique em Checkout.
  5. Abaixo da imagem que você quer substituir, clique em Alterar para selecionar uma opção na biblioteca ou confira as imagens gratuitas.
  6. Clique em Salvar.
  1. No app da Shopify, toque no botão … e em Configurações.
  2. Na seção Configurações da loja , toque em Checkout.
  3. Na seção Estilo do checkout, toque em Personalizar checkout para abrir o editor de temas.
  4. No editor de temas, toque no ícone de engrenagem para acessar as Configurações do tema.
  5. Toque em Checkout.
  6. Abaixo da imagem que você quer substituir, toque em Alterar para selecionar uma opção na biblioteca ou confira as imagens gratuitas.
  7. Toque em Salvar.
  1. No app da Shopify, toque no botão … e em Configurações.
  2. Na seção Configurações da loja , toque em Checkout.
  3. Na seção Estilo do checkout, toque em Personalizar checkout para abrir o editor de temas.
  4. No editor de temas, toque no ícone de engrenagem para acessar as Configurações do tema.
  5. Toque em Checkout.
  6. Abaixo da imagem que você quer substituir, toque em Alterar para selecionar uma opção na biblioteca ou confira as imagens gratuitas.
  7. Toque em Salvar.

Para remover uma imagem, clique em Alterar > Remover imagem. Isso não exclui a imagem da Shopify.

Adicionar texto alternativo à imagem

Após escolher as imagens das páginas de checkout, adicione um texto alternativo a cada uma das imagens para ajudar com acessibilidade e SEO. Saiba mais sobre a otimização de mecanismos de pesquisa.

Etapas:

  1. Na imagem em que você quer incluir texto alternativo, clique em Editar.
  2. Digite o que você quer em Texto alternativo. Escolha um título curto e descritivo para a imagem.
  3. Clique em Salvar.

Alterar a fonte na página de checkout

A Shopify conta com uma lista de fontes que podem ser usadas para personalizar as páginas de checkout. No entanto, lembramos que não é possível alterar a cor do texto na página de checkout.

Etapas:

  1. No admin da Shopify, acesse Configurações > Checkout.
  2. Na seção Estilo do checkout, clique em Personalizar checkout para abrir o editor de temas.
  3. No editor de temas, clique no ícone de engrenagem para acessar as Configurações do tema.
  4. Clique em Checkout.
  5. Na seção Tipografia, clique no menu suspenso Cabeçalhos ou no menu suspenso Corpo e selecione uma fonte.
  6. Clique em Salvar.
  1. No app da Shopify, toque no botão … e em Configurações.
  2. Na seção Configurações da loja , toque em Checkout.
  3. Na seção Estilo do checkout, toque em Personalizar checkout para abrir o editor de temas.
  4. No editor de temas, toque no ícone de engrenagem para acessar as Configurações do tema.
  5. Toque em Checkout.
  6. Na seção Tipografia, toque no menu suspenso Cabeçalhos ou no menu suspenso Corpo e selecione uma fonte.
  7. Toque em Salvar.
  1. No app da Shopify, toque no botão … e em Configurações.
  2. Na seção Configurações da loja , toque em Checkout.
  3. Na seção Estilo do checkout, toque em Personalizar checkout para abrir o editor de temas.
  4. No editor de temas, toque no ícone de engrenagem para acessar as Configurações do tema.
  5. Toque em Checkout.
  6. Na seção Tipografia, toque no menu suspenso Cabeçalhos ou no menu suspenso Corpo e selecione uma fonte.
  7. Toque em Salvar.

Alterar o botão e acentuar as cores na página de checkout

É possível alterar a cor dos botões, mensagens de erro e outros elementos de destaque, como os links nas páginas de checkout. Antes de concluir esse tipo de alteração, é importante verificar se o texto ainda está legível em contraste com os planos de fundo da área principal do conteúdo e do resumo do pedido.

Etapas:

  1. No admin da Shopify, acesse Configurações > Checkout.
  2. Na seção Estilo do checkout, clique em Personalizar checkout para abrir o editor de temas.
  3. No editor de temas, clique no ícone de engrenagem para acessar as Configurações do tema.
  4. Clique em Checkout.
  5. Na seção Cores, clique na caixa de cores ao lado de Acentos, Botões ou Erros para abrir um seletor de cores, e então escolha uma cor ou insira um código hexadecimal.
  6. Clique em Salvar.
  1. No app da Shopify, toque no botão … e em Configurações.
  2. Na seção Configurações da loja , toque em Checkout.
  3. Na seção Estilo do checkout, toque em Personalizar checkout para abrir o editor de temas.
  4. No editor de temas, toque no ícone de engrenagem para acessar as Configurações do tema.
  5. Toque em Checkout.
  6. Na seção Cores, toque na caixa de cores ao lado de Acentos, Botões ou Erros para abrir um seletor de cores, e então escolha uma cor ou insira um código hexadecimal.
  7. Toque em Salvar.
  1. No app da Shopify, toque no botão … e em Configurações.
  2. Na seção Configurações da loja , toque em Checkout.
  3. Na seção Estilo do checkout, toque em Personalizar checkout para abrir o editor de temas.
  4. No editor de temas, toque no ícone de engrenagem para acessar as Configurações do tema.
  5. Toque em Checkout.
  6. Na seção Cores, toque na caixa de cores ao lado de Acentos, Botões ou Erros para abrir um seletor de cores, e então escolha uma cor ou insira um código hexadecimal.
  7. Toque em Salvar.

Adicionar recursos à página de pós-venda no checkout

Use apps de pós-venda oferecidos por terceiros para adicionar recursos como pesquisas de satisfação ou ofertas de upsell à experiência de checkout dos clientes. Esses recursos podem ser inseridos entre as etapas de conclusão do pagamento e confirmação do pedido.

Para adicionar recursos à página de pós-venda, é necessário instalar e configurar um app de checkout. Depois disso, selecione o app nas configurações de checkout para começar a usá-lo na página de pós-venda.

É possível usar apenas um app de checkout para adicionar funcionalidades à página de pós-venda. Caso você tenha mais apps instalados, escolha qual deles quer usar nas configurações de checkout.

Instalar um app de checkout para adicionar recursos pós-venda

Para adicionar recursos à página de pós-venda, use um app de terceiros que seja compatível com recursos de pós-venda no checkout.

Se quiser receber ajuda relacionada a um app de terceiros, entre em contato com o respectivo desenvolvedor.

Etapas:

  1. Acesse a Shopify App Store e procure um app de pós-venda compatível com os seus objetivos.
  2. Clique em Adicionar app. Faça login na sua conta da Shopify para continuar.
  3. Clique em Instalar app.
  4. Visite a seção Apps do admin da Shopify e toque no nome do app de checkout.
  5. Insira as configurações necessárias.

Selecionar um app para usar na página de pós-venda

Depois de instalar e configurar o app, selecione-o nas configurações de checkout para adicioná-lo à página de pós-venda.

Também é possível alterar o app escolhido nas configurações de checkout.

Etapas:

  1. No admin da Shopify, clique em Configurações.
  2. Clique em Checkout.
  3. Na seção Página de pós-venda, selecione o app de checkout que você quer usar.

Tudo pronto para começar a vender com a Shopify?

Experimente de graça