Ajuda
Fazer login

Personalização do estilo do checkout

Se você vende produtos em uma loja virtual, pode personalizar o estilo das páginas de checkout no editor de checkout e contas. Adicione o logo da empresa, altere as cores ou escolha uma nova fonte para que o checkout combine com a sua empresa.

Parte do branding que você escolhe para as páginas de checkout também se aplica às novas páginas da conta do cliente.

Nesta página

Considerações para personalizar o estilo do checkout e das contas de clientes

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

  • A área Configurações na seção de configurações do Checkout do admin fica oculta até que você escolha um plano e crie o primeiro produto.
  • Se você tem o plano Shopify Plus, pode usar a API Checkout Branding para fazer personalizações avançadas de branding no checkout.
  • Se 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.
  • Embora talvez você queira adicionar muitas cores e atrativos às páginas de checkout, é melhor manter um design simples. Os clientes usam essas páginas para inserir as informações de frete e pagamento dos pedidos, e o ideal é não distraí-los nem dificultar a leitura das informações. Escolha cores com alto contraste e imagens que não desviem a atenção do texto na página.

Criar uma paleta de cores para o checkout e as contas de clientes

É possível criar uma paleta para reutilizar as cores rapidamente em várias configurações no editor de checkout e de contas. Ao alterar uma cor na paleta, todas as configurações que a usam são atualizadas de forma dinâmica para a nova opção. Isso também significa que não é necessário memorizar os códigos hexadecimais quando quiser usar a mesma cor mais de uma vez.

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 que você quer personalizar.

  3. No editor de checkout e de contas, clique em Configurações para acessar a barra lateral Configurações.

  4. Na seção Paleta de cores, clique em + para selecionar e adicionar uma cor à paleta.

  5. Opcional: para remover uma cor que não é mais necessária na paleta:

    1. Clique na cor e em Excluir cor.
    2. Selecione outra cor para substituir a opção excluída em todo o checkout.
    3. Clique em Confirmar.

  6. Clique em Salvar.

Celular

  1. No app da Shopify, toque em Menu e depois em Configurações Configurações.

  2. Na seção Configurações da loja, toque em Checkout.

  3. Na seção Configurações, toque em Personalizar no checkout que quer personalizar.

  4. No editor de checkout e contas, toque em Configurações.

  5. Na seção Paleta de cores, toque em + para selecionar e adicionar uma cor à paleta.

  6. Opcional: para remover uma cor que não é mais necessária na paleta:

    1. Toque na cor e em Excluir cor.
    2. Selecione outra cor para substituir a opção excluída em todo o checkout.
    3. Toque em Confirmar.

  7. Toque em Salvar ou ✓.

Uso do seletor de cores no editor de checkout e de contas

Ao personalizar um campo no editor de checkout e de contas que exija uma cor, é possível usar o seletor de cores para ajudar na escolha. Nele, selecione uma cor usando uma destas maneiras:

  • Use o controle deslizante de cores para alterar a tonalidade das opções disponíveis na pré-visualização do seletor.
  • Use o campo hexadecimal para inserir o código de uma cor específica, como #0000FF para o azul-puro padrão.
  • Use Conta-gotas com o cursor para escolher uma cor específica de qualquer lugar da tela.
  • Use Ícone de grade para reduzir o número de cores disponíveis na pré-visualização do seletor para 40.

A seção Paleta de cores exibe todos os swatches de cores adicionados à paleta de cores no editor de checkout e de contas.

Se alguma cor já tiver sido selecionada de modo manual na sessão do editor de checkout e de contas, você também poderá escolher uma das opções nos swatches de cores Usados recentemente.

Personalizar as cores do cabeçalho

No topo de cada página de checkout e de conta de cliente, um cabeçalho exibe o nome da loja. É possível alterar a cor da tela de fundo desse banner. Escolha uma cor que combine com sua marca.

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 que você quer personalizar.

  3. No editor de checkout e de contas, clique em Configurações para acessar a barra lateral Configurações.

  4. Na seção Cabeçalho, faça uma das seguintes personalizações de cor:

    • Use Tela de fundo para definir uma cor da tela de fundo do cabeçalho.
    • Use Destaque para definir uma cor do ícone de carrinho e dos links no cabeçalho.

  5. Clique em Salvar.

