Personalizar a aparência dos Perfis de Link de Pagamento

Você pode personalizar o link de pagamento de acordo com a identidade da sua marca, seguindo o mesmo padrão do seu site.

É possível selecionar a versão do Checkout, mudar as cores do checkout, inserir banners com imagens ou vídeos, personalizar o texto do botão de compra diretamente no checkout e alinhar a tipografia escolhendo a fonte ideal para o seu público (entre as opções Padrão, Sans-serif ou Serif).

Nessa página:

• Versão do Checkout

• Mudar as cores da página do Checkout

• Alterar a Tipografia (Tipo de Letra) do Checkout

• Configurar banners com imagens no Checkout

• Configurar o Layout Mobile do Checkout

Versão do Checkout

Você pode alterar a versão do checkout. Dentro do V5, você escolher qual versão do checkout que deseja utilizar: One Page v.5 (que concentra todos os campos de preenchimento em apenas uma página) ou Multi step v.5 (o processo de pagamento é dividido em várias etapas).

Etapas:

1 - Duplique ou edite um perfil de link de pagamento existente - uma janela de edição será exibida.

2 - Clique na aba Aparência.

3 - Em Aparência, selecione a Versão do Checkout que deseja.

4 - Clique em Enviar.

Mudar as cores da página do Checkout

Você pode alterar as cores do checkoutpara ficarem de acordo com as cores da sua marca, além disto, pode configurar cores do Checkout, podendo redefinir as cores ou utilizar a cor padrão da Guru.

Etapas:

1 - Duplique ou edite um perfil de link de pagamento existente - uma janela de edição será exibida.

2 - Clique na aba Aparência.

3 - Em Aparência, clique em Configurar Cores do Checkout.

4 - Na janela de edição, use os botões de controle ou informe o código da cor em formato hexadecimal para cada elemento do checkout. À medida que realiza as alterações, pode conferir oresultado do lado direito da janela.

1. Seletor de cor: exibe uma paleta de cores para seleção - disponível em cada elemento do checkout;

2. Redefinir: desfaz todas as alterações realizadas;

3. Padrão Guru: retorna ao padrão de cores do Checkout Guru;

4. Pré-visualização: alterna a pré-visualização entre desktop e dispositivo móvel.

Ao concluir as alterações, clique em Enviar.

5 - De volta à seção Aparência, clique em Enviar para salvar as alterações realizadas.

Alterar a Tipografia (Tipo de Letra) do Checkout

É possível alterar a fonte (tipo de letra) do seu checkout para deixá-lo com a identidade visual da sua marca.

Etapas:

1 - Duplique ou edite um perfil de link de pagamento existente - uma janela de edição será exibida.

2 - Clique na aba Aparência.

3 - Em Aparência, clique em Tipografia.

4 - Em Tipo de Letra, selecione o tipo de letra que deseja no Checkout.

5 - Clique em Enviar.

Configurar banners com imagens no Checkout

Você pode personalizar ainda mais o seu checkout inserindo banners com imagens ou vídeos.

Etapas:

1 - Duplique ou edite um perfil de link de pagamento existente - uma janela de edição será exibida.

2 - Clique na aba Aparência.

3 - Em Aparência, clique em Banners para configurar imagem.

4 - Em Banners configure a opção desejada:

Posição do Banner Imagem - Topo (Desktop e Mobile)

Se deseja configurar o Banner no topo, você pode inserir a imagem no Desktop ou no Mobile.

Etapas:

1- Em Banners, clique em Topo.

2 - Em Topo, clique na aba Imagem, e em seguida configure:

1. Banner em largura total: quando ativado, a imagem do banner ficará em largura total no checkout;

2. Selecionar Imagem: selecione a imagem que deseja inserir no topo do checkout.

3. Usar imagem desktop: quando ativado, indica que o mobile usará o mesmo banner de imagem que está configurado para o desktop - nesse caso não é necessário fazer upload de dois arquivos;

4. Pré-visualização: alterna a pré-visualização entre desktop e dispositivo móvel - atualiza em tempo real conforme edição à esquerda.

3 - Clique em Enviar.

Posição do Banner Imagem - Lateral (apenas Desktop)

Se deseja configurar o Banner na Lateral, você pode inserir a imagem no Desktop.

Etapas:

1- Em Banners, clique em Lateral.

2 - Em Lateral, informe:

1. Selecionar Imagem: selecione a imagem que deseja inserir na lateral do checkout.

2. Pré-visualização: alterna a pré-visualização entre desktop - atualiza em tempo real conforme edição à esquerda.

3 - Clique em Enviar.

Posição do Banner Imagem - Abaixo do Detalhe (apenas Desktop)

Se deseja configurar o Banner abaixo do Detalhe, você pode inserir a imagem no Desktop.

Etapas:

1- Em Banners, clique em Abaixo do Detalhe.

2 - Em Abaixo do Detalhe, clique na aba Imagem, e em seguida configure:

1. Selecionar Imagem: selecione a imagem que deseja inserir abaixo do detalhe no checkout.

2. Pré-visualização: alterna a pré-visualização entre desktop - atualiza em tempo real conforme edição à esquerda.

