Configurar o branding do checkout

Shopify Plus

Este recurso está disponível apenas para determinados lojistas no plano Shopify Plus.

Quer personalizar o branding da experiência para finalização da compra? Use o editor de checkout e deixe a página com a cara da loja. Você tem a opção de adicionar o logo da marca, incluir uma imagem de fundo, alterar as cores e escolher uma nova fonte. Para fazer personalizações avançadas, consulte a API Checkout Branding.

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

É na página de checkout que os clientes inserem informações de frete e pagamento para os pedidos. A maioria das empresas opta por um design simples para facilitar a leitura e evitar distrações por parte dos compradores. Portanto, escolha cores com alto-contraste e imagens que não desviem a atenção dos conteúdos relevantes da página.

Observação

O branding foi movido do editor de temas para o editor de checkout.

Adicionar um logo ao cabeçalho do checkout

No cabeçalho do checkout, é possível inserir, ajustar o tamanho, o alinhamento e a posição de um logo.

Etapas:

1. No admin da Shopify, acesse Configurações > Checkout.
2. Na seção Personalize o checkout, clique em Personalizar ao lado do checkout que você quer editar.
3. Clique no ícone de engrenagem.

4. Na área Logo, adicione o logo:

   1. Clique em Selecionar imagem.
   2. Clique em Adicionar imagens para fazer upload de uma nova ou selecione uma opção já enviada à biblioteca.
   3. Clique em Pronto.

5. Na área Largura máxima do logo, ajuste o tamanho.

6. Na área Alinhamento do logo, selecione as opções à esquerda, ao centro ou à direita.

7. Na área Posição do logo, selecione formulário de checkout, resumo do pedido ou largura completa.

8. Clique em Salvar.

Adicionar cor ou imagem de fundo ao formulário de checkout

É possível adicionar uma cor ou uma imagem de fundo ao formulário de checkout, mas não de forma simultânea.

Após adicionar uma cor ou uma imagem de fundo, verifique se os campos do checkout podem ser lidos com clareza.

Etapas:

1. No admin da Shopify, acesse Configurações > Checkout.
2. Na seção Personalize o checkout, clique em Personalizar ao lado do checkout que você quer editar.
3. Clique no ícone de engrenagem.
4. Na seção Plano de fundo 1, adicione uma imagem de fundo ou cor:
   • Para adicionar uma imagem de fundo, siga estas etapas:
     1. Clique em Selecionar imagem.
     2. Clique em Adicionar imagens para fazer upload de uma nova ou selecione uma opção já enviada à biblioteca.
     3. Clique em Pronto.

- Para adicionar uma cor de fundo, siga estas etapas: 1. Clique no círculo ao lado de Cor de fundo para abrir o seletor. 2. Escolha uma cor ou insira um código hexadecimal.

1. Clique em Salvar.

Adicionar uma cor ou uma imagem de fundo ao resumo do pedido

É possível adicionar uma cor ou uma imagem de fundo ao resumo do pedido, mas não de forma simultânea.

Após adicionar uma cor ou uma imagem de fundo, verifique se os campos do checkout podem ser lidos com clareza.

Etapas:

1. No admin da Shopify, acesse Configurações > Checkout.
2. Na seção Personalize o checkout, clique em Personalizar ao lado do checkout que você quer editar.
3. Clique no ícone de engrenagem.
4. Na seção Plano de fundo 2, adicione uma imagem de fundo ou cor:
   • Para adicionar uma imagem de fundo, siga estas etapas:
     1. Clique em Selecionar imagem.
     2. Clique em Adicionar imagens para fazer upload de uma nova ou selecione uma opção já enviada à biblioteca.
     3. Clique em Pronto.

- Para adicionar uma cor de fundo, siga estas etapas: 1. Clique no círculo ao lado de Cor de fundo para abrir o seletor. 2. Escolha uma cor ou insira um código hexadecimal.

1. Clique em Salvar.

Personalizar as cores do checkout

É possível alterar a cor de botões, mensagens de erro e destaques no checkout, bem como deixar os campos da página brancos ou transparentes.

Depois de alterar cores na página de checkout, verifique se você consegue ler claramente o texto em relação aos planos de fundo nas áreas de entrada e resumo do pedido.

Alterar cores de destaques, botões e erros

1. No admin da Shopify, acesse Configurações > Checkout.
2. Na seção Personalize o checkout, clique em Personalizar ao lado do checkout que você quer editar.
3. Clique no ícone de engrenagem.

4. Na seção Cor, escolha as cores:

   1. Clique no círculo ao lado de Destaque, Botões ou Erro para abrir o seletor de cores.
   2. Escolha uma cor ou insira um código hexadecimal.

5. Clique em Salvar.

Como alterar a cor dos campos do formulário

1. No admin da Shopify, acesse Configurações > Checkout.
2. Na seção Personalize o checkout, clique em Personalizar ao lado do checkout que você quer editar.
3. Clique no ícone de engrenagem.
4. Na seção Cor, clique no menu suspenso Campo do formulário e fundo do cartão e selecione a cor branca ou transparente. Vale lembrar que, se você definir um valor personalizado para os campos do formulário com a API Checkout Branding, outra opção Personalizado (definido por meio da API) será exibida.
5. Clique em Salvar.

Personalizar a fonte do checkout

É possível selecionar em uma lista de fontes para personalizar as páginas de checkout.

Etapas:

1. No admin da Shopify, acesse Configurações > Checkout.
2. Na seção Personalize o checkout, clique em Personalizar ao lado do checkout que você quer editar.
3. Clique no ícone de engrenagem.

4. Na seção Tipografia, altere a fonte dos títulos e do corpo do texto no checkout:

   1. Na área Títulos ou Corpo, clique no nome da fonte para abrir um menu suspenso.
   2. Selecione a fonte que você quer usar no checkout.

5. Clique em Salvar.