Celular

  1. No app da Shopify, toque em Menu e depois em Configurações Configurações.

  2. Na seção Configurações da loja, toque em Checkout.

  3. Na seção Configurações, toque em Personalizar no checkout que quer personalizar.

  4. No editor de checkout e contas, toque em Configurações.

  5. Na seção Cabeçalho, faça uma das seguintes personalizações de cor:

    • Use Tela de fundo para definir uma cor da tela de fundo do cabeçalho.
    • Use Destaque para definir uma cor do ícone de carrinho e dos links no cabeçalho.

  6. Toque em Salvar ou ✓.

É possível adicionar o logo da loja às páginas de checkout, e alinhá-lo à esquerda, à direita ou no centro da área do banner.

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 que você quer personalizar.

  3. No editor de checkout e de contas, clique em Configurações para acessar a barra lateral Configurações.

  4. Na seção Logo, clique no campo Imagem.

  5. Clique em Selecionar na biblioteca para escolher uma imagem já existente nela.

  6. Opcional: na seção Logo, ajuste-o com as seguintes configurações:

    • Use Largura para selecionar o tamanho do logo em pixels.
    • Use Alinhamento para definir se o logo será exibido à esquerda, no centro ou à direita do banner.

  7. Clique em Salvar.

Celular

  1. No app da Shopify, toque em Menu e depois em Configurações Configurações.

  2. Na seção Configurações da loja, toque em Checkout.

  3. Na seção Configurações, toque em Personalizar no checkout que quer personalizar.

  4. No editor de checkout e contas, toque em Configurações.

  5. Na seção Logo, toque no campo Imagem.

  6. Toque em Selecionar na biblioteca para escolher uma imagem já existente nela.

  7. Opcional: na seção Logo, ajuste-o com as seguintes configurações:

    • Use Largura para selecionar o tamanho do logo em pixels.
    • Use Alinhamento para definir se o logo será exibido à esquerda, no centro ou à direita do banner.

  8. Toque em Salvar ou ✓.

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

É possível adicionar uma cor de fundo à área de conteúdo principal das páginas de checkout. É nessa área que os clientes inserem as informações de frete e pagamento. Portanto, certifique-se de que seja possível ler claramente os campos sobre o fundo escolhido.

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 que você quer personalizar.

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

  4. Na seção Principal, clique em Cor para abrir o seletor de cores e, em seguida, escolha uma cor ou insira um código hexadecimal.

  5. Clique em Salvar.

Celular

  1. No app da Shopify, toque em Menu e depois em Configurações Configurações.

  2. Na seção Configurações da loja, toque em Checkout.

  3. Na seção Configurações, toque em Personalizar no checkout que quer personalizar.

  4. No editor de checkout e contas, toque em Configurações.

  5. Na seção Principal, toque em Cor para abrir o seletor de cores e, em seguida, escolha uma cor ou insira um código hexadecimal.

  6. Toque em Salvar ou ✓.

Alterar a cor dos campos do formulário

É possível alterar a cor dos campos do formulário no checkout, bem como a das mensagens de erro para torná-las brancas ou transparentes. Verifique se o texto pode ser lido de maneira clara nos campos.

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 que você quer personalizar.

  3. No editor de checkout e de contas, clique em Configurações para acessar a barra lateral Configurações.

  4. Na seção Campos de entrada, faça uma destas personalizações:

    • Para alterar a cor dos campos de entrada, acesse Entrada e clique em Transparente ou Branco.
    • Para alterar a cor das mensagens de erro, clique no campo Erro e selecione uma cor.

  5. Clique em Salvar.

Celular

  1. No app da Shopify, toque em Menu e depois em Configurações Configurações.

  2. Na seção Configurações da loja, toque em Checkout.

  3. Na seção Configurações, toque em Personalizar no checkout que quer personalizar.

  4. No editor de checkout e contas, toque em Configurações.

  5. Na seção Campos de entrada, faça uma destas personalizações:

    • Para alterar a cor dos campos de entrada, acesse Entrada e toque em Transparente ou Branco.
    • Para alterar a cor das mensagens de erro, toque no campo Erro e selecione uma cor.

  6. Toque em Salvar ou ✓.

Adicionar uma imagem de fundo ou cor ao resumo do pedido

Quando um cliente clica em Exibir resumo do pedido em uma página de checkout, é exibida uma lista dos produtos que está comprando. É possível 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 se está satisfeito com a exibição do resumo do pedido.

