Personalizar o estilo do checkout

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

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

O branding escolhido para o checkout também é aplicado às novas páginas de conta de cliente.

Nesta página

Considerações sobre a personalização do estilo do checkout

Antes de personalizar o estilo do checkout, analise as seguintes considerações:

  • A área Configurações na seção Configurações de checkout do admin fica oculta até você escolher um plano e criar seu primeiro produto.
  • Se você estiver no plano Shopify Plus, use a API Checkout Branding para personalizações avançadas de branding no checkout.

  • Se você precisar de ajuda para personalizar o estilo do carrinho e do checkout, contrate um Parceiro da Shopify. Saiba mais sobre como contratar um Parceiro da Shopify.

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

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 Configurações, clique em Personalizar ao lado da configuração de checkout que você quer customizar.

  3. No editor de checkout e contas, clique no ícone de engrenagem para acessar a barra lateral Configurações.

  4. Na seção Cabeçalho do checkout, clique em Adicionar imagem na opção Imagem de fundo.

  5. Clique em Adicionar imagens para fazer upload de um arquivo ou selecione uma opção da biblioteca.

  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 Configurações, toque em Personalizar no checkout em questão.
  4. No editor de checkout e contas, toque no ícone de engrenagem para acessar a barra lateral Configurações.
  5. Na seção Cabeçalho do checkout, toque em Adicionar imagem na opção Imagem de fundo.
  6. Toque em Adicionar imagem para fazer upload de um arquivo ou selecione uma na biblioteca.
  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 Configurações, toque em Personalizar no checkout em questão.
  4. No editor de checkout e contas, toque no ícone de engrenagem para acessar a barra lateral Configurações.
  5. Na seção Cabeçalho do checkout, toque em Adicionar imagem na opção Imagem de fundo.
  6. Toque em Adicionar imagem para fazer upload de um arquivo ou selecione uma na biblioteca.
  7. Toque em Salvar.

É possível adicionar o logo da loja às páginas de checkout; ele aparece em cima da imagem de banner, caso você use uma. Posicione 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 Configurações, clique em Personalizar ao lado da configuração de checkout que você quer customizar.

  3. No editor de checkout e contas, clique no ícone de engrenagem para acessar a barra lateral Configurações.

  4. Na seção Logo, clique em Adicionar imagem para fazer upload de um arquivo ou selecione uma na biblioteca.

  5. Opcional: na seção Cabeçalho do checkout, ajuste seu logo com as seguintes configurações:

    • Use Largura máxima do logo para selecionar um tamanho para o logotipo em pixels.
    • Use Alinhamento do logo para selecionar se o logo será exibido à esquerda, ao centro ou à direita do banner.
    • Use Posição do logo para selecionar onde no checkout o logo será exibido.

  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 Configurações, toque em Personalizar no checkout em questão.
  4. No editor de checkout e contas, toque no ícone de engrenagem para acessar a barra lateral Configurações.
  5. Na seção Logo, toque em Adicionar imagem para fazer upload de um arquivo ou selecione uma opção na biblioteca.

  6. Opcional: na seção Cabeçalho do checkout, ajuste seu logo com as seguintes configurações:

    • Use Largura máxima do logo para selecionar um tamanho para o logotipo em pixels.
    • Use Alinhamento do logo para selecionar se o logo será exibido à esquerda, ao centro ou à direita do banner.
    • Use Posição do logo para selecionar onde no checkout o logo será exibido.

  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 Configurações, toque em Personalizar no checkout em questão.
  4. No editor de checkout e contas, toque no ícone de engrenagem para acessar a barra lateral Configurações.
  5. Na seção Logo, toque em Adicionar imagem para fazer upload de um arquivo ou selecione uma opção na biblioteca.

  6. Opcional: na seção Cabeçalho do checkout, ajuste seu logo com as seguintes configurações:

    • Use Largura máxima do logo para selecionar um tamanho para o logotipo em pixels.
    • Use Alinhamento do logo para selecionar se o logo será exibido à esquerda, ao centro ou à direita do banner.
    • Use Posição do logo para selecionar onde no checkout o logo será exibido.

  7. Toque em Salvar.

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

É possível 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 Configurações, clique em Personalizar ao lado da configuração de checkout que você quer customizar.

  3. No editor de checkout e contas, clique no ícone de engrenagem para acessar a barra lateral Configurações.

  4. Na seção Plano de fundo 1, 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 Imagem de fundo > Adicionar imagens para fazer upload de um arquivo ou use uma da biblioteca. Imagens menores são repetidas vertical e horizontalmente no plano de fundo, como ladrilhos.

  5. 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 Configurações, toque em Personalizar no checkout em questão.
  4. No editor de checkout e contas, toque no ícone de engrenagem para acessar a barra lateral Configurações.

  5. Na seção Plano de fundo 1, 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 estiver adicionando uma imagem, toque em Imagem de fundo > Adicionar imagem para fazer upload de um arquivo ou use uma da biblioteca. Imagens menores são repetidas vertical e horizontalmente no plano de fundo, como ladrilhos.

  6. 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 Configurações, toque em Personalizar no checkout em questão.
  4. No editor de checkout e contas, toque no ícone de engrenagem para acessar a barra lateral Configurações.

  5. Na seção Plano de fundo 1, 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 estiver adicionando uma imagem, toque em Imagem de fundo > Adicionar imagem para fazer upload de um arquivo ou use uma da biblioteca. Imagens menores são repetidas vertical e horizontalmente no plano de fundo, como ladrilhos.

  6. Toque em Salvar.

