Personalizar o estilo do checkout

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.

Dica

Se você estiver no plano Shopify Plus, use o Checkout Blocks para fazer personalizações avançadas de branding no checkout sem realizar chamadas à API.

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 loja. É possível alterar a imagem de fundo desse banner para uma que corresponda à sua marca. Por exemplo, se você vende joias, uma imagem de contas coloridas pode ser uma boa opção. Vale lembrar que a melhor resolução para esse uso é 1.000 x 400 pixels.

Etapas:

Desktop

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 de imagem ou selecione uma imagem existente da biblioteca.

6. Clique em Salvar.

Adicionar um logo à página de checkout

É 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:

Desktop

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.

5. Clique em Adicionar imagens para fazer upload de um arquivo de imagem ou selecione uma imagem existente da 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. Clique 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.

Imagens menores são repetidas vertical e horizontalmente no plano de fundo, como ladrilhos. Lembramos que não é possível adicionar de forma simultânea uma imagem de fundo e uma cor.

Etapas:

Desktop

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:

   • Para adicionar uma cor, clique em Cor do plano de fundo para abrir um seletor de cores. Daí escolha uma cor ou insira um código hexadecimal.
   • Para adicionar uma imagem, na seção Imagem de fundo, clique em Adicionar imagem. Clique em Adicionar imagens para fazer upload de um arquivo de imagem ou selecione uma imagem existente da biblioteca.

5. Clique 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.

Requisito de plano

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. Esse recurso está disponível apenas no Shopify Plus.

Etapas:

Desktop

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, vá para Campo do formulário e fundo do cartão e clique em Transparente ou Branco.

5. Clique 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.

Imagens menores são repetidas vertical e horizontalmente no plano de fundo, como ladrilhos.

Etapas:

Desktop

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:

   • Para adicionar uma cor, clique em Cor do plano de fundo para abrir um seletor de cores. Daí escolha uma cor ou insira um código hexadecimal.
   • Para adicionar uma imagem, clique em Imagem de fundo > Adicionar imagem. Clique em Adicionar imagens para fazer upload de um arquivo de imagem ou selecione uma imagem existente da biblioteca.

5. 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:

Desktop

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.

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:

Desktop

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.

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:

Desktop

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.

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:

Desktop

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.

Exibir o campo de código de desconto por padrão em dispositivos móveis

Observação

O recurso está disponível apenas para lojistas do Shopify Plus.

Por padrão, quando um cliente finaliza a compra em um dispositivo móvel, o resumo do pedido e o campo do código de desconto focam ocultos. O cliente pode tocar em Exibir resumo do pedido para expandir as informações completas e mostrar o campo para adicionar um código de desconto ou um código de cartão-presente.

É possível alterar o comportamento-padrão para sempre exibir o resumo do pedido e o campo de código de desconto ao fazer checkout em um dispositivo móvel. O cliente pode tocar em Ocultar resumo do pedido para ocultar o campo de código de desconto.

O checkout precisa estar usando o layout de checkout de três páginas para acessar essa configuração.

Etapas:

Desktop

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 seções para acessar a barra lateral Seções.

4. Na página Informações, Frete ou Pagamentos, clique em Resumo do pedido.

5. Ative a configuração Sempre exibir campo do código de desconto.

6. Clique 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:

Desktop

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.