Imagens menores se repetem na vertical e na horizontal no plano de fundo, de forma semelhante a blocos.

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 que você quer personalizar.

  3. No editor de checkout e de contas, clique em Configurações para acessar a barra lateral Configurações.

  4. Na seção Resumo do pedido, clique em resumo do pedido.

  5. Adicionar uma cor ou imagem da tela de fundo:

    • Para adicionar uma cor, clique em Tela de fundo para abrir o seletor de cores e, depois, escolha uma opção ou insira um código hexadecimal.
    • Para adicionar uma imagem, clique em Imagem > Selecionar. Clique em Selecionar na biblioteca para escolher uma imagem já existente nela.

  6. Clique em Salvar.

Celular

  1. No app da Shopify, toque em Menu e depois em Configurações Configurações.

  2. Na seção Configurações da loja, toque em Checkout.

  3. Na seção Configurações, toque em Personalizar no checkout que quer personalizar.

  4. No editor de checkout e contas, toque em Configurações.

  5. Na seção Resumo do pedido, toque em resumo do pedido.

  6. Adicionar uma cor ou imagem da tela de fundo:

    • Para adicionar uma cor, toque em Tela de fundo para abrir o seletor de cores e, depois, escolha uma opção ou insira um código hexadecimal.
    • Para adicionar uma imagem, toque em Imagem > Selecionar. Toque em Selecionar na biblioteca para escolher uma imagem já existente nela.

  7. Toque em Salvar ou ✓.

Alterar ou remover uma imagem do resumo do pedido

É possível alterar ou remover a imagem adicionada ao 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 que você quer personalizar.

  3. No editor de checkout e de contas, clique em Configurações para acessar a barra lateral Configurações.

  4. Na seção Resumo do pedido, clique em resumo do pedido.

  5. Na imagem que você quer substituir, clique em Alterar para selecionar uma imagem da biblioteca ou explorar imagens gratuitas.

  6. Clique em Salvar.

Celular

  1. No app da Shopify, toque em Menu e depois em Configurações Configurações.

  2. Na seção Configurações da loja, toque em Checkout.

  3. Na seção Configurações, toque em Personalizar no checkout que quer personalizar.

  4. No editor de checkout e contas, toque em Configurações.

  5. Na seção Resumo do pedido, toque em resumo do pedido.

  6. Na imagem que você quer substituir, toque em Alterar para selecionar uma imagem da biblioteca ou explorar imagens gratuitas.

  7. Toque em Salvar ou ✓.

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

Alterar a fonte na página de checkout

É possível escolher entre uma lista de fontes para personalizar as 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 que você quer personalizar.

  3. No editor de checkout e de contas, clique em Configurações 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.

Celular

  1. No app da Shopify, toque em Menu e depois em Configurações Configurações.

  2. Na seção Configurações da loja, toque em Checkout.

  3. Na seção Configurações, toque em Personalizar no checkout que quer personalizar.

  4. No editor de checkout e contas, toque em Configurações.

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

  6. Toque em Salvar ou ✓.

Alterar as cores dos botões e de destaque na página de checkout

É possível alterar a cor dos botões e destaques, como links nas páginas de checkout. Em caso de mudança nas cores, verifique se o texto pode ser lido de maneira clara nas telas de fundo da área principal do conteúdo e no 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 que você quer personalizar.

  3. No editor de checkout e de contas, clique em Configurações para acessar a barra lateral Configurações.

  4. Na seção Destaques e botões, clique na caixa de cores ao lado de Destaques ou Botões para abrir o seletor de cores. Em seguida, escolha uma cor ou insira um código hexadecimal.

  5. Clique em Salvar.

Celular

  1. No app da Shopify, toque em Menu e depois em Configurações Configurações.

  2. Na seção Configurações da loja, toque em Checkout.

  3. Na seção Configurações, toque em Personalizar no checkout que quer personalizar.

  4. No editor de checkout e contas, toque em Configurações.

  5. Na seção Destaque e botões, toque na caixa de cor ao lado de Destaques ou Botões para abrir o seletor de cores e, em seguida, escolha uma cor ou insira um código hexadecimal.

  6. Toque em Salvar ou ✓.

Alterar o layout do checkout

Por padrão, o layout do checkout da loja está configurado 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 os checkouts de uma e três páginas antes de alterar o layout do checkout.

Ao alterar o layout do checkout, a pré-visualização no editor de checkout e de contas não é exibida em tempo real. Depois de salvar as alterações, acesse o checkout da vitrine virtual 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 que você quer personalizar.

  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 de layout do checkout.

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

  6. Clique em Salvar.

Celular

  1. No app da Shopify, toque em Menu e depois em Configurações 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 de 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 definir o layout do checkout.

  6. Toque em Salvar ou ✓.