Como alterar a cor dos campos do formulário

Você tem a opção de alterar a cor dos campos para torná-los brancos ou transparentes. Talvez você queira tornar os campos transparentes para que uma imagem 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 Configurações, clique em Personalizar ao lado da configuração de checkout que você quer customizar.

  3. No editor de checkout e contas, clique no ícone de engrenagem para acessar a barra lateral Configurações.

  4. Na seção Cor, clique no menu suspenso Campo do formulário e fundo do cartão e selecione a cor desejada.

  5. 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 Configurações, toque em Personalizar no checkout em questão.
  4. No editor de checkout e contas, toque no ícone de engrenagem para acessar a barra lateral Configurações.
  5. Na seção Cor, toque no menu suspenso Campo do formulário e fundo do cartão e selecione a cor desejada.
  6. 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 Configurações, toque em Personalizar no checkout em questão.
  4. No editor de checkout e contas, toque no ícone de engrenagem para acessar a barra lateral Configurações.
  5. Na seção Cor, toque no menu suspenso Campo do formulário e fundo do cartão e selecione a cor desejada.
  6. Toque em Salvar.

Adicionar uma cor ou imagem de fundo ao resumo do pedido

Quando um cliente clica em Exibir resumo do pedido em uma página de checkout, aparece uma lista dos produtos comprados. Você tem a opção de adicionar uma imagem ou cor de fundo ao resumo do pedido. Clique em Exibir resumo do pedido na pré-visualização no editor de temas para conferir como o resumo do pedido é exibido.

Etapas:

  1. No admin da Shopify, acesse Configurações > Checkout.

  2. Na seção Configurações, clique em Personalizar ao lado da configuração de checkout que você quer customizar.

  3. No editor de checkout e contas, clique no ícone de engrenagem para acessar a barra lateral Configurações.

  4. Na seção Plano de fundo 2, 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 Imagem de fundo > Adicionar imagens para fazer upload de um arquivo ou use uma da biblioteca. Imagens menores são repetidas vertical e horizontalmente no plano de fundo, como ladrilhos.

  5. 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 Configurações, toque em Personalizar no checkout em questão.
  4. No editor de checkout e contas, toque no ícone de engrenagem para acessar a barra lateral Configurações.

  5. Na seção Plano de fundo 2, 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 estiver adicionando uma imagem, toque em Imagem de fundo > Adicionar imagem para fazer upload de um arquivo ou use uma da biblioteca. Imagens menores são repetidas vertical e horizontalmente no plano de fundo, como ladrilhos.

  6. 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 Configurações, toque em Personalizar no checkout em questão.
  4. No editor de checkout e contas, toque no ícone de engrenagem para acessar a barra lateral Configurações.

  5. Na seção Plano de fundo 2, 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 estiver adicionando uma imagem, toque em Imagem de fundo > Adicionar imagem para fazer upload de um arquivo ou use uma da biblioteca. Imagens menores são repetidas vertical e horizontalmente no plano de fundo, como ladrilhos.

  6. 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 Configurações, clique em Personalizar ao lado da configuração de checkout que você quer customizar.

  3. No editor de checkout e contas, clique no ícone de engrenagem para acessar a barra lateral Configurações.

  4. Abaixo da imagem que você quer substituir, clique em Alterar para selecionar uma opção na biblioteca ou confira as imagens gratuitas.

  5. 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 Configurações, toque em Personalizar no checkout em questão.
  4. No editor de checkout e contas, toque no ícone de engrenagem para acessar a barra lateral Configurações.
  5. Abaixo da imagem que você quer substituir, toque em Alterar para selecionar uma opção na biblioteca ou confira as imagens gratuitas.
  6. 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 Configurações, toque em Personalizar no checkout em questão.
  4. No editor de checkout e contas, toque no ícone de engrenagem para acessar a barra lateral Configurações.
  5. Abaixo da imagem que você quer substituir, toque em Alterar para selecionar uma opção na biblioteca ou confira as imagens gratuitas.
  6. Toque em Salvar.

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

Adicionar texto alternativo à imagem

