Personalizar o estilo de seu checkout

Se você vende seus produtos usando uma loja virtual, então você pode personalizar o estilo de suas páginas de checkout no editor de temas. Adicione o logotipo da sua empresa, altere as cores ou escolha uma nova fonte para fazer com que o checkout corresponda ao seu negócio.

Embora você possa querer adicionar muitas cores e interesse às suas páginas de checkout, é melhor manter o design simples. Seus clientes usarão essas páginas para configurar as informações de frete e pagamento para seus pedidos, e você não quer distraí-las nem tornar as informações difíceis de ler. Escolha cores com alto contraste e imagens que não desviem a atenção das palavras na página.

Como carregar 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. Escolha 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.

Passos:

  1. Na seção Estilo, clique em Personalizar checkout para abrir o editor de temas.

  2. Na seção BANNER, clique em Carregar imagem ou selecione uma imagem que você já colocou na sua biblioteca.

  3. Clique em Salvar.

Como adicionar um logo à página de checkout

Você pode adicionar o logo da sua loja às páginas de checkout. Se você estiver usando uma imagem de banner, o logo aparecerá em cima dela. Você pode posicionar seu logo à esquerda, à direita ou no centro da área do banner nas páginas de checkout.

Passos:

  1. Na seção Estilo, clique em Personalizar checkout para abrir o editor de temas.

  2. Na seção LOGO, clique em Carregar imagem ou selecione uma imagem que você já colocou na sua biblioteca.

  3. Selecione uma posição para o logo.

  4. Selecione um tamanho para o logo.

  5. Clique em Salvar.

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

Você pode 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 digitarão 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. Você não pode adicionar uma imagem de fundo e uma cor.

Passos:

  1. Na seção Estilo, clique em Personalizar checkout para abrir o editor de temas.

  2. Na seção ÁREA PRINCIPAL DO CONTEÚDO, adicione uma cor de fundo ou imagem.

  • 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 Enviar imagem ou selecione uma imagem que você já tenha em sua biblioteca. Imagens menores serão repetidas vertical e horizontalmente no plano de fundo, como ladrilhos.

  1. Clique em Salvar.

Como alterar a cor dos campos do formulário

Você pode alterar a cor dos campos para torná-los brancos ou transparentes. Você pode querer tornar os campos transparentes para que uma imagem de plano de fundo seja exibida. Não se esqueça de conferir se é possível ler claramente o texto nos campos.

Passos:

  1. Na seção Estilo, clique em Personalizar checkout para abrir o editor de temas.

  2. Na seção ÁREA PRINCIPAL DO CONTEÚDO, clique na lista suspensa Campos do formulário para selecionar a cor desejada.

  3. Clique em Salvar.

Como adicionar uma imagem de fundo ou cor ao resumo do pedido

Quando um cliente clica em Mostrar resumo do pedido em uma página de checkout, aparece uma lista dos produtos comprados. Você pode adicionar uma imagem ou cor de fundo ao resumo do pedido. Visualizar suas escolhas previamente para conferir se está tudo certo com a aparência do resumo do pedido. Você pode clicar em Mostrar resumo do pedido na pré-visualização do editor de temas.

Passos:

  1. Na seção Estilo, clique em Personalizar checkout para abrir o editor de temas.

  2. Na seção RESUMO DO PEDIDO, 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 Enviar imagem ou selecione uma imagem que você já tenha em sua biblioteca. Imagens menores serão repetidas vertical e horizontalmente no plano de fundo, como ladrilhos.

  1. Clique em Salvar.

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

Passos:

  1. Na seção Estilo, clique em Personalizar checkout para abrir o editor de temas.

  2. Na imagem que você deseja substituir, clique em Atualizar e envie uma imagem ou selecione uma da sua biblioteca.

  3. Clique em Salvar.

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

Como adicionar texto alternativo à imagem

Quando tiver escolhido as imagens nas suas páginas de checkout, é uma boa ideia adicionar um texto alternativo às imagens. Este texto pode ajudar com acessibilidade e SEO. Saiba mais sobre a otimização para mecanismos de busca.

Passos:

  1. Em uma imagem, clique em Atualizar e selecione Editar imagem.

  2. Digite o texto alternativo para a imagem. Escolha um título curto e descritivo para a imagem.

  3. Clique em Salvar.

Como alterar a fonte na página de checkout

Você pode selecionar em uma lista de fontes para personalizar suas páginas de checkout. Você não pode alterar a cor do texto na página de checkout.

Passos:

  1. Na seção Estilo, clique em Personalizar checkout para abrir o editor de temas.

  2. Na seção TIPOGRAFIA, clique no menu suspenso Cabeçalhos ou no menu suspenso Corpo e selecione uma fonte.

  3. Clique em Salvar.

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

Você pode alterar a cor dos botões, mensagens de erro e acentos, 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.

Passos:

  1. Na seção Estilo, clique em Personalizar checkout para abrir o editor de temas.

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

  3. Clique em Salvar.

Pronto(a) para começar a vender com a Shopify?

Experimente de graça