Central de Atendimento Nuvem Configure sua loja Layout Personalização avançada do layout

Como inserir selos personalizados no layout?

Passo a passo para inserir selos de reconhecimento ou segurança no rodapé da sua loja virtual Nuvemshop.

Última atualização: 09/01/2021

Inserir algum selo de reconhecimento ou de segurança em sua loja ajudará a conquistar a confiança de seus clientes. E a Nuvemshop disponibiliza a funcionalidade Selos Personalizados para sua loja virtual.

Pelo painel de administração de sua loja, é possível adicionar selos personalizados de duas formas diferentes:

  • Através de uma imagem estática
  • Via código HTML

A seguir, vamos te ensinar como concluir a configuração de ambas as formas.

Através de uma imagem estática

1. No painel de administração de sua loja, siga pelo caminho "Minha Nuvemshop" >  Layout" > "Personalizar seu layout atual".

2. Clique em "Rodapé da página" > "Selos personalizados no rodapé".

3. Na seção Selos personalizados do rodapé, clique em "Selecionar Imagem" para buscar a imagem salva em seu computador.

Observação:

a imagem deve estar em formato .png ou .jpeg. Lembre-se também de que será uma imagem estática, ou seja, que não pode ser clicada e por isso, não direcionará seu cliente para nenhum outro site.

4. Após selecionar o arquivo, defina se você quer salvar suas alterações no rascunho do seu layout, ou publicá-las em sua loja:

Para salvar essa alteração em um rascunho, clique em "Salvar rascunho". Para publicá-la imediatamente em sua loja, clique em "Publicar".

Importante: 

ao clicar em "Publicar", todas as alterações salvas no seu rascunho serão publicadas na sua loja e não somente a mudança que você fez no momento.

Pronto! Você já pode observar o seu novo selo na sua loja ou no rascunho do seu layout!

Via código HTML

1. No painel de administração de sua loja, siga pelo caminho "Minha Nuvemshop" > Layout" > "Personalizar seu layout atual".

2. Clique em "Rodapé da página" > "Selos personalizados no rodapé".

3. Na seção Selos personalizados do rodapé, se você tiver os códigos HTML fornecidos pelo serviço que você quer exibir o selo, basta colá-lo no campo.

4. Após colar o código, defina se você quer salvar suas alterações no rascunho do seu layout, ou publicá-las em sua loja:

Para salvar essa alteração em um rascunho, clique em "Salvar rascunho". Para publicá-la imediatamente em sua loja, clique em "Publicar".

Importante: 

ao clicar em "Publicar", todas as alterações salvas no seu rascunho serão publicadas na sua loja e não somente a mudança que você fez no momento.

Pronto! Você já pode observar como ficou o novo selo na sua loja ou no seu rascunho!

Criando um link para o seu selo

Se você possui a imagem do selo e o endereço de um link para direcionar seu cliente, porém não possui o código HTML completo para incorporá-lo no campo, é possível criá-lo seguindo alguns passos.

1. Envie a imagem do selo para a plataforma. Para isso, é preciso criar uma página em sua loja somente para fazer o envio da imagem.

Siga pelo caminho "Minha Nuvemshop" > "Páginas" > "Adicionar nova página" > "Página em branco" > "Criar".

2. Em seguida, clique no botão "Imagem",para fazer o upload da imagem do selo.

3. Na aba Enviar, selecione a imagem no seu computador e clique em "Enviar para o servidor". 

4. Depois do upload, o campo URL estará preenchido como na imagem abaixo. Basta copiar o código.

5. Agora, precisamos criar o código HTML para incluir na plataforma. Use como base o código abaixo:

<a href="PÁGINA"><img src="URL GERADA NO UPLOAD DA IMAGEM" alt="TEXTO ALTERNATIVO">

Nesse código, você deverá substituir as informações em letras maiúsculas pelas seguintes informações:

  • Página: adicione o endereço completo para onde você quer direcionar seu cliente quando ele clicar no selo. Por exemplo, se você quiser direcionar seu cliente para o Google, deverá preencher entras aspas o endereço http://google.com.br;
  • URL gerada no upload da imagem: coloque a URL que copiou no passo anterior;
  • Texto alternativo: escreva uma frase, ou o nome do selo, para quando seu cliente passar o mouse sobre o selo.

6. Por fim, siga os passos para adicionar o selo via Código HTML.

Observação:

se o código HTML que você colocou não está mostrando a imagem corretamente, reveja se colou o código correto e, se necessário, entre em contato com a empresa que forneceu o código porque se for um erro nesse código mesmo, eles conseguirão te ajudar mais rápido.

O artigo ajudou você?