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.
Nesta página
- Considerações sobre a personalização do estilo do checkout
- Fazer upload de uma imagem de fundo para o banner
- Adicionar um logo à página de checkout
- Adicionar uma cor ou imagem de fundo à área principal de conteúdo
- Como alterar a cor dos campos do formulário
- Adicionar uma cor ou imagem de fundo ao resumo do pedido
- Alterar ou remover uma imagem da página de checkout
- Alterar a fonte na página de checkout
- Alterar o botão e acentuar as cores na página de checkout
- Alterar o layout do checkout
- Exibir o campo de código de desconto por padrão em dispositivos móveis
- Adicionar blocos de app às páginas de checkout
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
No admin da Shopify, acesse Configurações > Checkout.
Na seção Configurações, clique em Personalizar ao lado da configuração que você quer personalizar.
No editor de checkout e contas, clique no ícone de engrenagem para acessar a barra lateral Configurações.
Na seção Cabeçalho do checkout, clique em Adicionar imagem na opção Imagem de fundo.
Clique em Adicionar imagens para fazer upload de um arquivo de imagem ou selecione uma imagem existente da biblioteca.
Clique em Salvar.
iPhone
- No app da Shopify, toque no botão … e em Configurações.
- Na seção Configurações da loja , toque em Checkout.
- Na seção Configurações, toque em Personalizar no checkout em questão.
- No editor de checkout e contas, toque em Configurações.
- Na seção Cabeçalho do checkout, toque em Adicionar imagem na opção Imagem de fundo.
- Toque em Adicionar imagem para fazer upload de um arquivo de imagem ou selecione uma imagem existente na biblioteca.
- Toque em Salvar.
Android
- No app da Shopify, toque no botão ☰ e em Configurações.
- Na seção Configurações da loja , toque em Checkout.
- Na seção Configurações, toque em Personalizar no checkout em questão.
- No editor de checkout e contas, toque em Configurações.
- Na seção Cabeçalho do checkout, toque em Adicionar imagem na opção Imagem de fundo.
- Toque em Adicionar imagem para fazer upload de um arquivo de imagem ou selecione uma imagem existente na biblioteca.
- Toque 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
No admin da Shopify, acesse Configurações > Checkout.
Na seção Configurações, clique em Personalizar ao lado da configuração que você quer personalizar.
No editor de checkout e contas, clique no ícone de engrenagem para acessar a barra lateral Configurações.
Na seção Logo, clique em Adicionar imagem.
Clique em Adicionar imagens para fazer upload de um arquivo de imagem ou selecione uma imagem existente da biblioteca.
-
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.
Clique em Salvar.
iPhone
- No app da Shopify, toque no botão … e em Configurações.
- Na seção Configurações da loja , toque em Checkout.
- Na seção Configurações, toque em Personalizar no checkout em questão.
- No editor de checkout e contas, toque em Configurações.
- Na seção Logo, toque em Adicionar imagem.
- Toque em Adicionar imagem para fazer upload de um arquivo de imagem ou selecione uma imagem existente na biblioteca.
-
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.
Toque em Salvar.
Android
- No app da Shopify, toque no botão ☰ e em Configurações.
- Na seção Configurações da loja , toque em Checkout.
- Na seção Configurações, toque em Personalizar no checkout em questão.
- No editor de checkout e contas, toque em Configurações.
- Na seção Logo, toque em Adicionar imagem.
- Toque em Adicionar imagem para fazer upload de um arquivo de imagem ou selecione uma imagem existente na biblioteca.
-
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.
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.
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
No admin da Shopify, acesse Configurações > Checkout.
Na seção Configurações, clique em Personalizar ao lado da configuração que você quer personalizar.
No editor de checkout e contas, clique no ícone de engrenagem para acessar a barra lateral Configurações.
-
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.
Clique em Salvar.
iPhone
- No app da Shopify, toque no botão … e em Configurações.
- Na seção Configurações da loja , toque em Checkout.
- Na seção Configurações, toque em Personalizar no checkout em questão.
- No editor de checkout e contas, toque em Configurações.
-
Na seção Plano de fundo 1, adicione uma cor ou imagem de fundo.
- Para adicionar uma cor, toque em Cor de fundo para abrir o seletor de cores e, em seguida, escolha uma cor ou insira um código hexadecimal.
- Para adicionar uma imagem, na seção Imagem de fundo, toque em Adicionar imagem. Toque em Adicionar imagens para carregar um arquivo de imagem ou selecione uma imagem existente na sua biblioteca.
Toque em Salvar.
Android
- No app da Shopify, toque no botão ☰ e em Configurações.
- Na seção Configurações da loja , toque em Checkout.
- Na seção Configurações, toque em Personalizar no checkout em questão.
- No editor de checkout e contas, toque em Configurações.
-
Na seção Plano de fundo 1, adicione uma cor ou imagem de fundo.
- Para adicionar uma cor, toque em Cor de fundo para abrir o seletor de cores e, em seguida, escolha uma cor ou insira um código hexadecimal.
- Para adicionar uma imagem, na seção Imagem de fundo, toque em Adicionar imagem. Toque em Adicionar imagens para carregar um arquivo de imagem ou selecione uma imagem existente na sua biblioteca.
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:
Desktop
No admin da Shopify, acesse Configurações > Checkout.
Na seção Configurações, clique em Personalizar ao lado da configuração que você quer personalizar.
No editor de checkout e contas, clique no ícone de engrenagem para acessar a barra lateral Configurações.
Na seção Cor, vá para Campo do formulário e fundo do cartão e clique em Transparente ou Branco.
Clique em Salvar.
iPhone
- No app da Shopify, toque no botão … e em Configurações.
- Na seção Configurações da loja , toque em Checkout.
- Na seção Configurações, toque em Personalizar no checkout em questão.
- No editor de checkout e contas, toque em Configurações.
- Na seção Cor, vá para Campo do formulário e fundo do cartão e selecione Transparente ou Branco.
- Toque em Salvar.
Android
- No app da Shopify, toque no botão