3 - Clique em Enviar.

Configurar Banners com vídeos

Você pode tornar seu checkout mais dinâmico utilizando conteúdo em vídeos. posicionadas no topo ou abaixo dos detalhes do checkout.

Etapas:

1 - Duplique ou edite um perfil de link de pagamento existente - uma janela de edição será exibida.

2 - Clique na aba Aparência.

3 - Em Aparência, clique em Banners para configurar vídeo.

4 - Em Banners configure a opção desejada:

Posição do Banner - Topo (Desktop e Mobile)

Se deseja configurar o Banner no topo, você pode inserir vídeo no Desktop ou no Mobile.

Etapas:

1- Em Banners, clique em Topo.

2 - Em Topo, clique na aba Vídeo, e em seguida configure:

1. Banner em largura total: quando ativado, o banner do vídeo ficará em largura total no checkout;

2. Vídeo Desktop: cole o link do player do Panda Vídeo;

3. Usar vídeo desktop: quando ativado, indica que o mobile usará o mesmo banner de vídeo que está configurado para o desktop - nesse caso não é necessário fazer upload de dois arquivos;

4. Vídeo Mobile: cole o link do player do Panda Vídeo - para inserir o link para aparecer no topo do mobile, será preciso desativar a opção usar vídeo desktop;

5. Pré-visualização: alterna a pré-visualização entre desktop e dispositivo móvel - atualiza em tempo real conforme edição à esquerda.

3 - Clique em Enviar.

Nota: orientamos seguir o tamanho de vídeo proporcional recomendado pelo Panda Vídeo.

Posição do Banner - Abaixo do Detalhe (apenas Desktop)

Se deseja configurar o Banner abaixo do Detalhe, você pode inserir vídeo no Desktop.

Etapas:

1- Em Banners, clique em Abaixo do Detalhe.

2 - Em Abaixo do Detalhe, clique na aba Vídeo, e em seguida configure:

1. Link do Panda Vídeo abaixo do Detalhe: cole o link do player do Panda Vídeo;

2. Pré-visualização: pré-visualização entre desktop - atualiza em tempo real conforme edição à esquerda.

3 - Clique em Enviar.

Nota: orientamos seguir o tamanho de vídeo proporcional recomendado pelo Panda Vídeo.

Configurar o Layout Mobile do Checkout

Você pode personalizar o layout do checkout para dispositivos móveis, adaptando a exibição de imagens e detalhes do pedido.

Etapas:

1 - Duplique ou edite um perfil de link de pagamento existente - uma janela de edição será exibida.

2 - Clique na aba Aparência.

3 - Em Aparência, clique em Layout Mobile.

4 - Em Layout Mobile, é possível configurar a Imagem do Produto e o Posicionamento do Detalhe da Compra.

Imagem do Produto

Em Imagem do Produto selecione o tamanho ideal da imagem no checkout - Pequena, Média ou Grande).

É possível configurar a imagem do produto como Pequena, Média e Grande.

Posicionamento do Detalhe da Compra

Em Posicionamento do Detalhe da Compra é possível selecionar a posição onde a informação do detalhe do produto irá aparecer no dispositivos móveis.

1. Escolha onde exibir a imagem e a descrição do produto nos dispositivos móveis - Em Cima, Em Baixo ou Em Ambos;

2. Mostra o Detalhe da Compra Expandido: quando ativado, exibe nome da loja e detalhes da compra em formato expandido nos dispositivos móveis.

3. Ocultar Compra Segura: quando ativado, não exibe a seção Compra Segura na versão para dispositivos móveis.

5 - Clique em Enviar.

Texto do Botão de Compra

É possível personalizar o botão de comprar do checkout, ajustando conforme necessidade, público e ao tipo de produto.

Etapas:

1 - Duplique ou edite um perfil de link de pagamento existente - uma janela de edição será exibida.

2 - Clique na aba Aparência.

3 - Em Aparência, Texto do Botão de Compra, selecione o tipo de botão que deseja no Checkout, para vendas avulsas - Comprar Agora; Comprar; Pagar Agora ou Pagar.

4 - Clique em Enviar.

Mudar a ancoragem visual do parcelamento

Você pode personalizar como o parcelamento é apresentado, para auxiliar a decisão de compra por parte dos clientes.

Etapas:

1 - Duplique ou edite um perfil de link de pagamento existente - uma janela de edição será exibida.

2 - Clique na aba Aparência.

3 - Em Aparência, selecione a opção desejada para a Ancoragem Visual do Parcelamento:

1. Ocultar: não exibe informação sobre parcelamento junto ao total do pedido;

2. Mostrar selecionado¹: exibe o parcelamento selecionado junto ao total do pedido - se desejar, ative a opção para dar mais destaque ao parcelamento;

3. Mostrar máximo¹: exibe o parcelamento máximo disponível junto ao total do pedido - se desejar, ative a opção para dar mais destaque ao parcelamento.

(1) "A opção Dar mais destaque ao parcelamento só fica disponível se as opções Mostrar Seleção ou Mostrar Máximo estiverem selecionadas.

4 - Clique em Enviar.

Mais Recursos