Personalizar o estilo do checkout

Esta página foi impressa em Jun 07, 2023. 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.
  1. No app da Shopify, acesse Loja > Configurações.
  2. Em Configurações da loja, toque em Checkout.
  1. No app da Shopify, acesse Loja > Configurações.
  2. Em Configurações da loja, toque em Checkout.

  1. Na seção Estilo, clique em Personalizar checkout para abrir o editor de temas.

  2. Na seção BANNER, clique em Fazer upload de imagem ou selecione uma imagem que você já colocou na sua biblioteca.

  3. Clique 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.
  1. No app da Shopify, acesse Loja > Configurações.
  2. Em Configurações da loja, toque em Checkout.
  1. No app da Shopify, acesse Loja > Configurações.
  2. Em Configurações da loja, toque em Checkout.

  1. Na seção Estilo, clique em Personalizar checkout para abrir o editor de temas.

  2. Na seção LOGO, clique em Fazer upload de imagem ou selecione uma imagem que você já colocou na sua biblioteca.

  3. Selecione uma posição para o logo.

  4. Selecione um tamanho para o logo.

  5. Clique 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.
  1. No app da Shopify, acesse Loja > Configurações.
  2. Em Configurações da loja, toque em Checkout.
  1. No app da Shopify, acesse Loja > Configurações.
  2. Em Configurações da loja, toque em Checkout.
  1. Na seção Estilo, clique em Personalizar checkout para abrir o editor de temas.

  2. Na seção ÁREA PRINCIPAL DO CONTEÚDO, adicione uma cor de fundo ou imagem.

    • 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 estiver adicionando uma imagem, clique em Fazer upload de imagem ou selecione uma imagem que você já tenha em sua biblioteca. Imagens menores são repetidas vertical e horizontalmente no plano de fundo, como ladrilhos.

  3. Clique em Salvar.

Alterar a cor dos campos do formulário

Você pode alterar a cor dos campos para torná-los brancos ou transparentes. Com campos transparentes, é possível exibir uma imagem de plano de fundo. 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.
  1. No app da Shopify, acesse Loja > Configurações.
  2. Em Configurações da loja, toque em Checkout.
  1. No app da Shopify, acesse Loja > Configurações.
  2. Em Configurações da loja, toque em Checkout.

  1. Na seção Estilo, clique em Personalizar checkout para abrir o editor de temas.

  2. Na seção ÁREA PRINCIPAL DO CONTEÚDO, clique na lista suspensa Campos do formulário para selecionar a cor desejada.

  3. Clique 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.
  1. No app da Shopify, acesse Loja > Configurações.
  2. Em Configurações da loja, toque em Checkout.
  1. No app da Shopify, acesse Loja > Configurações.
  2. Em Configurações da loja, toque em Checkout.
  1. Na seção Estilo, clique em Personalizar checkout para abrir o editor de temas.

  2. 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 estiver adicionando uma imagem, clique em Fazer upload de imagem ou selecione uma imagem que você já tenha em sua biblioteca. Imagens menores são repetidas vertical e horizontalmente no plano de fundo, como ladrilhos.

  3. Clique 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.
  1. No app da Shopify, acesse Loja > Configurações.
  2. Em Configurações da loja, toque em Checkout.
  1. No app da Shopify, acesse Loja > Configurações.
  2. Em Configurações da loja, toque em Checkout.

  1. Na seção Estilo, clique em Personalizar checkout para abrir o editor de temas.

  2. Na imagem que você deseja substituir, clique em Atualizar e envie uma imagem ou selecione uma da sua biblioteca.

  3. Clique em Salvar.

Para remover uma imagem, clique em Remover abaixo da 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. Em uma imagem, clique em Atualizar e selecione Editar imagem.

  2. Digite o texto alternativo para a imagem. 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.
  1. No app da Shopify, acesse Loja > Configurações.
  2. Em Configurações da loja, toque em Checkout.
  1. No app da Shopify, acesse Loja > Configurações.
  2. Em Configurações da loja, toque em Checkout.

  1. Na seção Estilo, clique em Personalizar checkout.

  2. No editor de temas, clique em Abrir configurações de checkout.

  3. Na seção CHECKOUT, role a tela para baixo até a área Tipografia.

  4. Clique no menu suspenso Títulos ou Corpo e selecione uma fonte.

  5. Clique 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.
  1. No app da Shopify, acesse Loja > Configurações.
  2. Em Configurações da loja, toque em Checkout.
  1. No app da Shopify, acesse Loja > Configurações.
  2. Em Configurações da loja, toque em Checkout.

  1. Na seção Estilo, clique em Personalizar checkout para abrir o editor de temas.

  2. 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.

  3. Clique 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 App Store da Shopify 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 clique 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