Gerenciar o botão “Comprar de novo”

O botão Comprar de novo é exibido na página de status do pedido para que os clientes comprem novamente os itens que já adquiriram.

Etapas:

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

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

  3. No editor de checkout e de contas, clique no ícone Configurações.

  4. Na seção Botão “Comprar de novo”, ative ou desative o botão.

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

Por padrão, quando um cliente faz checkout em um dispositivo móvel, o resumo do pedido e o campo de código de desconto ficam ocultos. O cliente pode tocar em Exibir resumo do pedido para expandir todos os detalhes do resumo e exibir o campo de código de desconto, de modo a adicionar um código de desconto ou de cartão-presente ao pedido.

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

Para acessar esta configuração, o checkout deve usar o layout de checkout de três páginas.

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 que você quer personalizar.

  3. No editor de checkout e de 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 o campo de código de desconto.

  6. Clique em Salvar.

Celular

  1. No app da Shopify, toque em Menu e depois em Configurações Configurações.

  2. Na seção Configurações da loja, toque em Checkout.

  3. Na seção Configurações, toque em Personalizar no checkout que quer personalizar.

  4. No editor de checkout e de contas, toque em Seções.

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

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

  7. Toque em Salvar ou ✓.

Adicionar blocos às páginas de checkout

É possível adicionar recursos como banners personalizados ou recompensas de fidelidade à experiência de checkout do cliente usando blocos. Alguns apps de checkout, incluindo os que personalizam as páginas de informações, frete e pagamento no checkout, estão disponíveis apenas para lojas no plano Shopify Plus. Consulte a disponibilidade de apps de checkout ao escolher um app para adicionar ao checkout.

É possível adicionar blocos existentes diretamente às seções nas páginas usando a barra lateral Seções ou a barra lateral Apps.

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

Adicionar blocos usando a barra lateral Seções

É possível adicionar blocos de apps instalados à página em visualização usando a barra lateral Seções. Apenas os blocos disponíveis para instalação em uma página ou seção são exibidos como opções selecionáveis.

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 que você quer personalizar.

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

  4. Clique em ⊕ Adicionar bloco na seção em que você quer adicionar um app.

  5. Clique no bloco que você quer adicionar.

  6. Personalize o bloco conforme o necessário:

    • Para reposicionar o bloco, arraste e solte-o para cima ou para baixo na lista Seções ou use os botões de mover na janela de pré-visualização.
    • Clique no bloco para configurar as definições do bloco.

  7. Clique em Salvar.

Celular

  1. No app da Shopify, toque em Menu e depois em Configurações Configurações.

  2. Na seção Configurações da loja, toque em Checkout.

  3. Na seção Configurações, toque em Personalizar na configuração de checkout desejada.

  4. No editor de checkout e de contas, selecione a página à qual você quer adicionar um app e toque em Seções.

  5. Toque em ⊕ Adicionar bloco na seção em que você quer adicionar um app.

  6. Toque no bloco que você quer adicionar.

  7. Personalize o bloco conforme o necessário:

    • Para reposicionar o bloco, arraste e solte-o para cima ou para baixo na lista Seções ou use os botões de mover na janela de pré-visualização.
    • Toque no bloco para configurar as definições do bloco.

  8. Toque em Salvar ou ✓.

Adicionar blocos usando a barra lateral Apps

É possível adicionar blocos de apps instalados à página atual usando a barra lateral Apps. Apenas as páginas em que blocos específicos podem ser instalados são exibidas como opções ao adicionar um bloco.

Saiba mais sobre como usar a barra lateral Apps no editor de checkout e de contas.

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 que você quer personalizar.

  3. No editor de checkout e de contas, clique em Apps para acessar a barra lateral Apps.

  4. Ao lado do bloco que você quer adicionar, clique em ⊕.

  5. No pop-out Adicionar a, clique na página à qual você quer adicionar o bloco.

  6. Personalize o bloco conforme o necessário:

  7. Clique em Salvar.

Celular

  1. No app da Shopify, toque em Menu e depois em Configurações Configurações.

  2. Na seção Configurações da loja, toque em Checkout.

  3. Na seção Configurações, toque em Personalizar na configuração de checkout desejada.

  4. No editor de checkout e de contas, toque em Apps.

  5. Ao lado do bloco que você quer adicionar, toque em ⊕.

  6. No pop-out Adicionar a, toque na página à qual você quer adicionar o bloco.

  7. Personalize o bloco conforme o necessário:

  8. Toque em Salvar ou ✓.