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.