Depois de adicionar imagens às páginas de checkout, inclua o texto alternativo 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 Configurações, clique em Personalizar ao lado da configuração de checkout que você quer customizar.

  3. No editor de checkout e contas, clique no ícone de engrenagem para acessar a barra lateral Configurações.

  4. Na seção Tipografia, clique no menu suspenso Títulos ou Corpo e selecione uma fonte.

  5. 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 Configurações, toque em Personalizar no checkout em questão.
  4. No editor de checkout e contas, toque no ícone de engrenagem para acessar a barra lateral Configurações.
  5. Na seção Tipografia, toque no menu suspenso Títulos ou Corpo e selecione uma fonte.
  6. 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 Configurações, toque em Personalizar no checkout em questão.
  4. No editor de checkout e contas, toque no ícone de engrenagem para acessar a barra lateral Configurações.
  5. Na seção Tipografia, toque no menu suspenso Títulos ou Corpo e selecione uma fonte.
  6. Toque em Salvar.

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

É possível alterar a cor de botões, mensagens de erro e elementos de destaque, como links nas páginas de checkout. Se você alterar as cores, verifique se consegue ler claramente o texto em relação aos 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 Configurações, clique em Personalizar ao lado da configuração de checkout que você quer customizar.

  3. No editor de checkout e contas, clique no ícone de engrenagem para acessar a barra lateral Configurações.

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

  5. 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 Configurações, toque em Personalizar no checkout em questão.
  4. No editor de checkout e contas, toque no ícone de engrenagem para acessar a barra lateral Configurações.
  5. 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.
  6. 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 Configurações, toque em Personalizar no checkout em questão.
  4. No editor de checkout e contas, toque no ícone de engrenagem para acessar a barra lateral Configurações.
  5. 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.
  6. Toque em Salvar.

Alterar o layout do checkout

Por padrão, o layout de finalização de compra na loja é definido como um checkout de uma página. É possível alternar entre o checkout de uma página e o de três páginas no admin da Shopify. Analise as diferenças entre as duas opções antes de alterar o layout.

Quando você alterna o layout do checkout, a pré-visualização do editor de checkout e contas não é exibida em tempo real. Depois de salvar as alterações, navegue até o checkout da vitrine para ver o novo layout.

Etapas:

  1. No admin da Shopify, acesse Configurações > Checkout.

  2. Na seção Configurações, clique em Personalizar ao lado da configuração de checkout que você quer customizar.

  3. No editor de checkout e contas, clique no ícone de engrenagem para acessar a barra lateral Configurações.

  4. Na seção Layout do checkout, clique no layout atual para abrir as opções associadas.

  5. Clique em Checkout de uma página ou em Checkout de três páginas para definir o layout.

  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 Configurações, toque em Personalizar.
  4. No editor de checkout e contas, toque no ícone de engrenagem para acessar a barra lateral Configurações.
  5. Na seção Layout do checkout, toque em Checkout de uma página ou Checkout de três páginas para fazer sua escolha.
  6. 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 Configurações, toque em Personalizar.
  4. No editor de checkout e contas, toque no ícone de engrenagem para acessar a barra lateral Configurações.
  5. Na seção Layout do checkout, toque em Checkout de uma página ou Checkout de três páginas para fazer sua escolha.
  6. Toque em Salvar.

Adicionar blocos de app às páginas de checkout

Com blocos de app, é possível adicionar recursos como banners personalizados ou recompensas por fidelidade para enriquecer a experiência dos clientes no checkout. Alguns apps de checkout, como aqueles que customizam as páginas de informações, frete e pagamento, estão disponíveis apenas para lojistas no plano Shopify Plus. Consulte a disponibilidade de apps de checkout para escolher o ideal para sua loja.

Saiba mais sobre como personalizar as configurações de checkout com apps.

Etapas:

  1. No admin da Shopify, acesse Configurações > Checkout.

  2. Na seção Configurações, clique em Personalizar ao lado da configuração de checkout que você quer customizar.

  3. No editor de checkout e contas, selecione a página à qual você quer adicionar um app e clique no ícone de seções para acessar a barra lateral Seções.

  4. Clique em ⊕ Adicionar bloco de app.

  5. Na seção Apps disponíveis para esta página, clique na opção a ser adicionada ao checkout, que será colocada automaticamente na área recomendada.

  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 Configurações, toque em Personalizar no checkout em questão.
  4. No editor de checkout e contas, selecione a página à qual você quer adicionar um app e clique no ícone de seções para acessar a barra lateral Seções.
  5. Clique em ⊕ Adicionar bloco de app.
  6. Na seção Apps disponíveis para esta página, clique na opção a ser adicionada ao checkout, que será colocada automaticamente na área recomendada.
  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 Configurações, toque em Personalizar no checkout em questão.
  4. No editor de checkout e contas, selecione a página à qual você quer adicionar um app e clique no ícone de seções para acessar a barra lateral Seções.
  5. Clique em ⊕ Adicionar bloco de app.
  6. Na seção Apps disponíveis para esta página, clique na opção a ser adicionada ao checkout, que será colocada automaticamente na área recomendada.
  7. Clique em Salvar.

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

Experimente de graça