Estilizar sua página de finalização da compra

Alinhe a página de finalização de compra com o design do seu site.

Ultima atualização 22 de Agosto de 2024

Estilize a página de finalização de compra para corresponder à estética do seu site. É possível personalizar o alinhamento do cabeçalho e as cores de texto, plano de fundo e botão. Essas alterações também se aplicam à página de finalização de compra do bloco de doação.

Saiba mais sobre como personalizar a página de finalização de compra em "Personalização da finalização de compra" e "Criação de um site Commerce acessível".

Anotação

no momento, não é possível alterar o texto da página de finalização de compra.

Assista a este vídeo

Edite o estilo da página de finalização da compra

  1. Abra o painel "Páginas" e, no fim do painel, clique em Páginas do sistema; em seguida, clique em Finalização de compra.
  2. Use style tweaks to customize different elements of the page.
  3. When you’re finished styling the checkout page, click Save.

Aparecerá um banner informando que a Finalização de compra está desativada. Isso significa que as alterações ainda não estão visíveis, mas os clientes ainda podem comprar seus produtos enquanto você ajusta o estilo da página. As alterações só ficarão visíveis após você salvar a página.

Você pode ajustar:

  • Cor de fundo
  • Mostrar logotipo do site
  • Title Color - Change your Site Title color, if Show Site Logo is unchecked.
  • Cor do cabeçalho
  • Cor da borda do cabeçalho
  • Alinhamento do cabeçalho - Exiba o título ou o logotipo à esquerda, ao centro ou à direita do cabeçalho.
  • Cor do botão - Altere os botões na página, incluindo os botões Continuar e Resgatar. Não recomendamos alterar a cor para transparente ou branco. Como o texto do botão não pode ser alterado, isso oculta o botão e impede que os clientes continuem com a transação.
checkout-page-styles3.png

Anotação

It's not possible to change the appearance of your site title on the checkout page.

Após a finalização de compra

A página que aparece após a finalização da compra depende do que o cliente comprou.

Página de status do pedido: produtos físicos, digitais e de serviço

Se o seu cliente comprou um produto físico, digital ou de serviço, aparecerá a página de status do pedido. Essa página inclui a maioria dos detalhes do pedido e a opção de criar uma conta de cliente. Ela sempre tem fundo branco e usa uma fonte comum. Não é possível personalizar a página de status do pedido em "Estilos do site".Para uma prévia da página de status do pedido, consulte Como os clientes compram seus produtos ou execute um pedido de teste com um tipo de produto aceito.

Dica

se a página de status do pedido não for mostrada quando executar um pedido de teste para um tipo de produto compatível, é provável que você tenha feito uma injeção de código no seu site. Para saber mais, acesse como usar injeção de código

Página de confirmação do pedido: assinatura, vale-presente e adesão

Se o cliente comprou uma assinatura, um vale-presente ou fez uma adesão, uma página de confirmação de pedido mais simplificada é mostrada, exibindo o texto Pedido confirmado e o número do pedido. Esta página corresponde aos estilos do seu site. Para visualizar a página de pedido confirmado, execute um pedido de teste com um produto compatível.

O estilo do texto da página de confirmação do pedido depende da versão do site.

Use os ajustes abaixo para atribuir um estilo à página de confirmação do pedido. Lembre-se de que o esquema de cores da página de pedido confirmado é o mesmo da sua página 404 padrão
.

  • Fonte de “Pedido confirmado” – Igual ao Título 1
  • Cor de “Pedido confirmado” – Igual ao Título (extra grande)
  • Fonte do texto “Número do pedido e confirmação” – Igual ao Parágrafo 2
  • Cor do texto de “Número do pedido e confirmação” – Igual ao Parágrafo (Médio)
  • Fonte "A compra inclui downloads" - segue o Título 3
  • Cor de “A compra inclui downloads digitais” - segue o Título (médio)

Em todos os templates:

  • Texto de “Pedido confirmado” – Igual ao texto do Título 1
  • Texto de “Número e confirmação do pedido” - igual ao corpo do texto
  • Texto "A compra inclui downloads" - segue o Título 3

Para saber mais sobre como alterar fontes e cores, acesse Como fazer alterações de estilo.

Order confirmation page header content

Não é possível adicionar imagens e outros conteúdos à sua página de finalização de compra. No entanto, na versão 7.0, essas famílias de templates exibem conteúdo de suas páginas 404 padrão em páginas de confirmação de pedidos, carrinhos de compras e pesquisas:

  • Avenue
  • Farro
  • Five
  • Wexley
  • York

Para remover conteúdo de cabeçalho indesejado nessas famílias de templates, edite sua página 404 padrão ou crie uma página 404 personalizada.

Próximos passos

Now that you’ve adjusted the checkout page style, you can customize other elements of the checkout experience:

Saiba mais em Personalização da finalização de compra.

Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.

Estilizar sua página de finalização da compra