Configurando o Rodapé

Share on facebook
Share on google
Share on twitter
Share on linkedin

O rodapé é uma área muito importante da sua loja virtual, pois lá podem ser encontrados vários links de informações adicionais para os clientes, como: páginas institucionais, informações relevantes para a compra dos produtos, itens do menu da loja, box para cadastramento na newsletter, links para as redes sociais, formas de pagamento aceitas, etc.

Vamos tomar como exemplo o rodapé do tema gratuito da WeShop “Boutique”. Nele, podemos ver que na aba Institucional encontram-se páginas que levam para o “Quem Somos”, “Segurança e Privacidade”, “Nosso Contato” e “Fale Conosco”. Assim como a aba de Informações leva para algumas informações adicionais relevantes na hora do cliente realizar a compra, como “Rastrear Pedido”, “Frete e Devoluçãoes”, “Perguntas Frequentes”.

Todas essas páginas ajudam para aumentar a credibilidade em seu site e tornar o cliente ainda mais preparado para poder realizar a compra.

Essas páginas são chamadas de Páginas de Informações e para você adicioná-las no rodapé da sua loja virtual, primeiramente é necessário criá-las. Caso você não saiba como criar uma página de informação, volte em nossa lição anterior chamada “Páginas de Informações” antes de dar continuidade nesta lição.

Como adicionar as páginas de informações em meu rodapé?

Agora que as páginas de informações já foram criadas, você precisa adicioná-las em seu rodapé. É um processo que parece que um pouco complicado mas se seguir os passos corretamente não tem erro!

Para adicionar as páginas de informações em seu rodapé temos duas maneiras:

Primeira maneira: Primeiramente, antes de adicionar uma nova página, você precisa pegar o link da sua página. Essa primeira opção é mais simples, porém não é muito boa quando se trata de indexação do Google.

Clique em Ferramentas >> Páginas de Informações. Após isso, clique no “olho” para visualizar a página que você deseja adicionar. Irá abrir uma nova aba em seu navegador. Copie o link dessa nova aba aberta.

Após isso, clique em Layout >> Definir Rodapé. Dentro da caixa de texto há um menu, o primeiro botão é “Código-Fonte”, clique nele. Agora, dê um Ctrl+F e procure por “Institucional” ou qualquer que seja o título da área do rodapé que você deseja editar e dê enter.

Desça um pouco e você verá um código como este:

<li><a href=”http://bit.ly/2nTDHQk” title=””>Painel de controle</a></li>

Na parte azul, é onde você deve colocar o link para onde essa página será levada. Na parte roxa é onde você deve colocar o título da página. Caso queira acrescentar mais uma página basta adicionar um código igual a este, abaixo dos outros, apenas editando o necessário. Caso queira excluir uma página, basta apagar o código.

Agora é só repetir este passo para todas as páginas de informações que você queira adicionar, no tópico escolhido.

Após realizar todas as mudanças clique em “Salvar Alterações” para concluir o procedimento com sucesso.

Segunda Maneira: A segunda maneira de fazer dá um pouco mais de trabalho quando se trata do link, entretanto, com certeza irá ajudar na indexação da sua loja virtual, para isso, vá em Ferramentas >> Páginas de Informações. Logo no início da página temos uma dica, veja:

Ainda usando o exemplo do tema gratuito da WeShop, “Boutique”, ficaria algo parecido com:http://roupas.lojavirtual.io/p/1/quem_somos

“codigo_pagina” se refere ao ID, e o “nome_da_pagina” se refere ao título. Veja abaixo:

Após deixar o seu link da maneira que foi mostrado na dica, copie-o e repita as mesmas etapas da primeira alternativa, depois de clicar em Layout >> Definir Rodapé.

 Lembrete: Não coloque acento nem caracteres especiais na URL.

Para saber mais sobre indexação do Google, veja nosso curso chamado “Otimização de busca (SEO)”

Como editar os links das redes sociais no rodapé?

Agora, para acrescentar os links das suas redes sociais nos ícones do rodapé, vá em Layout >> Definir Rodapé, clique em“Código-Fonte”, dê um Ctrl+F e pesquise por social-media e dê enter.

Desça um pouco e você verá códigos parecidos com esse:

<li><a href=”#“><i aria-hidden=”true” class=”fa fa-twitter fa-2x“></i></a></li>

Neste caso, esse código se refere ao ícone do Twitter, como você pode ver na parte em azul. A única coisa que você precisa fazer é alterar a parte em laranja com o link da sua rede social referente ao ícone condizente ao código.

Após realizar todas as mudanças clique em “Salvar Alterações” para concluir o procedimento com sucesso.